From d774ddb154f2597e2befdcc4a2d40f02a7d7db07 Mon Sep 17 00:00:00 2001
From: keplyx <keplyx@gmail.com>
Date: Fri, 14 Feb 2020 12:18:35 +0100
Subject: [PATCH] Correctly update images on selection

---
 assets/js/listManager.js | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/assets/js/listManager.js b/assets/js/listManager.js
index e9ad1e2..fb5fe61 100644
--- a/assets/js/listManager.js
+++ b/assets/js/listManager.js
@@ -114,17 +114,16 @@ class ListManager {
         return checkboxes;
     }
 
-    getFormData(defaultValues) {
+    getFormData(defaultValues, index) {
         let formData = '<form id="popupForm" name="popupForm" method="post" enctype="multipart/form-data"><div class="form-group">';
         for (let i = 0; i < this.editableTypes.length; i++) {
             let inputId = this.editableTypes[i]['name'] + 'Input';
             let inputName = this.editableTypes[i]['name'];
             let inputType = this.editableTypes[i]['type'] === 'number' ? 'number' : 'text';
             let value = defaultValues[this.editableTypes[i]['name']] !== undefined ? defaultValues[this.editableTypes[i]['name']] : '';
-            let icon = '';
             formData += '<label for="' + inputId + '">' + this.editableTypes[i]['description'] + ' :</label>';
             if (this.editableTypes[i]['type'] === 'image') {
-                formData += this.getImagePicker(defaultValues['id']);
+                formData += this.getImagePicker(defaultValues['id'], index);
             } else if (this.editableTypes[i]['type'] === 'checkboxes') {
                 formData += this.getCategoryCheckboxes(defaultValues['id']);
             } else {
@@ -138,20 +137,26 @@ class ListManager {
         return formData;
     }
 
-    getImagePicker(id) {
+    getImagePicker(id, index) {
+        let imageSrc = $(this.displayedData[index].find("img")[0]).attr('src');
         return (
-            '<img style="width: 50px; height: 50px" src="../uploaded_images/' + id + '.jpg" id="image_' + id + '"/>' +
+            '<img style="width: 50px; height: 50px" src="' + imageSrc + '" id="image_' + id + '"/>' +
             '<div class="custom-file">\n' +
             '<input ' +
             'type="file" ' +
             'class="custom-file-input" ' +
             'id="fileInput"' +
             'accept="image/jpeg"' +
+            'onchange="listManager.updatePickerImagePreview(this, \'image_' + id + '\')"' +
             '>\n' +
             '<label class="custom-file-label" for="customFile">Choose file</label>\n' +
             '</div>');
     }
 
+    updatePickerImagePreview(picker, previewId) {
+        $("#" + previewId).attr('src', window.URL.createObjectURL(picker.files[0]));
+    }
+
     getFormValues(form) {
         let values = [];
         for (let i = 0; i < this.editableTypes.length; i++) {
@@ -232,7 +237,7 @@ class ListManager {
             defaultValues = this.currentData[index];
             title = "Modifier l'entrée";
         }
-        let formData = this.getFormData(defaultValues);
+        let formData = this.getFormData(defaultValues, index);
         let thisInstance = this;
         $.confirm({
             title: title,