From f165aff60ec8ebf5c5781019c7abdcc30562a4bd Mon Sep 17 00:00:00 2001
From: Juan Carlos Ruvalcaba <askot.altair@gmail.com>
Date: Tue, 20 Apr 2021 09:57:30 -0700
Subject: [PATCH] Refactor theme change

---
 src/app.f7.html                    |  4 +++-
 src/pages/home/panel-left.f7.html  |  9 ++-------
 src/pages/home/panel-right.f7.html | 13 +++----------
 3 files changed, 8 insertions(+), 18 deletions(-)

diff --git a/src/app.f7.html b/src/app.f7.html
index 96ecca0..54fa0cb 100644
--- a/src/app.f7.html
+++ b/src/app.f7.html
@@ -1,6 +1,6 @@
 
 <template>
-  <div id="app" class="theme-dark">
+  <div id="app" class="${theme == 'theme-dark' && $h`theme-dark`}">
 
     <!-- Your main view, should have "view-main" class -->
     <div class="view view-main view-init safe-areas" data-url="/"></div>
@@ -13,6 +13,8 @@
     let username = '';
     let password = '';
 
+    let theme = $store.getters.themeName.value;
+
     const updateUsername = (e) => {
       username = e.target.value;
       $update();
diff --git a/src/pages/home/panel-left.f7.html b/src/pages/home/panel-left.f7.html
index 45227c5..2bfc684 100644
--- a/src/pages/home/panel-left.f7.html
+++ b/src/pages/home/panel-left.f7.html
@@ -1,6 +1,6 @@
 <template>
 <!-- Left panel with cover effect-->
-<div class="panel panel-left panel-reveal theme-dark" @panel:open=${onPanelOpen}>
+<div class="panel panel-left panel-reveal ${theme == 'theme-dark' && $h`theme-dark`}" @panel:open=${onPanelOpen}>
   <div class="view">
     <div class="page">
       <div class="navbar">
@@ -130,14 +130,9 @@ export default (props, { $f7, $on, $update, $store }) => {
   let isSeller = false;
   let isCustomer = false;
   let isDeliverer = false;
+  let theme = $store.getters.themeName.value;
 
   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'];
diff --git a/src/pages/home/panel-right.f7.html b/src/pages/home/panel-right.f7.html
index 6a17631..6801afb 100644
--- a/src/pages/home/panel-right.f7.html
+++ b/src/pages/home/panel-right.f7.html
@@ -1,6 +1,6 @@
 <template>
 <!-- Right panel with reveal effect-->
-<div class="panel panel-right panel-reveal theme-dark" @panel:open=${onPanelOpen}>
+<div class="panel panel-right panel-reveal ${theme == 'theme-dark' && $h`theme-dark`}" @panel:open=${onPanelOpen}>
   <div class="view">
     <div class="page">
       <div class="navbar">
@@ -66,16 +66,10 @@ import User from '../../js/controllers/users.js';
 
 export default (props, { $f7, $on, $update, $store }) => {
   let isLogged = false;
-  let theme = '';
+  let theme = $store.getters.themeName.value;
 
   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");
-    }
+    $('#light-theme').prop('checked', (theme != 'theme-dark') ? true : false );
     if (User.isLogged()){
       let data = JSON.parse(localStorage.getItem("userData"));
       $("#menu-username").text(data.contactName);
@@ -97,7 +91,6 @@ export default (props, { $f7, $on, $update, $store }) => {
     }
     theme = !$("#light-theme").prop('checked') ? 'theme-dark' : '';
     $store.dispatch('changeTheme', theme);
-    $update();
   };
 
   return $render;