nikitakiselev/interview-demo-code
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: add debug mode for developers. Logs improvements

Browse Source
This commit is contained in:
Nikita Kiselev
2025-10-26 11:54:05 +03:00
parent d7666f94ba
commit fbccd50675
20 changed files with 176 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
spa/src/App.vue
View File

@@ -10,6 +10,9 @@
<section class="telecart-main-section">
<FullscreenViewport v-if="platform === 'ios' || platform === 'android'" />
<AppDebugMessage v-if="settings.app_debug"/>
<RouterView v-slot="{ Component, route }">
<KeepAlive include="Home" :key="filtersStore.paramsHashForRouter">
<component :is="Component" :key="route.fullPath" />
@@ -43,6 +46,7 @@ import {useProductFiltersStore} from "@/stores/ProductFiltersStore.js";
import CartButton from "@/components/CartButton.vue";
import Dock from "@/components/Dock.vue";
import Navbar from "@/components/Navbar.vue";
import AppDebugMessage from "@/components/AppDebugMessage.vue";
const tg = useMiniApp();
const platform = ref();

9
spa/src/components/AppDebugMessage.vue Normal file
View File

@@ -0,0 +1,9 @@
<template>
<div role="alert" class="alert alert-warning rounded-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
</svg>
<span>Включен режим разработчика!</span>
</div>
</template>

4
spa/src/components/Dock.vue
View File

@@ -73,8 +73,8 @@ function onDockItemClick() {
<style scoped>
.telecart-dock {
padding-bottom: calc(var(--tg-safe-area-inset-bottom) + 5px);
height: calc(70px + var(--tg-safe-area-inset-bottom));
padding-bottom: calc(var(--tg-safe-area-inset-bottom, 0px) + 5px);
height: calc(70px + var(--tg-safe-area-inset-bottom, 0px));
}
.telecart-dock-inner {

2
spa/src/components/FullScreenImageViewer.vue
View File

@@ -74,6 +74,6 @@ function onClose() {
}
.fullscreen-image-viewer .swiper-pagination-fraction {
bottom: calc(var(--tg-safe-area-inset-bottom, 0) + var(--tg-content-safe-area-inset-bottom, 0));
bottom: calc(var(--tg-safe-area-inset-bottom, 0px) + var(--tg-content-safe-area-inset-bottom, px));
}
</style>

2
spa/src/main.js
View File

@@ -31,6 +31,7 @@ const appLoading = createApp(AppLoading);
appLoading.mount('#app');
settings.load()
.then(() => window.Telegram.WebApp.lockOrientation())
.then(async () => {
console.debug('Load default filters for the main page');
const filtersStore = useProductFiltersStore();
@@ -63,7 +64,6 @@ settings.load()
.then(() => { appLoading.unmount(); app.mount('#app'); })
.then(() => window.Telegram.WebApp.ready())
.then(() => settings.ya_metrika_enabled && injectYaMetrika())
.then(() => window.Telegram.WebApp.lockOrientation())
.catch(error => {
console.error(error);
const errorApp = createApp(ApplicationError, {error});

2
spa/src/stores/SettingsStore.js
View File

@@ -4,6 +4,7 @@ import {fetchSettings} from "@/utils/ftch.js";
export const useSettingsStore = defineStore('settings', {
state: () => ({
app_enabled: true,
app_debug: false,
store_enabled: true,
app_name: 'OpenCart Telegram магазин',
app_icon: '',
@@ -39,6 +40,7 @@ export const useSettingsStore = defineStore('settings', {
this.theme.dark = settings.theme_dark;
this.ya_metrika_enabled = settings.ya_metrika_enabled;
this.app_enabled = settings.app_enabled;
this.app_debug = settings.app_debug;
this.store_enabled = settings.store_enabled;
this.feature_coupons = settings.feature_coupons;
this.feature_vouchers = settings.feature_vouchers;

8
spa/src/style.css
View File

@@ -32,9 +32,9 @@ html {
.app-container {
/*padding-top: calc(var(--tg-content-safe-area-inset-top) + var(--tg-safe-area-inset-top));*/
padding-bottom: var(--tg-safe-area-inset-bottom);
padding-left: var(--tg-safe-area-inset-left);
padding-right: var(--tg-safe-area-inset-right);
padding-bottom: var(--tg-safe-area-inset-bottom, 0px);
padding-left: var(--tg-safe-area-inset-left, 0px);
padding-right: var(--tg-safe-area-inset-right, 0px);
}
.safe-top {
@@ -57,7 +57,7 @@ html {
}
.telecart-main-section {
padding-top: calc(var(--tg-content-safe-area-inset-top) + var(--tg-safe-area-inset-top) + var(--tc-navbar-min-height));
padding-top: calc(var(--tg-content-safe-area-inset-top, 0rem) + var(--tg-safe-area-inset-top, 0rem) + var(--tc-navbar-min-height));
}
.swiper-pagination-bullets > .swiper-pagination-bullet {

2
spa/src/views/Cart.vue
View File

@@ -174,6 +174,6 @@ onMounted(async () => {
<style scoped>
.btn-checkout {
bottom: calc(var(--spacing) * 22 + var(--tg-safe-area-inset-bottom))
bottom: calc(var(--spacing, 0px) * 22px + var(--tg-safe-area-inset-bottom, 0px))
}
</style>

2
spa/src/views/Home.vue
View File

@@ -4,7 +4,7 @@
<Banner/>
<div class="px-5 fixed z-50 w-full opacity-90" style="bottom: calc(var(--tg-safe-area-inset-bottom) + 80px);">
<div class="px-5 fixed z-50 w-full opacity-90" style="bottom: calc(var(--tg-safe-area-inset-bottom, 0px) + 80px);">
<div class="flex justify-center">
<button
@click="showFilters"