cookies

jacksalici · May 15, 2023 · 72b1abb · 72b1abb
1 parent 39a5040
commit 72b1abb
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 7 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -9,10 +9,12 @@
   },
   "dependencies": {
     "moment": "^2.29.4",
-    "vue": "^3.2.31"
+    "vue": "^3.2.31",
+    "js-cookie": "^3.0.3"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.9",
+    "js-cookie": "^3.0.3",
     "@vitejs/plugin-vue": "^2.2.4",
     "@vue/compiler-sfc": "^3.2.31",
     "autoprefixer": "^10.4.14",

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -2,9 +2,15 @@
 import { onMounted, onUnmounted, watch, ref, watchEffect } from "vue";
 import moment from "moment";
 import StatComponent from "./components/StatComponent.vue";
+import Cookies from "js-cookie"
+
 
 const api_url = `https://weather-station-api.jacksalici.workers.dev/`;
 
+
+
+
+
 var istant_query = ref({
   code: 0,
   msg: "success",
@@ -49,7 +55,13 @@ var istant_query = ref({
 
 var loading = ref({ status: true, text: "Loading..." });
 
-var showMoreData = ref(false);
+var showMoreData = ref(Cookies.get("showMoreData")!=undefined ? Cookies.get("showMoreData") : false);
+
+watch(showMoreData, ()=>{
+    Cookies.set("showMoreData", showMoreData.value, { expires: 350 })
+  }, { immediate: true })
+
+
 
 async function updateData() {
   loading.value = { status: true, text: "Loading..." };
@@ -64,6 +76,8 @@ async function updateData() {
   };
 }
 
+
+
 const batteryLevels = ["Normal", "Low"]
 
 watchEffect(async () => {
@@ -125,7 +139,7 @@ onUnmounted(() => {
     </div>
   </div>
 
-  <!--NAV BAR-->
+  <!-- MAIN DATA -->
   <h1 class="text-2xl font-bold m-2 mb-4 bg-base-100 shadow-xl p-5 rounded-xl">
     Istant Data
     <span
@@ -158,10 +172,10 @@ onUnmounted(() => {
         :value="istant_query.data.rainfall.event.value"
         :unit="istant_query.data.rainfall.event.unit"
         :description="
-          'Weekly:' + istant_query.data.rainfall.weekly.value +
-          istant_query.data.rainfall.weekly.unit + '<br />Monthly:' +
+          'Weekly: ' + istant_query.data.rainfall.weekly.value +
+          istant_query.data.rainfall.weekly.unit + '<br />Monthly: ' +
           istant_query.data.rainfall.monthly.value +
-          istant_query.data.rainfall.monthly.unit + '<br />Yearly:' +
+          istant_query.data.rainfall.monthly.unit + '<br />Yearly: ' +
           istant_query.data.rainfall.yearly.value +
           istant_query.data.rainfall.yearly.unit
         "
@@ -238,6 +252,7 @@ onUnmounted(() => {
     </div>
   </div>
 
+   <!-- OTHER DATA -->
   <h1
     class="text-2xl font-bold m-2 mb-4 mt-6 bg-base-100 shadow-xl p-5 rounded-xl"
     v-if="showMoreData"
@@ -273,6 +288,8 @@ onUnmounted(() => {
   </div>
   </div>
 
+
+  <!-- FOOTER AND OTHER DATA -->
   <footer class="footer footer-center p-4 bg-base-100 text-base-content">
     <div class="text-base-300">
       <p>

diff --git a/frontend/src/main.js b/frontend/src/main.js
@@ -1,7 +1,9 @@
 import { createApp } from 'vue'
+
 import App from './App.vue'
 import './assets/index.css'
 
 
+var app = createApp(App)
 
-createApp(App).mount('#app')
+app.mount('#app')