Commit 9e9678af authored by lukas.burgey's avatar lukas.burgey

Add markdown to the questionnaire questions

parent e2893c69
......@@ -3077,6 +3077,11 @@
"@types/jasmine": "*"
}
},
"@types/marked": {
"version": "0.0.27",
"resolved": "https://registry.npmjs.org/@types/marked/-/marked-0.0.27.tgz",
"integrity": "sha1-xxRFRl8igO557cg+LDvc2O31NVQ="
},
"@types/minimatch": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
......@@ -9054,6 +9059,20 @@
"object-visit": "^1.0.0"
}
},
"markdown-to-html-pipe": {
"version": "1.2.5",
"resolved": "https://registry.npmjs.org/markdown-to-html-pipe/-/markdown-to-html-pipe-1.2.5.tgz",
"integrity": "sha512-FUi4cKMmpUmgUWt0WFrQt7aZdh9/ZU9bG/bCBNOtyGelmmwFXBmS87Bvw+8wnql8F02w02pZta2OUKFJmwT8bA==",
"requires": {
"@types/marked": "^0.0.27",
"marked": "^0.x"
}
},
"marked": {
"version": "0.8.2",
"resolved": "https://registry.npmjs.org/marked/-/marked-0.8.2.tgz",
"integrity": "sha512-EGwzEeCcLniFX51DhTpmTom+dSA/MG/OBUDjnWtHbEnjAH180VzUeAw+oE4+Zv+CoYBWyRlYOTR0N8SO9R1PVw=="
},
"md5.js": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
......
import { NgModule, LOCALE_ID } from '@angular/core';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
......@@ -8,6 +8,7 @@ import { HttpClientModule, HttpClientXsrfModule } from '@angular/common/http';
// Other libs
import { StompRService } from '@stomp/ng2-stompjs';
import { CookieService } from 'ngx-cookie-service';
import { MarkdownToHtmlModule } from 'markdown-to-html-pipe';
// Our stuff
......@@ -47,6 +48,7 @@ import { AccountComponent } from './account/account.component';
MaterialModule,
SharedModule,
SshkeysModule,
MarkdownToHtmlModule,
],
declarations: [
AppComponent,
......
......@@ -19,7 +19,6 @@ import { MessageComponent } from './message/message.component';
import { DialogService } from './dialog.service';
import { ProfileDialogService } from './profile-dialog.service';
@NgModule({
imports: [
CommonModule,
......
<div *ngIf="(state$ | async) as state" class="mat-typography">
<h2>Complete registration</h2>
<p>
The site {{ state.site.name }} needs the following data to give you access to the service {{ state.service.name }}.
<h1>Service registration</h1>
<p style="margin-bottom: 20px;">
The site {{ state.site.name }} needs more information to give you access to the service {{ state.service.name }}:
</p>
<form *ngIf="(answers$ | async) as answers" class="form-vertical" #answerForm="ngForm">
<mat-form-field *ngFor="let key of (state.questionnaire | ObjKeys)">
<div>
{{ state.questionnaire[key] }}
<div *ngFor="let key of (state.questionnaire | ObjKeys)" class="qa">
<div [innerHTML]="state.questionnaire[key] | MarkdownToHtml" class="question"></div>
<div [ngSwitch]="getInputType(state, key)" class="answer">
<mat-form-field *ngSwitchDefault>
<input matInput matNativeControl required [type]="getInputType(state, key)" [(ngModel)]="answers[key]" [name]="key">
</mat-form-field>
<mat-form-field *ngSwitchCase="'selector'">
<mat-select matNativeControl required [(ngModel)]="answers[key]" [name]="key">
<mat-option *ngFor="let value of state.questionnaire_answers[key]" [value]="value">
{{value}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-checkbox *ngSwitchCase="'checkbox'" [(ngModel)]="answers[key]" [name]="key"></mat-checkbox>
</div>
<div [ngSwitch]="getInputType(state, key)">
<input *ngSwitchCase="input" matInput required [(ngModel)]="answers[key]" [name]="key">
<mat-checkbox *ngSwitchCase="checkbox" required [(ngModel)]="answers[key]" [name]="key"></mat-checkbox>
<select *ngSwitchCase="selector" matNativeControl required [(ngModel)]="answers[key]" [name]="key">
<option *ngFor="let value of state.questionnaire[key]" [value]="value">{{value}}</option>
</select>
</div>
</mat-form-field>
</div>
<button (click)="sendAnswers(state, answers)" color="primary" type="submit" [disabled]="!answerForm.form.valid" mat-dialog-close mat-raised-button>
Submit
</button>
......
......@@ -64,13 +64,16 @@ export class QuestionnaireComponent implements OnInit {
getInputType(state: DeploymentState, key: string): string {
if (key in state.questionnaire_answers) {
const val = state.questionnaire_answers.get(key);
const val = state.questionnaire_answers[key];
if (Array.isArray(val)) {
return 'selector';
}
if (typeof val === 'boolean') {
return 'checkbox';
}
if (typeof val === 'number') {
return 'number';
}
}
return 'input';
}
......
......@@ -3,15 +3,19 @@ import { CommonModule } from '@angular/common';
import { ObjKeysPipe } from './obj-keys.pipe';
import { MarkdownToHtmlModule } from 'markdown-to-html-pipe';
@NgModule({
imports: [
CommonModule,
MarkdownToHtmlModule,
],
declarations: [
ObjKeysPipe,
],
exports: [
ObjKeysPipe,
MarkdownToHtmlModule,
],
})
export class SharedModule { }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment