add toggle modal with create and edit feature into store_location html page

backstage/templates/store_location.html

@@ -2,6 +2,7 @@
 {% block main %}
 <h1 class="h3"><i class="fas fa-pen mr-2"></i>{{ title }}</h1>
 {% for part, stores in stores_data.items() %}
+<div>
   <form action="{{ url_for('store_locations.create') }}" method="POST" enctype="multipart/form-data">
     {% if part == "north" %}
       <h2>北部門市</h2>
@@ -12,58 +13,146 @@
     {% elif part == "east" %}
       <h2>東部門市</h2>
     {% endif %}
-  <table id="store_locations_table" class="table table__content mb-0" cellspacing="0" width="60%">
-    <thead>
-      <tr>
-        <th class="table__head">數量</th>
-        <th class="table__head">區域</th>
-        <th class="table__head">門市</th>
-        <th class="table__head">營業時間</th>
-        <th class="table__head">門市電話</th>
-        <th class="table__head">門市地點</th>
-        <th class="table__head">停車資訊</th>
-        <th class="table__head">輪播照片</th>
-        <th style="text-align:center;width:100px;">
-          <input class="btn btn-primary" type="submit" value="提交">
-        </th>
-      </tr>
-    </thead>
-    {% for store in stores %}
-      <tbody>
+    <table id="store_locations_table" class="table table__content mb-0" cellspacing="0" width="60%">
+      <thead>
         <tr>
-          <td class="table__data">{{ loop.index }}</td>
-          <td class="table__data">
-            <input name="title-{{ loop.index }}" class="form-control form-control-lg" value="{{ store.title }}">
-            <input name="type-{{ loop.index }}" type="hidden" value="{{ store.type }}">
-          </td>
-          <td class="table__data">
-            <input name="store-{{ loop.index }}" class="form-control form-control-lg" value="{{ store.store }}">
-          </td>
-          <td class="table__data">
-            <input name="hour-{{ loop.index }}" class="form-control form-control-lg" value="{{ store.hour }}">
-          </td>
-          <td class="table__data">
-            <input name="phone-{{ loop.index }}" class="form-control form-control-lg" value="{{ store.phone }}">
-          </td>
-          <td class="table__data">
-            <input name="location-{{ loop.index }}" class="form-control form-control-lg" value="{{ store.location }}">
-          </td>
-          <td class="table__data">
-            <input name="parking-{{ loop.index }}" class="form-control form-control-lg" value="{{ store.parking }}">
-          </td>
-          <td class="table__data">
-            {% for img_src in store.imgs %}
-              <img src="http://127.0.0.1:1313/{{ img_src }}" width="80px" height="50px">
-              <input name="img-{{ loop.index }}" type='hidden' value="{{ img_src }}">
-              <a class="btn btn-secondary btn-sm m-1" href="{{ url_for('store_locations.remove_img', type=store.type, src=img_src) }}">
-                移除
-              </a>
-            {% endfor %} 
-          </td>
+          <th class="table__head">數量</th>
+          <th class="table__head">區域</th>
+          <th class="table__head">門市</th>
+          <th class="table__head">營業時間</th>
+          <th class="table__head">門市電話</th>
+          <th class="table__head">門市地點</th>
+          <th class="table__head">停車資訊</th>
+          <th class="table__head">輪播照片</th>
+          <th style="text-align:center;width:100px;">
+            <button type="button" class="btn__add m-1" data-toggle="modal" data-target="#createModal">
+              <i class="fas fa-plus"></i>
+            </button>
+          </th>
         </tr>
-      </tbody>
-    {% endfor %}
-  </table>
-</form>
+      </thead>
+      {% for store in stores %}
+        {% set store_idx = loop.index %}
+        <tbody>
+          <tr>
+            <td class="table__data">{{ loop.index }}</td>
+            <td class="table__data">{{ store.title }}</td>
+            <td class="table__data">{{ store.store }}</td>
+            <td class="table__data">{{ store.hour }}</td>
+            <td class="table__data">{{ store.phone }}</td>
+            <td class="table__data">{{ store.location }}</td>
+            <td class="table__data">{{ store.parking }}</td>
+            <td class="table__data">
+              {% for img_src in store.imgs %}
+                <img src="http://127.0.0.1:1313/{{ img_src }}" width="80px" height="50px">
+                <input name="img-{{ store_idx }}" type='hidden' value="{{ img_src }}">
+                <a class="btn btn-secondary btn-sm m-1" href="{{ url_for('store_locations.remove_img', type=store.type, src=img_src) }}">
+                  移除
+                </a>
+              {% endfor %} 
+            </td>
+            <td>
+              <div class="d-flex justify-content-center">
+                <button type="button" class="btn__edit  m-2">
+                  <i class="fas fa-edit"></i>
+                </button>
+                <form action="#" method="POST">
+                  <button class="btn__delete m-1" type="submit" value="delete"><i class="fas fa-trash-alt"></i></button>
+                </form>
+                <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel" aria-hidden="true">
+                  <div class="modal-dialog" role="document">
+                    <div class="modal-content">
+                      <div class="modal-header border-0">
+                        <h5 class="modal-title modal__title" id="createModalLabel">新增據點</h5>
+                        <button type="button" class="close modal__close" data-dismiss="modal" aria-label="Close">
+                          <span class="modal__close__back">
+                            <span aria-hidden="true">&times;</span>
+                          </span>
+                        </button>
+                      </div>
+                      <div class="modal-body">
+                        <input name="type" type="hidden" value="{{ store.type }}" readonly>
+                        <label for="title">區域</label>
+                        <input name="title" class="form-control form-control-lg" value="{{ store.title }}">
+                        <label for="store">門市</label>
+                        <input name="store" class="form-control form-control-lg" value="{{ store.store }}">
+                        <label for="hour">營業時間</label>
+                        <input name="hour" class="form-control form-control-lg" value="{{ store.hour }}">
+                        <label for="phone">門市電話</label>
+                        <input name="phone" class="form-control form-control-lg" value="{{ store.phone }}">
+                        <label for="location">門市地點</label>
+                        <input name="location" class="form-control form-control-lg" value="{{ store.location }}">
+                        <label for="parking">停車資訊</label>
+                        <input name="parking" class="form-control form-control-lg" value="{{ store.parking }}">
+                        <label for="image">輪播照片上傳</label>
+                        <input type="file" name="image-{{ store_idx }}" accept="image/*" multiple>
+                        <div class="modal-footer pb-0 border-0">
+                          <button type="button" class="btn btn__cancel" data-dismiss="modal">取消</button>
+                          <input class="btn btn__submitadd" type="submit" value="完成">
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      {% endfor %}
+    </table>
+  </form>
+</div>
 {% endfor %}
+<!-- Modal -->
+<div class="modal fade" id="createModal" tabindex="-1" role="dialog" aria-labelledby="createModalLabel" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header border-0">
+        <h5 class="modal-title modal__title" id="createModalLabel">新增據點</h5>
+        <button type="button" class="close modal__close" data-dismiss="modal" aria-label="Close">
+          <span class="modal__close__back">
+            <span aria-hidden="true">&times;</span>
+          </span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <form action="{{ url_for('store_locations.create') }}" method="POST" enctype="multipart/form-data">
+          <label for="type">分佈</label>
+          <br/><select id="type" name="type">
+            <option value="store_north">北部</option>
+            <option value="store_central">中部</option>
+            <option value="store_south">南部</option>
+            <option value="store_east">東部</option>
+          </select> <br/>
+          <label for="title">區域</label>
+          <input name="title" class="form-control form-control-lg">
+          <label for="store">門市</label>
+          <input name="store" class="form-control form-control-lg">
+          <label for="hour">營業時間</label>
+          <input name="hour" class="form-control form-control-lg">
+          <label for="phone">門市電話</label>
+          <input name="phone" class="form-control form-control-lg">
+          <label for="location">門市地點</label>
+          <input name="location" class="form-control form-control-lg">
+          <label for="parking">停車資訊</label>
+          <input name="parking" class="form-control form-control-lg">
+          <label for="image">輪播照片上傳</label>
+          <input type="file" name="image-1" accept="image/*" multiple>
+          <div class="modal-footer pb-0 border-0">
+            <button type="button" class="btn btn__cancel" data-dismiss="modal">取消</button>
+            <input class="btn btn__submitadd" type="submit" value="完成">
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  for (const tbody of document.querySelectorAll('tbody')) {
+    const btn = tbody.querySelector(".m-2")
+    btn.onclick = function() {
+      $(tbody).find('#updateModal').modal("toggle");
+    }
+  }
+</script>
 {% endblock main %}