Files
openstapps/src/app/modules/feedback/feedback-page.html
2022-12-15 11:58:21 +01:00

104 lines
3.1 KiB
HTML

<ion-header>
<ion-toolbar color="primary" mode="ios">
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>{{ 'feedback.page.TITLE' | translate }}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<form #feedbackForm="ngForm" (ngSubmit)="onSubmit()">
<ion-item>
<ion-label position="stacked">{{
'feedback.form.name.label' | translate
}}</ion-label>
<ion-input
placeholder="{{ 'feedback.form.name.placeholder' | translate }}"
[(ngModel)]="author.name"
name="name"
></ion-input>
</ion-item>
<ion-item>
<ion-label position="stacked">{{
'feedback.form.type.label' | translate
}}</ion-label>
<ion-select
[(ngModel)]="message.name"
value="comment"
name="title"
interface="popover"
required="true"
>
<ion-select-option value="Comment">{{
'feedback.form.type.values.comment' | translate
}}</ion-select-option>
<ion-select-option value="Bug">{{
'feedback.form.type.values.bug' | translate
}}</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label position="stacked">{{
'feedback.form.email.label' | translate
}}</ion-label>
<ion-input
placeholder="{{ 'feedback.form.email.placeholder' | translate }}"
[(ngModel)]="author.email"
type="email"
name="email"
ngModel
email
></ion-input>
</ion-item>
<ion-item>
<ion-label position="stacked">{{
'feedback.form.message.label' | translate
}}</ion-label>
<ion-textarea
[(ngModel)]="message.messageBody"
placeholder="{{
'feedback.form.message.placeholder'
| translate: {number: MINIMUM_MESSAGE_SIZE}
}}"
name="message"
required="true"
minlength="{{ MINIMUM_MESSAGE_SIZE }}"
autoGrow="true"
></ion-textarea>
</ion-item>
<ion-item>
<ion-label class="ion-text-wrap">{{
'feedback.form.termsAgree' | translate
}}</ion-label>
<ion-checkbox
color="primary"
slot="start"
[(ngModel)]="termsAgree"
name="termsAgree"
></ion-checkbox>
</ion-item>
<ion-button
type="submit"
color="primary"
expand="block"
[disabled]="!feedbackForm.valid || !termsAgree || submitSuccess"
>{{ 'feedback.form.submit' | translate }}</ion-button
>
<ion-card>
<ion-card-title>
<ion-button expand="block" fill="clear" (click)="toggleShowMetaData()">
<ng-container *ngIf="!showMetaData; else hide">{{
'feedback.form.protocolData.show' | translate
}}</ng-container>
<ng-template #hide>{{
'feedback.form.protocolData.hide' | translate
}}</ng-template>
</ion-button>
</ion-card-title>
<ion-card-content *ngIf="metaData && showMetaData">
<pre>{{ metaData | json }}</pre>
</ion-card-content>
</ion-card>
</form>
</ion-content>