mirror of
https://github.com/dborth/vbagx.git
synced 2024-11-22 18:49:18 +01:00
Use store state in changing theme.
This commit is contained in:
Juan Carlos Ruvalcaba
parent
a2b0d44627
commit
70ef9ff337
63
package-lock.json
generated
63
package-lock.json
generated
@ -1271,9 +1271,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"@types/eslint": {
|
||||
"version": "7.2.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.9.tgz",
|
||||
"integrity": "sha512-SdAAXZNvWfhtf3X3y1cbbCZhP3xyPh7mfTvzV6CgfWc/ZhiHpyr9bVroe2/RCHIf7gczaNcprhaBLsx0CCJHQA==",
|
||||
"version": "7.2.10",
|
||||
"resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.10.tgz",
|
||||
"integrity": "sha512-kUEPnMKrqbtpCq/KTaGFFKAcz6Ethm2EjCoKIDaCmfRBWLbFuTcOJfTlorwbnboXBzahqWLgUp1BQeKHiJzPUQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/estree": "*",
|
||||
@ -1291,9 +1291,9 @@
|
||||
}
|
||||
},
|
||||
"@types/estree": {
|
||||
"version": "0.0.46",
|
||||
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.46.tgz",
|
||||
"integrity": "sha512-laIjwTQaD+5DukBZaygQ79K1Z0jb1bPEMRrkXSLjtCcZm+abyp5YbrqpSLzD42FwWW6gK/aS4NYpJ804nG2brg==",
|
||||
"version": "0.0.47",
|
||||
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.47.tgz",
|
||||
"integrity": "sha512-c5ciR06jK8u9BstrmJyO97m+klJrrhCf9u3rLu3DEAJBirxRqSCvDQoYKmxuYwQI5SZChAWu+tq9oVlGRuzPAg==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/glob": {
|
||||
@ -3248,23 +3248,22 @@
|
||||
}
|
||||
},
|
||||
"css-loader": {
|
||||
"version": "5.2.1",
|
||||
"resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.2.1.tgz",
|
||||
"integrity": "sha512-YCyRzlt/jgG1xanXZDG/DHqAueOtXFHeusP9TS478oP1J++JSKOyEgGW1GHVoCj/rkS+GWOlBwqQJBr9yajQ9w==",
|
||||
"version": "5.2.4",
|
||||
"resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.2.4.tgz",
|
||||
"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",
|
||||
"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.7.0.tgz",
|
||||
"integrity": "sha512-6njwt/NsZFUKhM6j9U8hzVyD4E4r0x7NQzhTCbcWOJ0IQjNSAoalWmb0AE51Wn+fwan5qVESWi7t2ToBxs9vrw==",
|
||||
"version": "5.8.0",
|
||||
"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.8.0.tgz",
|
||||
"integrity": "sha512-Sl3KRpJA8OpprrtaIswVki3cWPiPKxXuFxJXBp+zNb6s6VwNWwFRUdtmzd2ReUut8n+sCPx7QCtQ7w5wfJhSgQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"graceful-fs": "^4.2.4",
|
||||
@ -4536,9 +4535,9 @@
|
||||
}
|
||||
},
|
||||
"framework7": {
|
||||
"version": "6.0.15",
|
||||
"resolved": "https://registry.npmjs.org/framework7/-/framework7-6.0.15.tgz",
|
||||
"integrity": "sha512-JZ5mugXsxBF27+mj6p9lC4KUBDbaiTIhKzfsc8g7gcTdQlhVUYn6oxgrwLGBpchH54qf5cO71/pBhieVxL7+Ew==",
|
||||
"version": "6.0.16",
|
||||
"resolved": "https://registry.npmjs.org/framework7/-/framework7-6.0.16.tgz",
|
||||
"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",
|
||||
"resolved": "https://registry.npmjs.org/less-loader/-/less-loader-8.1.0.tgz",
|
||||
"integrity": "sha512-IE73O5LY5WHA71EDwszM2PIEGDF30xz45GplpRhYuxMXhAvXoMudu/ItjllNR/ht7XLh5N7JegzRg11HYu+xxg==",
|
||||
"version": "8.1.1",
|
||||
"resolved": "https://registry.npmjs.org/less-loader/-/less-loader-8.1.1.tgz",
|
||||
"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",
|
||||
"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.4.1.tgz",
|
||||
"integrity": "sha512-COAGbpAsU0ioFzj+/RRfO5Qv177L1Z/XAx2EmCF33b8GDDqKygMffBTws2lit8iaPdrbKEY5P+zsseBUCREZWQ==",
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.5.0.tgz",
|
||||
"integrity": "sha512-SIbuLMv6jsk1FnLIU5OUG/+VMGUprEjM1+o2trOAx8i5KOKMrhyezb1dJ4Ugsykb8Jgq8/w5NEopy6escV9G7g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"loader-utils": "^2.0.0",
|
||||
@ -10521,9 +10520,9 @@
|
||||
}
|
||||
},
|
||||
"swiper": {
|
||||
"version": "6.5.6",
|
||||
"resolved": "https://registry.npmjs.org/swiper/-/swiper-6.5.6.tgz",
|
||||
"integrity": "sha512-oKVshbF0vhdMFJXtcNH8vLpmyCHc7VvvIlOUafyazzlYzCRJmI80FxoIBWKzSqDyy8EXRn7Iy78p9o4I1Bww/Q==",
|
||||
"version": "6.5.7",
|
||||
"resolved": "https://registry.npmjs.org/swiper/-/swiper-6.5.7.tgz",
|
||||
"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",
|
||||
"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.32.0.tgz",
|
||||
"integrity": "sha512-jB9PrNMFnPRiZGnm/j3qfNqJmP3ViRzkuQMIf8za0dgOYvSLi/cgA+UEEGvik9EQHX1KYyGng5PgBTTzGrH9xg==",
|
||||
"version": "5.34.0",
|
||||
"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.34.0.tgz",
|
||||
"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",
|
||||
|
||||
12
package.json
12
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",
|
||||
"mini-css-extract-plugin": "^1.4.1",
|
||||
"less-loader": "^8.1.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"
|
||||
|
||||
@ -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 = '';
|
||||
|
||||
@ -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>
|
||||
<% } %>
|
||||
|
||||
@ -3,33 +3,19 @@ import { createStore } from 'framework7';
|
||||
|
||||
const store = createStore({
|
||||
state: {
|
||||
products: [
|
||||
{
|
||||
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;
|
||||
theme: {
|
||||
name: 'theme-dark',
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
addProduct({ state }, product) {
|
||||
state.products = [...state.products, product];
|
||||
changeTheme({ state }, name) {
|
||||
state.theme.name = name;
|
||||
},
|
||||
},
|
||||
getters: {
|
||||
themeName({ state }) {
|
||||
return state.theme.name;
|
||||
}
|
||||
},
|
||||
})
|
||||
export default store;
|
||||
|
||||
@ -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'];
|
||||
|
||||
@ -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')){
|
||||
$("#app, .panel-left, .panel-right").removeClass("theme-dark");
|
||||
if ($("#light-theme").prop('checked')){
|
||||
$("#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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user