modify for remove nested index in input name

backstage/home/routes.py

@@ -19,5 +19,9 @@ def home():
 
 @home_app.route('/backstage/home/update', methods=['POST'])
 def update():
-    update_manage_table(request.form, request.args, request.files, 'home2')
+    update_manage_table(request.form.getlist('data'),
+                        request.form.getlist('element'),
+                        request.args,
+                        request.files.getlist('image'),
+                        'home2')
     return redirect(url_for('home.home'))

backstage/room_planner/routes.py

@@ -18,5 +18,9 @@ def main():
 
 @room_planner_app.route('/backstage/room_planner/update', methods=['POST'])
 def update():
-    update_manage_table(request.form, request.args, request.files, 'room_planner2')
+    update_manage_table(request.form.getlist('data'),
+                        request.form.getlist('element'),
+                        request.args,
+                        request.files.getlist('image'),
+                        'room_planner2')
     return redirect(url_for('room_planner.main'))

backstage/templates/tables/manage_table.html

@@ -5,9 +5,8 @@
   <div class="table__block">
     <h4 class="h4 mb-0">區塊{{ loop.index }}</h4>
     <span class="btn__opentab"><i class="fas fa-chevron-down"></i></span>
-    <form action="{{ url_for(form_url, page=page, section_class=content.sectionClass) }}" method="POST" enctype="multipart/form-data" class="form__action">
-      {% set tabidx = loop.index %}
-      <table id="example" class="table table__content mb-0">
+    <form action="{{ url_for(form_url, page=page, section_class=content.sectionClass) }}" method="POST" enctype="multipart/form-data" class="form__action">      
+      <table id="manage_table" class="table table__content mb-0">
         <thead>
           <tr>
             <th class="table__head" width="80">順序</th>
@@ -22,96 +21,119 @@
             {% for data in value %}
               <tbody>
                 <tr>
+                  <input name="element" type="hidden" value="{{ key }}">
                   <td class="table__data">{{ loop.index }}</td>
                   {% if key == "img" %}
                     <td class="table__data"><span class="badge badge-pill badge__img">圖片</span></td>
                     <td class="table__data" style="display:flex;justify-content:center">
                       <div class="img__table"><img src="http://127.0.0.1:1313/{{ data['src'] }}" width="100%" height="100%"></div>
                     </td>
-                    <div class="modal fade" id="{{ tabidx }}-{{ key }}-{{ loop.index }}" tabindex="-1" role="dialog" aria-labelledby="{{ key }}-{{ loop.index }}Label" 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="exampleModalLabel">編輯</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 id="image" name="image-{{ loop.index }}" type="file" value="{{ data['src'] }}">
-                            <input name="{{ tabidx }}-{{ key }}-{{ loop.index }}" type="hidden" value="{{ data }}">
-                            <div class="modal__img"><img src="http://127.0.0.1:1313/{{ data['src'] }}"></div>
-                            <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="完成">
+                    <td class="table__data">
+                      <div class="d-flex justify-content-center">
+                        <button type="button" class="btn__edit  m-1">
+                          <i class="fas fa-edit"></i>
+                        </button>
+                        <div class="modal fade" id="manage_modal" tabindex="-1" role="dialog" aria-labelledby="Label" 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="exampleModalLabel">編輯</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 id="image" name="image" type="file" value="{{ data['src'] }}">
+                                <input name="data" type="hidden" value="{{ data }}">
+                                <div class="modal__img"><img src="http://127.0.0.1:1313/{{ data['src'] }}"></div>
+                                <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>
+                        <form action="#" method="POST">
+                          <button class="btn__delete m-1" type="submit" value="delete"><i class="fas fa-trash-alt"></i></button>
+                        </form>
                       </div>
-                    </div>
+                    </td>
                   {% elif key == "yt_video" %}
                     <td class="table__data"><span class="badge badge-pill badge__video">影片</span></td>
                     <td class="table__data">
                       {{ data['videoid'] }}
                     </td>
-                    <div class="modal fade" id="{{ tabidx }}-{{ key }}-{{ loop.index }}" tabindex="-1" role="dialog" aria-labelledby="{{ key }}-{{ loop.index }}Label" 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="exampleModalLabel">編輯</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="{{ tabidx }}-{{ key }}-{{ loop.index }}" class="form-control form-control-lg " value="{{ data }}">
-                            <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="完成">
+                    <td class="table__data">
+                      <div class="d-flex justify-content-center">
+                        <button type="button" class="btn__edit  m-1">
+                          <i class="fas fa-edit"></i>
+                        </button>
+                        <div class="modal fade" id="manage_modal" tabindex="-1" role="dialog" aria-labelledby="Label" 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="exampleModalLabel">編輯</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="data" class="form-control form-control-lg " value="{{ data }}">
+                                <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>
+                        <form action="#" method="POST">
+                          <button class="btn__delete m-1" type="submit" value="delete"><i class="fas fa-trash-alt"></i></button>
+                        </form>
                       </div>
-                    </div>
+                    </td>
                   {% else %}
                   <td class="table__data"><span class="badge badge-pill badge__txt">文字</span></td>
                   <td class="table__data txt__cut">
-                    {{ data }}
+                    <div>{{ data }}</div>
                   </td>
-                  <div class="modal fade" id="{{ tabidx }}-{{ key }}-{{ loop.index }}" tabindex="-1" role="dialog" aria-labelledby="{{ key }}-{{ loop.index }}Label" 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="exampleModalLabel">編輯</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="{{ tabidx }}-{{ key }}-{{ loop.index }}" class="form-control form-control-lg modal__text__input" value="{{ data }}">
-                          <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="完成">
+                  <td class="table__data">
+                    <div class="d-flex justify-content-center">
+                      <button data_element="{{ key }}" data="{{ data }}" type="button" class="btn__edit  m-1">
+                        <i class="fas fa-edit"></i>
+                      </button>
+                      <div class="modal fade" id="manage_modal" tabindex="-1" role="dialog" aria-labelledby="Label" 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="exampleModalLabel">編輯</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="data" class="form-control form-control-lg modal__text__input" value="{{ data }}">
+                              <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>
-                  </div>
-                  {% endif %}
-                  <td class="table__data">
-                    <div class="d-flex justify-content-center">
-                      <button type="button" class="btn__edit  m-1" data-toggle="modal" data-target="#{{ tabidx }}-{{ key }}-{{ loop.index }}"><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>
                   </td>
+                  {% endif %}
                 </tr>
               </tbody>
             {% endfor %}
@@ -121,4 +143,12 @@
     </form>
   </div>
 {% endfor %}
+<script>
+  for (const tbody of document.querySelectorAll('tbody')) {
+    const btn = tbody.querySelector(".m-1")
+    btn.onclick = function() {
+      $(tbody).find('#manage_modal').modal("toggle");
+    }
+  }
+</script>
 {% endblock main %}

backstage/utils/routes.py

@@ -37,22 +37,21 @@ def get_trans_title_url_name(title):
     return translate(title).replace(' ', '_')
 
 
-def update_manage_table(forms, req_args, files, img_type):
+def update_manage_table(data, elements, req_args, files, img_type):
     def allow_file(filename):
         return '.' in filename and \
            filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
     ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif', 'webp'}
     update_data = defaultdict(list)
-    for key, value in forms.items():
-        element_type = key.split('-')[0]
-        if element_type == 'img':
+    for element, value in zip(elements, data):
+        if element == 'img':
             value = eval(value)
-        elif element_type == 'yt_video':
+        elif element == 'yt_video':
             value = {'videoid': str(value)}
         else:
             value = str(value)
-        update_data[element_type].append(value)
-    for f_key, f_value in files.items():
+        update_data[element].append(value)
+    for idx, f_value in enumerate(files):
         if not f_value or f_value.filename == '':
             continue
         if not allow_file(f_value.filename):
@@ -61,14 +60,13 @@ def update_manage_table(forms, req_args, files, img_type):
         requests.post(
             '{}upload/static/img?type={}&filename={}'.format(
                 PORTAL_SERVER, img_type, f_value.filename), files={'image': f_value})
-        img_index = int(f_key.split('-')[-1])-1
-        update_data['img'][img_index]['src'] = path.join(
-            path.split(update_data['img'][img_index]['src'])[0], f_value.filename)
+        update_data['img'][idx]['src'] = path.join(
+            path.split(update_data['img'][idx]['src'])[0], f_value.filename)
     response = requests.post(
         '{}manages/data?page={}&section={}'.format(
             PORTAL_SERVER, req_args.get('page'), req_args.get('section_class')), json=update_data)
     if response.status_code == 200:
-        sleep(1) # waiting for API upload image successfully.
+        sleep(1)  # waiting for API upload image successfully.
         flash('修改成功', 'success')
     else:
         flash('修改失敗', 'danger')