Merge branch 'develop'

Author: shc261392

package.json

@@ -1,6 +1,6 @@
 {
   "name": "logboard-frontend",
-  "version": "0.1.0",
+  "version": "0.1.9",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -21,6 +21,7 @@
     "vue-axios": "^2.1.5",
     "vue-chartjs": "^3.5.0",
     "vue-cli-plugin-s3-deploy": "^4.0.0-rc4",
+    "vue-content-loader": "^0.2.3",
     "vue-date-fns": "^2.0.1",
     "vue-loading-overlay": "^3.3.2",
     "vue-router": "^3.3.4",

src/App.vue

@@ -4,9 +4,9 @@
     <loading :active.sync="storageisLoading"></loading>
 
     <div id="App">
-      <div v-if="true" id="NavBar">
+      <!-- <div v-if="true" id="NavBar">
         <div id="Logo">
-          <img alt="LogBoard logo" src="./assets/LogBoardLOGO.svg" width="130" />
+          <img alt="LogBoard logo" src="./assets/logologboard.svg" width="130" />
         </div>
         <div slot="reference" id="NavItems">
           <router-link :to="{ name: 'dashboard' }" class="Nav">
@@ -17,67 +17,58 @@
             <img id="Icon" alt="LogBoard Icon" src="./assets/icon/PHOTODIARY.svg" width="32" />
             <h4>PHOTODIARY</h4>
           </router-link>
-          <!-- <router-link :to="{ name: 'camps' }" class="Nav">
+          <router-link :to="{ name: 'camps' }" class="Nav">
             <img id="Icon" alt="LogBoard Icon" src="./assets/icon/camps.svg" width="32" />
-            <h4>實習營健康表</h4>
-          </router-link>-->
+            <h4>健康聲明表</h4>
+          </router-link>
         </div>
-      </div>
+      </div>-->
+      <NavBar id="NavBar" />
       <div id="Content" style="overflow: hidden;">
         <DateSelectBar id="DateSelectBar" v-if="true" />
+
         <div id="NavBarMobile">
-          <div id="LogoMobile">
-            <img alt="LogBoard logo" src="./assets/LogBoardLOGO.svg" height="30" class="LogoMobile" />
-            <button @click="toggle" class="menu">
-              <img alt="menu logo" src="./assets/icon/menu.svg" height="25" />
-            </button>
-          </div>
-          <div id="NavItems" v-if="isShow">
-            <router-link :to="{ name: 'camps' }" class="Nav">
-              <img id="Icon" alt="LogBoard Icon" src="./assets/icon/camps.svg" width="32" />
-              <h4>實習營健康表</h4>
-            </router-link>
-            <router-link :to="{ name: 'dashboard' }" class="Nav">
-              <img id="Icon" alt="LogBoard Icon" src="./assets/icon/DASHBOARD.svg" width="32" />
-              <h4>DASHBOARD</h4>
-            </router-link>
-            <router-link :to="{ name: 'photodiary' }" class="Nav">
-              <img id="Icon" alt="LogBoard Icon" src="./assets/icon/PHOTODIARY.svg" width="32" />
-              <h4>PHOTODIARY</h4>
-            </router-link>
-            <DateSelectBar id="DateSelectBarMobile" v-if="true" />
-          </div>
+          <DateSelectBarMobile />
         </div>
         <router-view></router-view>
       </div>
     </div>
     <div id="Footer">
       <img alt="LogBoard logo" src="./assets/LogBoardLOGO.svg" height="60%" />
-      © 2020 copyright. all rights reserved  v0.1.5
+      <template id="version">version v{{version}}</template>
+      © 2020 copyright. all rights reserved
       {{storageUserId}}
     </div>
   </div>
 </template>
 
 <script>
 import DateSelectBar from "./components/DateSelectBar.vue";
+import DateSelectBarMobile from "./components/DateSelectBarMobile.vue";
+import NavBar from "./components/NavBar.vue";
 import "reset-css";
-
+import config from "../package.json";
 export default {
   name: "App",
   components: {
-    DateSelectBar
+    DateSelectBar,
+    DateSelectBarMobile,
+    NavBar,
   },
   props: {
-    source: String
+    source: String,
   },
   watch: {
-    storageUserId: function() {
+    storageUserId: function () {
       console.log("storageUserId change", this.storageUserId);
     },
-    storageisLoading: function() {
+    storageisLoading: function () {
       console.log("storageisLoading change", this.storageisLoading);
-    }
+    },
+    storageSymptomsTemplates: function () {
+      // this.$store.dispatch("ChangDisplayTemplate", "heartFailure");
+      console.log("ChangDisplayTemplate change", this.storageisLoading);
+    },
   },
   computed: {
     storageUserId() {
@@ -86,36 +77,45 @@ export default {
     },
     storageisLoading() {
       return this.$store.state.isLoading;
-    }
+    },
+    storageSymptomsTemplates() {
+      return this.$store.state.SymptomsTemplates;
+    },
   },
   data() {
     return {
+      version: config.version,
       uid: this.computed,
       isShow: false,
       drawer: true,
       visible: false,
-      DataTable: [{}, {}, {}]
+      DataTable: [{}, {}, {}],
       // isLoading: false
     };
   },
-
+  created() {
+    this.$store.dispatch("fetchTemplates");
+    // this.GetAPI("this-week");
+    console.log("version", config.version);
+  },
   methods: {
-    toggle: function() {
+    toggle: function () {
       this.isShow = !this.isShow;
     },
+
     open() {
       console.log("open was clicked, will auto hide");
       let loader = this.$loading.show({
-        loader: "dots"
+        loader: "dots",
       });
       setTimeout(() => loader.hide(), 3 * 1000);
     },
     show() {
       console.log("show was clicked, click to hide");
       // do AJAX here
       this.visible = true;
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -131,20 +131,18 @@ export default {
 }*/
 
 .el-table th.gutter {
-    display: table-cell!important;
+  display: table-cell !important;
 }
 .el-table--border th.gutter:last-of-type {
-    display: block!important;
-    width: 17px!important;
+  display: block !important;
+  width: 17px !important;
 }
 .el-table th {
-	display: table-cell!important; 
+  display: table-cell !important;
 }
 
-
- 
-body .el-table th.gutter{
-    display: table-cell!important;
+body .el-table th.gutter {
+  display: table-cell !important;
 }
 
 #main .el-date-editor--daterange.el-input__inner {
@@ -186,6 +184,9 @@ body .el-table th.gutter{
   height: 97vh;
 }
 
+#DateSelectBarMobile {
+}
+
 @media screen and (max-width: 800px) {
   #DateSelectBar {
     display: none;
@@ -204,18 +205,21 @@ body .el-table th.gutter{
 @media screen and (min-width: 567px) {
   #NavBar {
     /* background: #f0afff; */
-    display: flex;
+    /* display: flex;
     flex: 1;
     width: 15%;
     flex-direction: column;
     -webkit-justify-content: center;
-    justify-content: center;
+    justify-content: center; */
     /* height: 100vh; */
   }
   #NavBarMobile {
     display: none;
   }
 }
+#NavBarMobile {
+  width: 100%;
+}
 #Footer {
   width: "100%";
   /* height: "20x"; */

src/Layout/T1B2.vue

@@ -1,4 +1,7 @@
 <template >
+
+   
+
   <div id="T1B2" style="width: 100%;">
     <div id="Top10">
       <LogChart msg="LogChart Plugins" />
@@ -118,23 +121,30 @@
       </div>
     </div>
   </div>
+  
 </template>
 
 <script>
 import LogChart from "../components/LogChart.vue";
 import SymptomTable from "../components/SymptomTable.vue";
 import CalendarSweet from "../components/CalendarSweet.vue";
+// import { ContentLoader } from "vue-content-loader";
 
 export default {
   name: "T1B2",
   components: {
     LogChart,
     SymptomTable,
-    CalendarSweet
+    CalendarSweet,
+    // ContentLoader,
+  },
+  created() {
   },
-  created() {},
   watch: {
-    storageRaw_Data: function() {
+    skeleton: function () {
+      console.log("skeleton change", this.skeleton);
+    },
+    storageRaw_Data: function () {
       console.log("storageRaw_Data change", this.storageRaw_Data);
       this.$store.commit("ChangisLoading", false);
 
@@ -149,13 +159,16 @@ export default {
     //   console.log("storageRaw_photo change", this.storageRaw_photo);
     //   // this.fillData();
     // }
-    storagePopUp_id: function() {
+    storagePopUp_id: function () {
       console.log("storagePopUp_id change", this.storagePopUp_id);
       this.$store.dispatch("fetchRawDataApi");
       // this.fillData();
-    }
+    },
   },
   computed: {
+    skeleton() {
+      return this.$store.state.isLoading;
+    },
     storageRaw_Data() {
       console.log("storageRaw_Data change", this.$store.state.storeRAWData);
       return this.$store.state.storeRAWData;
@@ -168,13 +181,13 @@ export default {
     // },
     storagePopUp_id() {
       return this.$store.state.PopUpidList;
-    }
+    },
   },
   methods: {
     off() {
       // this.$store.commit("ChangDisplayPopUp", false);
       this.$store.commit("ChangDisplayPopUp", { display: false, index: -1 });
-    }
+    },
   },
   data() {
     return {
@@ -188,11 +201,11 @@ export default {
               label: "二级 1-1",
               children: [
                 {
-                  label: "三级 1-1-1"
-                }
-              ]
-            }
-          ]
+                  label: "三级 1-1-1",
+                },
+              ],
+            },
+          ],
         },
         {
           label: "一级 2",
@@ -201,19 +214,19 @@ export default {
               label: "二级 2-1",
               children: [
                 {
-                  label: "三级 2-1-1"
-                }
-              ]
+                  label: "三级 2-1-1",
+                },
+              ],
             },
             {
               label: "二级 2-2",
               children: [
                 {
-                  label: "三级 2-2-1"
-                }
-              ]
-            }
-          ]
+                  label: "三级 2-2-1",
+                },
+              ],
+            },
+          ],
         },
         {
           label: "一级 3",
@@ -222,23 +235,23 @@ export default {
               label: "二级 3-1",
               children: [
                 {
-                  label: "三级 3-1-1"
-                }
-              ]
+                  label: "三级 3-1-1",
+                },
+              ],
             },
             {
               label: "二级 3-2",
               children: [
                 {
-                  label: "三级 3-2-1"
-                }
-              ]
-            }
-          ]
-        }
-      ]
+                  label: "三级 3-2-1",
+                },
+              ],
+            },
+          ],
+        },
+      ],
     };
-  }
+  },
 };
 </script>