Improve save feature, add legend, change defect icons and fix bugs

dist/assets/images.sh

@@ -3,14 +3,13 @@ convert -background 'rgba(240, 240, 240, 1.0)' -fill 'rgba(150, 150, 150, 0.8)'
 convert -background 'rgba(240, 240, 240, 1.0)' -fill 'rgba(150, 150, 150, 0.8)' -size 800x600 -pointsize 36 -gravity center label:'Upload floor plan' canvas_placeholder.png
 
 convert -size 100x100 xc:none \
--fill red -stroke red -draw "circle 50,50 50,0" -fill 'rgba(250, 150, 0, 1)' \
--draw "circle 50,50 40,10" structural.png
+-stroke green -strokewidth 10 -fill 'rgba(0, 200, 150, 1)' \
+-draw "circle 50,50 20,20" no_defect.png
 
 convert -size 100x100 xc:none \
--fill green -stroke green -draw "circle 50,50 50,0" -fill 'rgba(0, 200, 150, 1)' \
--draw "circle 50,50 40,10" no_defect.png
+-stroke orange -strokewidth 10 -fill 'rgba(250, 250, 50, 1)' \
+-draw "circle 50,50 20,20" non-structural.png
 
 convert -size 100x100 xc:none \
--fill orange -stroke orange -draw "circle 50,50 50,0" -fill 'yellow' \
--draw "circle 50,50 40,10" non-structural.png
-
+-stroke red -strokewidth 10 -fill 'rgba(250, 150, 0, 1)' \
+-draw "circle 50,50 20,20" structural.png

dist/index.html

@@ -123,40 +123,48 @@
             </div>
 
           </div>
+          <div v-if='(index+1) % 8 === 0' class='defect-legend'>
+            <span><img src='./assets/no_defect.png' width='32px'> No defect</span>
+            <span><img src='./assets/non-structural.png' width='32px'> Non-structural defect</span>
+            <span><img src='./assets/structural.png' width='32px'> Structural defect</span>
+          </div>      
           <div v-if='(index+1) % 8 === 0' class="html2pdf__page-break"></div>      
         </template>
       </div>
     </div>
   </div>
 
   <div class = 'page-3' v-show='seen === 2'>
-    <img width='400px' height='300px'
-      v-bind:src='save_preview_src'
-    >
-      <ul>
-        <li>
-          Building: {{building}}
-          <input v-model='building'>
-        </li>
-        <li>
-          Floor: {{floor}}
-          <input v-model='floor'>
-        </li>
-      </ul>
-      <table>
-        <th> Save name </th>
-        <th> Save </th>
-        <th> Load save </th>
-        <tr v-for='(save, index) in saves'>
-          <td v-on:click='handle_save_click(save)'> {{save}}
-          <td> <button v-on:click='save_data(save)'>Save</button>
-          <td> <button v-on:click='load_data(save)'>Load</button>
-        </tr>
-      </table>
-
-      <button v-on:click='update_saves()'> Refresh </button>
-      <button v-on:click='save_data()'> Save </button>
-      <button v-on:click='clear_dbs()'> Delete all saves </button>
+    <div class = 'page-3-wrapper'>  
+      <img width='400px' height='300px'
+        v-bind:src='save_preview_src'
+      >
+        <ul>
+          <li>
+            Building:
+            <input v-model='building'>
+          </li>
+          <li>
+            Floor:
+            <input v-model='floor'>
+          </li>
+        </ul>
+        <table>
+          <th> Save name </th>
+          <th> Save </th>
+          <th> Load</th>
+          <tr v-for='(save, index) in saves'>
+            <td v-on:click='handle_save_click(save)'> {{save}}
+            <td> <button v-on:click='save_data(save)'>Save</button>
+            <td> <button v-on:click='load_data(save)'>Load</button>
+          </tr>
+        </table>
+        <div class = 'button-wrapper'>
+          <button class='label' v-on:click='update_saves()'> Refresh </button>
+          <button class='label' v-on:click='save_data()'> Save </button>
+          <button class='label' v-on:click='clear_dbs()'> Delete all saves </button>
+        </div>
+      </div>
   </div>
 
 </div>