Browse Source

Correctly update images on selection

keplyx 1 year ago
parent
commit
d774ddb154
1 changed files with 11 additions and 6 deletions
  1. 11
    6
      assets/js/listManager.js

+ 11
- 6
assets/js/listManager.js View File

@@ -114,17 +114,16 @@ class ListManager {
114 114
         return checkboxes;
115 115
     }
116 116
 
117
-    getFormData(defaultValues) {
117
+    getFormData(defaultValues, index) {
118 118
         let formData = '<form id="popupForm" name="popupForm" method="post" enctype="multipart/form-data"><div class="form-group">';
119 119
         for (let i = 0; i < this.editableTypes.length; i++) {
120 120
             let inputId = this.editableTypes[i]['name'] + 'Input';
121 121
             let inputName = this.editableTypes[i]['name'];
122 122
             let inputType = this.editableTypes[i]['type'] === 'number' ? 'number' : 'text';
123 123
             let value = defaultValues[this.editableTypes[i]['name']] !== undefined ? defaultValues[this.editableTypes[i]['name']] : '';
124
-            let icon = '';
125 124
             formData += '<label for="' + inputId + '">' + this.editableTypes[i]['description'] + ' :</label>';
126 125
             if (this.editableTypes[i]['type'] === 'image') {
127
-                formData += this.getImagePicker(defaultValues['id']);
126
+                formData += this.getImagePicker(defaultValues['id'], index);
128 127
             } else if (this.editableTypes[i]['type'] === 'checkboxes') {
129 128
                 formData += this.getCategoryCheckboxes(defaultValues['id']);
130 129
             } else {
@@ -138,20 +137,26 @@ class ListManager {
138 137
         return formData;
139 138
     }
140 139
 
141
-    getImagePicker(id) {
140
+    getImagePicker(id, index) {
141
+        let imageSrc = $(this.displayedData[index].find("img")[0]).attr('src');
142 142
         return (
143
-            '<img style="width: 50px; height: 50px" src="../uploaded_images/' + id + '.jpg" id="image_' + id + '"/>' +
143
+            '<img style="width: 50px; height: 50px" src="' + imageSrc + '" id="image_' + id + '"/>' +
144 144
             '<div class="custom-file">\n' +
145 145
             '<input ' +
146 146
             'type="file" ' +
147 147
             'class="custom-file-input" ' +
148 148
             'id="fileInput"' +
149 149
             'accept="image/jpeg"' +
150
+            'onchange="listManager.updatePickerImagePreview(this, \'image_' + id + '\')"' +
150 151
             '>\n' +
151 152
             '<label class="custom-file-label" for="customFile">Choose file</label>\n' +
152 153
             '</div>');
153 154
     }
154 155
 
156
+    updatePickerImagePreview(picker, previewId) {
157
+        $("#" + previewId).attr('src', window.URL.createObjectURL(picker.files[0]));
158
+    }
159
+
155 160
     getFormValues(form) {
156 161
         let values = [];
157 162
         for (let i = 0; i < this.editableTypes.length; i++) {
@@ -232,7 +237,7 @@ class ListManager {
232 237
             defaultValues = this.currentData[index];
233 238
             title = "Modifier l'entrée";
234 239
         }
235
-        let formData = this.getFormData(defaultValues);
240
+        let formData = this.getFormData(defaultValues, index);
236 241
         let thisInstance = this;
237 242
         $.confirm({
238 243
             title: title,

Loading…
Cancel
Save