feat: initialize image uploading & name edting

Refs: #128

web-app/django/VIM/apps/instruments/static/instruments/css/detail.css

@@ -97,3 +97,21 @@ th[scope='row'] {
 .btn.publish {
   background-color: #28a745;
 }
+.btn-primary {
+  background-color: #435334;
+  border: 1px solid #435334;
+}
+.btn-primary:hover {
+  background-color: #9eb384;
+  border: 1px solid #9eb384;
+}
+.form-label {
+  color: #435334;
+}
+.image-header {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: flex-start;
+}

web-app/django/VIM/apps/instruments/templates/instruments/detail.html

@@ -89,11 +89,13 @@ <h2>
                                      type="text"
                                      value="{{ instrumentname.language.en_label }}" />
                             </div>
-                            <div class="button-group">
-                              <button class="btn edit">Edit</button>
-                              <button class="btn cancel">Cancel</button>
-                              <button class="btn publish">Publish</button>
-                            </div>
+                            {% if user.is_authenticated %}
+                              <div class="button-group">
+                                <button class="btn edit">Edit</button>
+                                <button class="btn cancel">Cancel</button>
+                                <button class="btn publish">Publish</button>
+                              </div>
+                            {% endif %}
                           </div>
                         </td>
                         <td>
@@ -102,11 +104,13 @@ <h2>
                               <span class="view-field">{{ instrumentname.name }}</span>
                               <input class="edit-field" type="text" value="{{ instrumentname.name }}" />
                             </div>
-                            <div class="button-group">
-                              <button class="btn edit">Edit</button>
-                              <button class="btn cancel">Cancel</button>
-                              <button class="btn publish">Publish</button>
-                            </div>
+                            {% if user.is_authenticated %}
+                              <div class="button-group">
+                                <button class="btn edit">Edit</button>
+                                <button class="btn cancel">Cancel</button>
+                                <button class="btn publish">Publish</button>
+                              </div>
+                            {% endif %}
                           </div>
                         </td>
                         <td>
@@ -117,11 +121,13 @@ <h2>
                                      type="text"
                                      value="{{ instrumentname.source_name }}" />
                             </div>
-                            <div class="button-group">
-                              <button class="btn edit">Edit</button>
-                              <button class="btn cancel">Cancel</button>
-                              <button class="btn publish">Publish</button>
-                            </div>
+                            {% if user.is_authenticated %}
+                              <div class="button-group">
+                                <button class="btn edit">Edit</button>
+                                <button class="btn cancel">Cancel</button>
+                                <button class="btn publish">Publish</button>
+                              </div>
+                            {% endif %}
                           </div>
                         </td>
                       </tr>
@@ -131,7 +137,21 @@ <h2>
               </td>
             </tr>
             <tr>
-              <th scope="row">Image</th>
+              <th scope="row">
+                <div class="image-header">
+                  <span>Image</span>
+                  {% if user.is_authenticated %}
+                    <button type="button"
+                            class="btn btn-primary"
+                            data-bs-toggle="modal"
+                            data-bs-target="#uploadImageModal">
+                      Upload New Images
+                    </button>
+                    {% include "instruments/includes/imageUploadModal.html" %}
+
+                  {% endif %}
+                </div>
+              </th>
               <td>
                 <div class="name-form-item">
                   <div class="detail-image">

web-app/django/VIM/apps/instruments/templates/instruments/includes/imageUploadModal.html

@@ -0,0 +1,31 @@
+<div class="modal fade"
+     id="uploadImageModal"
+     tabindex="-1"
+     aria-labelledby="uploadImageModalLabel"
+     aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title" id="uploadImageModalLabel">Upload New Images</h4>
+        <button type="button"
+                class="btn-close"
+                data-bs-dismiss="modal"
+                aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <form method="post" enctype="multipart/form-data">
+          {% csrf_token %}
+          <div class="mb-3">
+            <label for="imageUpload" class="form-label">Choose images to upload</label>
+            <input class="form-control"
+                   type="file"
+                   id="imageUpload"
+                   name="images"
+                   multiple />
+          </div>
+          <button type="submit" class="btn btn-primary">Upload</button>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>