⚡ modal to display url

src/app/app.module.ts

@@ -52,6 +52,7 @@ import {ResettableInputDirective} from './ui/directives/resettable-input.directi
 import {ClipboardModule} from "ngx-clipboard";
 import {ErasableInputComponent} from './ui/erasable-input/erasable-input.component';
 import {ConfirmDialogModule} from 'primeng/confirmdialog';
+import {DialogModule} from 'primeng/dialog';
 
 export class MyMissingTranslationHandler implements MissingTranslationHandler {
     handle(params: MissingTranslationHandlerParams) {
@@ -102,6 +103,7 @@ export function HttpLoaderFactory(http: HttpClient) {
         ClipboardModule,
         CommonModule,
         BrowserModule,
+        DialogModule,
         BrowserAnimationsModule,
         AppRoutingModule,
         ToastModule,

src/app/config/PollConfig.ts

@@ -32,17 +32,17 @@ export const defaultDates = [
 export const defaultAnswers = [{
     id: 0,
     text: 'réponse de démo 1',
-    pictureUrl: '',
+    url: 'https://mastodon.cipherbliss.com/system/media_attachments/files/001/439/118/original/6fcf149bd902841b.png?1579471574',
 },
     {
         id: 1,
         text: 'réponse 2',
-        pictureUrl: '',
+        url: 'https://mastodon.cipherbliss.com/system/media_attachments/files/001/439/118/original/6fcf149bd902841b.png?1579471574',
     },
     {
         id: 2,
         text: 'la réponse D',
-        pictureUrl: '',
+        url: 'https://mastodon.cipherbliss.com/system/media_attachments/files/001/439/118/original/6fcf149bd902841b.png?1579471574',
     }];
 
 /**
@@ -58,6 +58,7 @@ export class PollConfig {
     description = 'ma description';
     myName = 'mon pseudo';
     myComment = 'wouah trop bien framadate!';
+    isAdmin: boolean = false;
     myEmail: string = "";
     // date specific poll, we have the choice to setup different hours (timeList) for all possible dates (dateList), or use the same hours for all dates
     allowSeveralHours = 'false';

src/app/pages/answers/answers.component.html

@@ -20,6 +20,42 @@
                 (click)='showModalForPictureOfAnswer(answer)' >
                 <i class='fa fa-image' ></i >
             </button >
+            <label
+                for='answer_{{answer.id}}_url'
+                (click)='showModalForPictureOfAnswer(answer)' >
+
+                <img
+                    class='img-thumbnail'
+                    src='{{answer.url}}'
+                    alt='image {{answer.url}}' >
+            </label >
+            <p-dialog
+                class='url-dialog'
+                [(visible)]="display"
+                [modal]='true' >
+                <p-header >
+                    {{answer.text}}
+                </p-header >
+
+                <form
+                    action='#'
+                    (submit)='display=false' >
+                    <label for='answer_{{answer.id}}_url' >
+                        Choisissez une URL pour illustrer le choix de réponse
+                    </label >
+                    <i class='fa fa-image' ></i >
+                    <br >
+                    <input
+                        class='input is-block'
+                        id='answer_{{answer.id}}_url'
+                        type='text'
+                        autofocus='autofocus'
+                        name='answer-url'
+                        [(ngModel)]='answer.url' >
+
+                </form >
+
+            </p-dialog >
             <input
                 type="name"
                 class="answer"

src/app/pages/answers/answers.component.scss

@@ -0,0 +1,8 @@
+:host {
+    .img-thumbnail {
+        width: 5em;
+        height: 5em;
+        margin: 1ch 0;
+        display: inline-block;
+    }
+}

src/app/pages/answers/answers.component.ts

@@ -12,6 +12,8 @@ import {DOCUMENT} from '@angular/common';
 export class AnswersComponent extends BaseComponent implements OnInit, AfterViewInit {
 
     private answerList = [];
+    private currentHeader: any = "";
+    private display: boolean;
 
     constructor(public config: ConfigService,
                 @Inject(DOCUMENT) private document: any,
@@ -36,7 +38,9 @@ export class AnswersComponent extends BaseComponent implements OnInit, AfterView
         this.config.answers.push(
             {
                 id: this.config.answers.length + 1,
-                text: ''
+                text: '',
+                file: '',
+                url: ''
             });
         this.cd.detectChanges(); // to refresh the view before focusing on the new input
         this.focusOnAnswer(this.config.answers.length - 1)
@@ -67,6 +71,8 @@ export class AnswersComponent extends BaseComponent implements OnInit, AfterView
 
     showModalForPictureOfAnswer(answer) {
         // TODO
-        this.config.todo();
+        this.currentHeader = answer;
+        this.display = true;
+        // this.config.todo();
     }
 }

src/app/pages/poll-display/poll-display.component.html

@@ -16,12 +16,14 @@
             </div >
         </div >
         <div class='col-xs-6' >
-            <input
+            <button
-                type="submit"
+                class='btn btn--primary btn--outline btn--full'
-                name="modify"
+                *ngIf='config.isAdmin'
-                class="btn btn--primary btn--outline btn--full"
-                value="Je veux modifier le vote de quelqu'un"
                 (click)='config.todo()' >
+                <i class='fa fa-pencil' ></i >
+                Je veux modifier le vote de quelqu'un
+            </button >
+
         </div >
     </div >
 

src/app/services/config.service.ts

@@ -275,7 +275,8 @@ export class ConfigService extends PollConfig {
      * @param config
      */
     createPollFromConfig(config: any) {
-        this.http.post(`${this.baseHref}/poll`, this.makeHeaders({config: config}))
+        this.http.post(`${this.baseHref}/poll`,
+            this.makeHeaders({config: config}))
             .subscribe((res: any) => {
                     // redirect to the page to administrate the new poll
                     this.messageService.add({severity: 'success', summary: 'Sondage Créé',});