Use store state in changing theme.

package-lock.json

@@ -1271,9 +1271,9 @@
       "dev": true
     },
     "@types/eslint": {
-      "version": "7.2.9",
+      "version": "7.2.10",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.9.tgz",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.10.tgz",
-      "integrity": "sha512-SdAAXZNvWfhtf3X3y1cbbCZhP3xyPh7mfTvzV6CgfWc/ZhiHpyr9bVroe2/RCHIf7gczaNcprhaBLsx0CCJHQA==",
+      "integrity": "sha512-kUEPnMKrqbtpCq/KTaGFFKAcz6Ethm2EjCoKIDaCmfRBWLbFuTcOJfTlorwbnboXBzahqWLgUp1BQeKHiJzPUQ==",
       "dev": true,
       "requires": {
         "@types/estree": "*",
@@ -1291,9 +1291,9 @@
       }
     },
     "@types/estree": {
-      "version": "0.0.46",
+      "version": "0.0.47",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.46.tgz",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.47.tgz",
-      "integrity": "sha512-laIjwTQaD+5DukBZaygQ79K1Z0jb1bPEMRrkXSLjtCcZm+abyp5YbrqpSLzD42FwWW6gK/aS4NYpJ804nG2brg==",
+      "integrity": "sha512-c5ciR06jK8u9BstrmJyO97m+klJrrhCf9u3rLu3DEAJBirxRqSCvDQoYKmxuYwQI5SZChAWu+tq9oVlGRuzPAg==",
       "dev": true
     },
     "@types/glob": {
@@ -3248,23 +3248,22 @@
       }
     },
     "css-loader": {
-      "version": "5.2.1",
+      "version": "5.2.4",
-      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.2.4.tgz",
-      "integrity": "sha512-YCyRzlt/jgG1xanXZDG/DHqAueOtXFHeusP9TS478oP1J++JSKOyEgGW1GHVoCj/rkS+GWOlBwqQJBr9yajQ9w==",
+      "integrity": "sha512-OFYGyINCKkdQsTrSYxzGSFnGS4gNjcXkKkQgWxK138jgnPt+lepxdjSZNc8sHAl5vP3DhsJUxufWIjOwI8PMMw==",
       "dev": true,
       "requires": {
         "camelcase": "^6.2.0",
-        "cssesc": "^3.0.0",
         "icss-utils": "^5.1.0",
         "loader-utils": "^2.0.0",
-        "postcss": "^8.2.8",
+        "postcss": "^8.2.10",
         "postcss-modules-extract-imports": "^3.0.0",
         "postcss-modules-local-by-default": "^4.0.0",
         "postcss-modules-scope": "^3.0.0",
         "postcss-modules-values": "^4.0.0",
         "postcss-value-parser": "^4.1.0",
         "schema-utils": "^3.0.0",
-        "semver": "^7.3.4"
+        "semver": "^7.3.5"
       },
       "dependencies": {
         "camelcase": {
@@ -3986,9 +3985,9 @@
       }
     },
     "enhanced-resolve": {
-      "version": "5.7.0",
+      "version": "5.8.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.7.0.tgz",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.8.0.tgz",
-      "integrity": "sha512-6njwt/NsZFUKhM6j9U8hzVyD4E4r0x7NQzhTCbcWOJ0IQjNSAoalWmb0AE51Wn+fwan5qVESWi7t2ToBxs9vrw==",
+      "integrity": "sha512-Sl3KRpJA8OpprrtaIswVki3cWPiPKxXuFxJXBp+zNb6s6VwNWwFRUdtmzd2ReUut8n+sCPx7QCtQ7w5wfJhSgQ==",
       "dev": true,
       "requires": {
         "graceful-fs": "^4.2.4",
@@ -4536,9 +4535,9 @@
       }
     },
     "framework7": {
-      "version": "6.0.15",
+      "version": "6.0.16",
-      "resolved": "https://registry.npmjs.org/framework7/-/framework7-6.0.15.tgz",
+      "resolved": "https://registry.npmjs.org/framework7/-/framework7-6.0.16.tgz",
-      "integrity": "sha512-JZ5mugXsxBF27+mj6p9lC4KUBDbaiTIhKzfsc8g7gcTdQlhVUYn6oxgrwLGBpchH54qf5cO71/pBhieVxL7+Ew==",
+      "integrity": "sha512-SOa4I+cbYbakgmKDPBKkXyqHbLa91ekW3eZB+0RO6pim+taqM1X4Pu6VyIZc17l0pvJTt9dzVnskP6U7ViRqeg==",
       "requires": {
         "dom7": "^3.0.0",
         "htm": "^3.0.4",
@@ -5719,9 +5718,9 @@
       }
     },
     "less-loader": {
-      "version": "8.1.0",
+      "version": "8.1.1",
-      "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-8.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-8.1.1.tgz",
-      "integrity": "sha512-IE73O5LY5WHA71EDwszM2PIEGDF30xz45GplpRhYuxMXhAvXoMudu/ItjllNR/ht7XLh5N7JegzRg11HYu+xxg==",
+      "integrity": "sha512-K93jJU7fi3n6rxVvzp8Cb88Uy9tcQKfHlkoezHwKILXhlNYiRQl4yowLIkQqmBXOH/5I8yoKiYeIf781HGkW9g==",
       "dev": true,
       "requires": {
         "klona": "^2.0.4"
@@ -6059,9 +6058,9 @@
       "dev": true
     },
     "mini-css-extract-plugin": {
-      "version": "1.4.1",
+      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.5.0.tgz",
-      "integrity": "sha512-COAGbpAsU0ioFzj+/RRfO5Qv177L1Z/XAx2EmCF33b8GDDqKygMffBTws2lit8iaPdrbKEY5P+zsseBUCREZWQ==",
+      "integrity": "sha512-SIbuLMv6jsk1FnLIU5OUG/+VMGUprEjM1+o2trOAx8i5KOKMrhyezb1dJ4Ugsykb8Jgq8/w5NEopy6escV9G7g==",
       "dev": true,
       "requires": {
         "loader-utils": "^2.0.0",
@@ -10521,9 +10520,9 @@
       }
     },
     "swiper": {
-      "version": "6.5.6",
+      "version": "6.5.7",
-      "resolved": "https://registry.npmjs.org/swiper/-/swiper-6.5.6.tgz",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-6.5.7.tgz",
-      "integrity": "sha512-oKVshbF0vhdMFJXtcNH8vLpmyCHc7VvvIlOUafyazzlYzCRJmI80FxoIBWKzSqDyy8EXRn7Iy78p9o4I1Bww/Q==",
+      "integrity": "sha512-PGS1eUxBgLkb5uCqAMQkE465lsk01Uf8FJWA1CMBQ374leDUSK79J2fIv+c6H/nXPixJ8VzzL5jPjTSu1f9AeQ==",
       "requires": {
         "dom7": "^3.0.0",
         "ssr-window": "^3.0.0"
@@ -11059,20 +11058,20 @@
       "dev": true
     },
     "webpack": {
-      "version": "5.32.0",
+      "version": "5.34.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.32.0.tgz",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.34.0.tgz",
-      "integrity": "sha512-jB9PrNMFnPRiZGnm/j3qfNqJmP3ViRzkuQMIf8za0dgOYvSLi/cgA+UEEGvik9EQHX1KYyGng5PgBTTzGrH9xg==",
+      "integrity": "sha512-+WiFMgaZqhu7zKN64LQ7z0Ml4WWI+9RwG6zmS0wJDQXiCeg3hpN8fYFNJ+6WlosDT55yVxTfK7XHUAOVR4rLyA==",
       "dev": true,
       "requires": {
         "@types/eslint-scope": "^3.7.0",
-        "@types/estree": "^0.0.46",
+        "@types/estree": "^0.0.47",
         "@webassemblyjs/ast": "1.11.0",
         "@webassemblyjs/wasm-edit": "1.11.0",
         "@webassemblyjs/wasm-parser": "1.11.0",
         "acorn": "^8.0.4",
         "browserslist": "^4.14.5",
         "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.7.0",
+        "enhanced-resolve": "^5.8.0",
         "es-module-lexer": "^0.4.0",
         "eslint-scope": "^5.1.1",
         "events": "^3.2.0",

package.json

@@ -29,10 +29,10 @@
   "dependencies": {
     "axios": "^0.21.1",
     "dom7": "^3.0.0",
-    "framework7": "^6.0.15",
+    "framework7": "^6.0.16",
     "framework7-icons": "^4.0.2",
     "skeleton-elements": "^3.3.0",
-    "swiper": "^6.5.6"
+    "swiper": "^6.5.7"
   },
   "devDependencies": {
     "@babel/core": "^7.13.15",
@@ -46,14 +46,14 @@
     "copy-webpack-plugin": "^8.1.1",
     "cpy-cli": "^3.1.1",
     "cross-env": "^7.0.3",
-    "css-loader": "^5.2.1",
+    "css-loader": "^5.2.4",
     "css-minimizer-webpack-plugin": "^2.0.0",
     "file-loader": "^6.2.0",
     "framework7-loader": "^3.0.2",
     "html-webpack-plugin": "^5.3.1",
     "less": "^4.1.1",
-    "less-loader": "^8.1.0",
+    "less-loader": "^8.1.1",
-    "mini-css-extract-plugin": "^1.4.1",
+    "mini-css-extract-plugin": "^1.5.0",
     "ora": "^5.4.0",
     "postcss-loader": "^5.2.0",
     "postcss-preset-env": "^6.7.0",
@@ -61,7 +61,7 @@
     "style-loader": "^2.0.0",
     "terser-webpack-plugin": "^5.1.1",
     "url-loader": "^4.1.1",
-    "webpack": "^5.32.0",
+    "webpack": "^5.34.0",
     "webpack-cli": "^4.6.0",
     "webpack-dev-server": "^3.11.2",
     "workbox-webpack-plugin": "^6.1.5"

src/app.f7.html

@@ -8,7 +8,7 @@
   </div>
 </template>
 <script>
-  export default (props, { $f7, $update }) => {
+  export default (props, { $f7, $update, $store }) => {
     // Login screen demo data
     let username = '';
     let password = '';

src/index.html

@@ -27,7 +27,7 @@
   <!-- built styles file will be auto injected -->
 </head>
 <body>
-  <div id="app" class="theme-dark"></div>
+  <div id="app"></div>
   <% if (process.env.TARGET === 'cordova') { %>
   <script src="cordova.js"></script>
   <% } %>

src/js/stores/index.js

@@ -3,33 +3,19 @@ import { createStore } from 'framework7';
 
 const store = createStore({
   state: {
-    products: [
+    theme: {
-      {
+      name: 'theme-dark',
-        id: '1',
-        title: 'Apple iPhone 8',
-        description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi tempora similique reiciendis, error nesciunt vero, blanditiis pariatur dolor, minima sed sapiente rerum, dolorem corrupti hic modi praesentium unde saepe perspiciatis.'
-      },
-      {
-        id: '2',
-        title: 'Apple iPhone 8 Plus',
-        description: 'Velit odit autem modi saepe ratione totam minus, aperiam, labore quia provident temporibus quasi est ut aliquid blanditiis beatae suscipit odio vel! Nostrum porro sunt sint eveniet maiores, dolorem itaque!'
-      },
-      {
-        id: '3',
-        title: 'Apple iPhone X',
-        description: 'Expedita sequi perferendis quod illum pariatur aliquam, alias laboriosam! Vero blanditiis placeat, mollitia necessitatibus reprehenderit. Labore dolores amet quos, accusamus earum asperiores officiis assumenda optio architecto quia neque, quae eum.'
-      },
-    ]
-  },
-  getters: {
-    products({ state }) {
-      return state.products;
     }
   },
   actions: {
-    addProduct({ state }, product) {
+    changeTheme({ state }, name) {
-      state.products = [...state.products, product];
+      state.theme.name = name;
     },
   },
+  getters: {
+    themeName({ state }) {
+      return state.theme.name;
+    }
+  },
 })
 export default store;

src/pages/home/panel-left.f7.html

@@ -121,9 +121,10 @@
 </div>
 </template>
 <script>
+import $ from 'dom7'; 
 import User from '../../js/controllers/users.js';
 
-export default (props, { $f7, $on, $update }) => {
+export default (props, { $f7, $on, $update, $store }) => {
 
   let isLogged = false;
   let isSeller = false;
@@ -131,6 +132,12 @@ export default (props, { $f7, $on, $update }) => {
   let isDeliverer = false;
 
   const onPanelOpen = () => {
+    if ($store.getters.themeName.value != 'theme-dark'){
+      $(".panel-left").removeClass("theme-dark");
+    }
+    else{
+      $(".panel-left").addClass("theme-dark");
+    }
     if (User.isLogged()){
       const userData = JSON.parse(localStorage.getItem("userData"));
       const userRoles = userData['userPermissions'];

src/pages/home/panel-right.f7.html

@@ -39,11 +39,12 @@
                 <div class="item-inner">
                   <div class="item-title item-label">Sesión</div>
                   <div class="item-input-wrap">
-                    ${isLogged ? $h`
+                    ${isLogged && $h`
                     <a class="link panel-close color-green" href="#" @click=${logout}>
                       <i class="fas fa-sign-out-alt"></i> Salir
                     </a>
-                    ` : $h`
+                    `}
+                    ${!isLogged && $h`
                     <a class="link panel-close color-green" href="/login/">
                       <i class="fas fa-sign-in-alt"></i> Ingresar
                     </a>
@@ -63,10 +64,18 @@
 import $ from 'dom7'; 
 import User from '../../js/controllers/users.js';
 
-export default (props, { $f7, $on, $update }) => {
+export default (props, { $f7, $on, $update, $store }) => {
   let isLogged = false;
+  let theme = '';
 
   const onPanelOpen = () => {
+    if ($store.getters.themeName.value != 'theme-dark'){
+      $(".panel-right").removeClass("theme-dark");
+      $('#light-theme').prop('checked', true);
+    }
+    else{
+      $(".panel-right").addClass("theme-dark");
+    }
     if (User.isLogged()){
       let data = JSON.parse(localStorage.getItem("userData"));
       $("#menu-username").text(data.contactName);
@@ -80,12 +89,15 @@ export default (props, { $f7, $on, $update }) => {
   };
 
   const setTheme = () => {
-    /*if ($("#light-theme").prop('checked')){
+    if ($("#light-theme").prop('checked')){
-      $("#app, .panel-left, .panel-right").removeClass("theme-dark");
+      $("#app, .panel-right").removeClass("theme-dark");
     }
     else{
-      $("#app, .panel-left, .panel-right").addClass("theme-dark");
+      $("#app, .panel-right").addClass("theme-dark");
-    }*/
+    }
+    theme = !$("#light-theme").prop('checked') ? 'theme-dark' : '';
+    $store.dispatch('changeTheme', theme);
+    $update();
   };
 
   return $render;