add problem parse

Author: ZsgsDesign

src/index.html

@@ -440,6 +440,14 @@
             flex-grow: 1;
         }
 
+        problem-set problem-editor > div {
+            display: none;
+        }
+
+        problem-set problem-editor > div.active {
+            display: block;
+        }
+
         .d-none {
             display: none;
         }
@@ -597,16 +605,7 @@
                                 <!-- <div data-id="0" onclick="editProb(this)" class="active">A+B Problem</div> -->
                             </problem-list>
                             <problem-editor>
-                                <div class="form-group">
-                                    <label for="general_standard">Title</label>
-                                    <input type="text" class="form-control" id="problem_title_">
-                                    <span class="bmd-help">The title of this problem, should be brief.</span>
-                                </div>
-                                <div class="form-group">
-                                    <label for="general_standard">Type</label>
-                                    <input type="text" class="form-control" id="problem_type_">
-                                    <span class="bmd-help">Type, could be OnlineJudge or VirtualJudge.</span>
-                                </div>
+
                             </problem-editor>
                         </problem-set>
                     </div>
@@ -660,9 +659,27 @@
         focusTab("problem-editor");
         var i=0;
         message.problems.forEach((ele)=>{
-            $('problem-list').append(`<div data-id="${i}" onclick="editProb(this)" ${i==0?'class="active"':''}>${ele.title}</div>`);
+            $('problem-list').append(`<div data-id="${i}" onclick="editProb(this)">${ele.title}</div>`);
+            $('problem-editor').append(`
+                <div data-id="${i}">
+                    <div class="form-group">
+                        <label for="problem_title_${i}">Title</label>
+                        <input type="text" class="form-control" id="problem_title_${i}">
+                        <span class="bmd-help">The title of this problem, should be brief.</span>
+                    </div>
+                    <div class="form-group">
+                        <label for="problem_type_${i}">Type</label>
+                        <input type="text" class="form-control" id="problem_type_${i}">
+                        <span class="bmd-help">Type, could be OnlineJudge or VirtualJudge.</span>
+                    </div>
+                </div>
+            `);
+            $(`#problem_title_${i}`).val(ele.title);
+            $(`#problem_type_${i}`).val(ele.type);
+            $(`problem-editor > div[data-id="${i}"]`).bootstrapMaterialDesign();
         });
         $('problem-list').append(`<div data-id="-1" onclick="newProb()"><i class="MDI plus-circle"></i> Add New Problem</div>`);
+        if($('problem-list')[0]) editProb($('problem-list > div')[0]);
     });
 
     function focusTab(tabName){
@@ -673,7 +690,9 @@
     function editProb(ele){
         $('problem-list > div').removeClass('active');
         $(ele).addClass('active');
-        console.log($(ele).attr("data-id"));
+        let id=$(ele).attr("data-id");
+        $('problem-editor > div').removeClass("active");
+        $(`problem-editor > div[data-id="${id}"]`).addClass("active");
     }
 
     ipcRenderer.on("windowStatusChange", (event, message) => {