I have a DASH app with a number of checkboxes. I wish to setup a hotkey that would make a keyboard shortcut to check some boxes if the user hits a keyboard "command D" for example. I searched everywhere I could, and the only reference I found was to use an "accessKey" (recommended by the Dash creator chriddyp). I haven't found any documentation or examples of how to utilize this. Could anyone give me some pointers?
dcc.Checklist(
options=[
{'label': 'Asleep', 'value': 'sleep'},
{'label': 'Direct Vision', 'value': 'direct'},
{'label': 'Blind', 'value': 'blind'},
{'label': 'Video Laryngoscope', 'value': 'video'},
{'label': 'Flex FiberOptic', 'value': 'fiber'},
{'label': 'Laryngoscope', 'value': 'Laryngo'},
{'label': 'ET tube', 'value': 'ET'},
{'label': 'Oral', 'value': 'Oral'},
{'label': 'Nasal', 'value': 'nasal'},
{'label': 'cuffed', 'value': 'cuffed'},
{'label': 'RAE', 'value': 'rae'},
{'label': 'LMA', 'value': 'lma'},
],
value=['sleep', 'direct', 'ET', 'nasal', 'cuffed', 'rae', 'Laryngo'],
inputStyle={'margin-right':'20px','margin-left':'10px'},
Currently, I have set defaults to the checklist, but ideally I would like to have everything unchecked on loading and connected with hotkeys. Thanks
Related
I'm building a website and I'm trying to make the user able to change his credentials. I've made a form for this:
newUsername = forms.CharField(
label="Enter your new username here*",
required=True,
widget=forms.TextInput(attrs={
'class': 'userChangeCredentials',
'value': "{{ user.username }}"
}))
newEmail = forms.EmailField(
label="Enter your new e-mail adress here*",
required=True,
widget=forms.EmailInput(attrs={
'class': 'userChangeCredentials',
'value': '{{ user.email }}'
}))
newPassword = forms.CharField(
label="Enter your new password here",
required=False,
widget=forms.PasswordInput(attrs={
'class': 'userChangeCredentials',
'value': ''
}))
passwordConfirmation = forms.CharField(
label="Confirm your existing password here*",
required=True,
max_length=256,
widget=forms.PasswordInput(attrs={
'class': 'userChangeCredentials',
'value': ''
}))
The problem is, that the values in the widget dictionary are passed as raw text and I want them to be variables.
This is the resulting page layout:
Do I need to change something inside of HTML?
My HTML:
<form id="UserForm" action="{% url 'user' name=user.username %}" method="POST">
{% csrf_token %}
{{ form|safe }}
<input class="userChangeCredentials" type="submit"></input>
</form>
I tried to make the text raw like this:
widget=forms.EmailInput(attrs={
'class': 'userChangeCredentials',
'value': r'{{ user.email }}'
})
But it didn't help. I searched for a week and I couldn't find any questions of this nature. I've read the official Django form page, but there is nothing about this exact thing.
In this case, I suggest you use the form for the user credentials only (email and username), then use the built-in PasswordChangeView for updating the user password without even creating a form class for it.
As for the raw values, the best way to get them is to inherit the form from the User model.
html: -
<div class="form-group">
<label for="experience" class="form-label">I am experience</label>
<select class="custom-select" formControlName="experience" name="experience" onchange="change(this);">
<option *ngFor="let experience of experiences">{{experience}}</option>
</select>
</div>
ts:-
experiencesLessThanTenYears = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
experiencesMoreThanTenYears = ['10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20'];
experiences = [ ...this.experiencesLessThanTenYears, ...this.experiencesMoreThanTenYears];
ngOnInit(): void {
this.registrationForm = this.fb.group({
firstName: ['', [Validators.required, Validators.minLength(3)]],
lastName: ['', [Validators.required, Validators.minLength(3)]],
startDate: [ '',[Validators.required]],
endDate: ['',[Validators.required]],
experience: ['',[Validators.required,]],
})
I want to show message on selecting values less than 10 and greater than 10 on my view. Please help me on how to do that.
I tried using the change event of my html select but it was not working. I was hoping to make a custom validator but I don't know was just an idea. Please someone help me out
{{+registrationForm.get('experience').value>10?
'You have a great experience':
'You have a poor experience'}}.
But this makes that if you don't selected anything show that you have a poor experience.
We can use a ng-container *ngIf in the way
<ng-container *ngIf="registrationForm.get('experience').value">
{{+registrationForm.get('experience').value>10?
'You have a great experience':
'You have a poor experience'}}.
</ng-container>
Well, as we use a *ngIf, we can create a temporaly variable
<ng-container *ngIf="registrationForm.get('experience').value as experience">
{{+experience>10?
'You have a great experience':
'You have a poor experience'}}.
</ng-container>
The another way is use a ternary operator inside a ternary operator. Really is an ugly (but equal effective solution)
{{registrationForm.get('experience').value?
+registrationForm.get('experience').value>10?
'You have a great experience':
'You have a poor experience':
''}}
I am new to angular and I'm creating a dynamic/nested menu based from my data below. I include the codes that I started with. Any help is appreciated.
Below is my json data:
dataList = [
{List: 'List 1', Client: 'Client A', Program: 'Client A Program 1'},
{List: 'List 2', Client: 'Client A', Program: 'Client A Program 1'},
{List: 'List 3', Client: 'Client A', Program: 'Client A Program 2'},
{List: 'List 4', Client: 'Client A', Program: 'Client A Program 2'},
{List: 'List 5', Client: 'Client B', Program: 'Client B Program 1'},
{List: 'List 6', Client: 'Client B', Program: 'Client B Program 1'},
];
Here's what I've started so far:
<ng-container *ngFor="let item of dataList>
<div class="clientList">
<button mat-menu-item [routerLink]="['/home']" color="primary" (click)="menuClick()"><i class="fa object_group"
aria-hidden="true"></i> {{item.Client}}</button>
</div>
</ng-container>
I would like to have an angular material menu that looks like this:
https://imgur.com/a/WGpYRlK
I made a basic Django form and implemented that into my HTML. In my views.py, I am trying to send an email out, and I know even if I can't send the email, I should still see a successful POST submission and email detail in terminal. However, the page simply refreshes and nothing happens.
views.py snippet:
def ticket(request, room_name):
form_class = TicketForm
if request.method == 'GET':
form = TicketForm()
else:
form = TicketForm(request.POST)
# validating and cleaning data
if form.is_valid():
type_of_issue = form.cleaned_data['type_of_issue']
#a lot of fields are cleaned, irrelevant to question
try:
send_mail("Issue/Feedback for Room " + room_name, message, from_email, ['admin#example.com'])
except BadHeaderError:
return HttpResponse('Invalid header found')
return redirect('index') #index is my homepage separate from my form/ticket page
return render(request, 'ticket.html', context={'room_name': room_name, 'room': room, 'form': form_class, })
ticket.html (where my form is located) snippet:
<form id="ticket-border" class="" method="post">
{% csrf_token %}
<!--a lot of form data goes here, irrelevant to question-->
<input type="submit" value="Submit">
</form>
settings.py snippet that has to do with sending email
EMAIL_HOST = 'smtp.gmail.com'
EMAIL_HOST_USER = 'example#gmail.com'
EMAIL_HOST_PASSWORD = 'notmyrealpassword'
EMAIL_PORT = 587
EMAIL_USE_TLS = True
I've looked at many examples and YouTube videos online, but I seem to be missing why nothing shows up on my console after submitting. The page simply refreshes after hitting submit. It shouldn't be going into my if == GET statement, but I checked that it isn't by changing the criteria and sending it somewhere else, which it didn't do.
Can a fresh pair of eyes help me see the problem?
Edit: Forgot to add, I've also tried adding either
EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
or
EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
into my settings.py, but it makes no difference. The page still refreshes and nothing shows up in my console or inbox.
Added TicketForm upon request:
class TicketForm(forms.Form):
type_of_issue = forms.ChoiceField(
choices=ISSUE_CHOICES, widget=forms.RadioSelect(), required=True)
first_name = forms.CharField(required=False, widget=forms.TextInput(attrs={
'class': 'form-control', 'id': 'first-name', 'type': 'text', 'name': 'first-name', 'maxlength': '50', 'placeholder': 'First name'}))
last_name = forms.CharField(required=False, widget=forms.TextInput(attrs={
'class': 'form-control', 'id': 'last-name', 'type': 'text', 'name': 'last-name', 'maxlength': '50', 'placeholder': 'Last name'}))
email_address = forms.EmailField(required=False, widget=forms.EmailInput(
attrs={'class': 'form-control', 'type': 'email', 'id': 'email', 'name': 'email', 'placeholder': 'Email address'}))
feedback_or_further_details = forms.CharField(
required=True, widget=forms.Textarea(attrs={'class': 'form-control', 'rows': '5', 'name': 'additional-details', 'placeholder': 'Please enter additional details or your feedback here.'}))
affiliation = forms.ChoiceField(
choices=AFFILIATION_CHOICES, widget=forms.CheckboxSelectMultiple(), required=True)
I'm trying to populate a table dynamically with cells component.
input structure looks like:
tableData: {
headers: ['1', '3', '2', '4'],
rows: [
[{h: '1', t: 'Sample', v: {name: 'logan'}},
{h: '2', t: 'Sample', v: {name: 'dgd'}},
{h: '3', t: 'Sample', v: {name: 'logasdn'}},
{h: '4', t: 'Sample', v: {name: 'loezgan'}}]
],
showHeaders: ['1', '2', '3']
}
the html sections looks like that:
<!--table data-->
<tr v-for='(row,rowIndex) in tableData.rows'>
<td><input type='checkbox'></td>
<td v-for="(element,colIndex) in row">
<component is='Sample' v-bind='element.v' ></component>
</td >
</tr>
When I pass 'Sample' (the component name) as parameter it works, but its not when I replace 'Sample' by 'element.t' or {{element.t}} which I don't understand.
Does anyone knows why its not working and how to do that?
You need to bind to is via v-bind:is or the shorthand :is:
<component :is='element.t' v-bind='element.v'></component>