Deploying to gh-pages from @ 553c912 🚀

pixelit-project · Nov 3, 2023 · c6a84f2 · c6a84f2
1 parent b347364
commit c6a84f2
Show file tree

Hide file tree

Showing 17 changed files with 1,688 additions and 270 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,21 +13,24 @@
     },
     "dependencies": {
         "@babel/polyfill": "^7.11.5",
-        "@types/prismjs": "^1.26.1",
+        "@types/prismjs": "^1.26.2",
+        "apexcharts": "^3.44.0",
         "core-js": "^3.32.2",
         "leaflet": "^1.9.4",
         "mutationobserver-shim": "^0.3.7",
         "popper.js": "^1.16.1",
         "portal-vue": "^2.1.7",
         "prismjs": "^1.29.0",
         "vue": "^2.7.8",
-        "vue-cookies": "^1.7.4",
+        "vue-apexcharts": "^1.6.2",
+        "vue-cookies": "^1.8.3",
         "vue-native-websocket": "^2.0.15",
         "vue-prism-editor": "^1.3.0",
         "vue-router": "^3.5.1",
         "vue-spinners": "^1.0.2",
         "vue2-leaflet": "^2.7.1",
         "vue2-leaflet-markercluster": "^3.1.0",
+        "vuesalize": "^0.2.0",
         "vuetify": "^2.6.10",
         "vuex": "^3.6.2"
     },
@@ -65,4 +68,4 @@
         "last 2 versions",
         "not dead"
     ]
-}
+}
diff --git a/src/App.vue b/src/App.vue
@@ -37,6 +37,7 @@ export default {
 
         getCurrentGitReleaseData(this);
         getUserMapData(this);
+        getStatistics(this);
         sendTelemetry(this);
 
         // Check again every 15 minutes
@@ -47,6 +48,7 @@ export default {
         // Check again every 15 minutes
         setInterval(() => {
             getUserMapData(this);
+            getStatistics(this);
         }, 1000 * 60 * 15);
 
         // Send again every 12 houres
@@ -116,8 +118,8 @@ async function sendTelemetry(vue) {
             }
             // send telemetry
             fetch(`${vue.$apiServerBaseURL}/telemetry`, {
-                method: 'POST',
-                headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
+                method: 'POST',      
+                headers: { Accept: 'application/json', 'Content-Type': 'application/json', 'Client': vue.$client},      
                 body: vue.$store.state.telemetryData,
             });
         } else {
@@ -133,6 +135,15 @@ async function getUserMapData(vue) {
         console.log(`getUserMapData: error (${error})`);
     }
 }
+
+async function getStatistics(vue) {
+    try {
+        vue.$store.state.statistics = await (await fetch(`${vue.$apiServerBaseURL}/statistics`)).json();
+    } catch (error) {
+        console.log(`getStatistics: error (${error})`);
+    }
+}
+
 </script>
 
 <style>

diff --git a/src/components/ButtonBMPSave.vue b/src/components/ButtonBMPSave.vue
@@ -88,7 +88,7 @@ export default {
             // send new bitmap
             fetch(`${this.$apiServerBaseURL}/SaveBitmap`, {
                 method: 'POST',
-                headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
+                headers: { Accept: 'application/json', 'Content-Type': 'application/json', 'Client': this.$client},
                 body: JSON.stringify({
                     rgb565array: this.cleanedData,
                     userName: this.userName != '' ? this.userName : 'Not specified',

diff --git a/src/components/UserMap.vue b/src/components/UserMap.vue
@@ -31,6 +31,10 @@ export default {
             type: String,
             required: true,
         },
+        mapZoom: {
+            type: Number,
+            required: false,            
+        },
     },
     components: {
         LMap,
@@ -50,7 +54,7 @@ export default {
         return {
             url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
             attribution: '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
-            zoom: 2,
+            zoom: this.mapZoom || 2,
             center: [51.505, -0.159],
             style: `height: ${this.height}`,
             icon: L.icon({

diff --git a/src/main.js b/src/main.js
@@ -10,6 +10,7 @@ import VueNativeSock from 'vue-native-websocket';
 import VueSpinners from 'vue-spinners';
 import 'leaflet/dist/leaflet.css';
 import demoJSON from '../public/demoData/demo.json';
+import VueApexCharts from 'vue-apexcharts'
 
 if (process.env.VUE_APP_PIXELIT_HOST !== undefined) {
     Vue.prototype.$pixelitHost = process.env.VUE_APP_PIXELIT_HOST;
@@ -23,6 +24,7 @@ if (process.env.VUE_APP_API_SERVER !== undefined) {
     Vue.prototype.$apiServerBaseURL = 'https://pixelit.bastelbunker.de/api';
 }
 
+Vue.prototype.$client = 'PixelIt-Webui';
 
 Vue.use(VueSpinners);
 Vue.use(VueCookies);
@@ -44,9 +46,11 @@ else {
 
 Vue.$cookies.config('10y');
 Vue.config.productionTip = false;
+Vue.component('apexchart', VueApexCharts)
 new Vue({
     router,
     store,
     vuetify,
+    VueApexCharts,
     render: (h) => h(App),
 }).$mount('#app');
diff --git a/src/router/index.js b/src/router/index.js
@@ -4,47 +4,53 @@ import Home from '../views/Home.vue'
 import Options from '../views/Options.vue'
 import SensorsButtons from '../views/SensorsButtons.vue'
 import TestArea from '../views/TestArea.vue'
+import Statistics from '../views/Statistics.vue'
 import Update from '../views/Update.vue'
 import Gallery from '../views/Gallery.vue'
 import Creator from '../views/Creator.vue'
 
 Vue.use(VueRouter)
 
 const routes = [{
-        path: '/',
-        name: 'Home',
-        component: Home
-    },
-    {
-        path: '/options',
-        name: 'Options',
-        component: Options
-    },
-    {
-        path: '/sensorsbuttons',
-        name: 'Sensors & Buttons',
-        component: SensorsButtons
-    },
-    {
-        path: '/testarea',
-        name: 'TestArea',
-        component: TestArea
-    },
-    {
-        path: '/update',
-        name: 'Update',
-        component: Update
-    },
-    {
-        path: '/gallery',
-        name: 'Gallery',
-        component: Gallery
-    },
-    {
-        path: '/creator',
-        name: 'Creator',
-        component: Creator
-    },
+    path: '/',
+    name: 'Home',
+    component: Home
+},
+{
+    path: '/options',
+    name: 'Options',
+    component: Options
+},
+{
+    path: '/sensorsbuttons',
+    name: 'Sensors & Buttons',
+    component: SensorsButtons
+},
+{
+    path: '/testarea',
+    name: 'TestArea',
+    component: TestArea
+},
+{
+    path: '/statistics',
+    name: 'Statistics',
+    component: Statistics
+},
+{
+    path: '/update',
+    name: 'Update',
+    component: Update
+},
+{
+    path: '/gallery',
+    name: 'Gallery',
+    component: Gallery
+},
+{
+    path: '/creator',
+    name: 'Creator',
+    component: Creator
+},
 ]
 
 const router = new VueRouter({

diff --git a/src/store/index.js b/src/store/index.js
@@ -16,46 +16,21 @@ export default new Vuex.Store({
             json: JSON.stringify(
                 {
                     text: {
-                        textString: 'Hello world! 😀',
+                        textString: 'Pixel it 😀',
                         scrollText: 'auto',
                         bigFont: false,
                         centerText: false,
                         scrollTextDelay: 40,
                         hexColor: '#FFFFFF',
-                        position: {
-                            x: 9,
-                            y: 1,
-                        },
-                    },
-                    bitmapAnimation: {
-                        data: [
-                            [43008, 0, 0, 0, 0, 0, 0, 0, 64170, 0, 0, 0, 0, 0, 0, 0, 64853, 0, 0, 0, 0, 64853, 0, 0, 65535, 65535, 0, 0, 0, 65535, 0, 0, 65535, 65535, 0, 65535, 0, 65535, 0, 65535, 65535, 65535, 0, 65535, 65535, 65535, 0, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535],
-                            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 64853, 0, 0, 0, 0, 0, 0, 0, 65535, 0, 0, 0, 0, 0, 0, 65535, 65535, 65535, 0, 0, 65535, 0, 0, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 0, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535],
-                            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 65535, 0, 0, 0, 65535, 0, 0, 65535, 65535, 65535, 0, 65535, 65535, 65535, 0, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535],
-                            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 65535, 0, 0, 65535, 0, 0, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535],
-                            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 65535, 0, 0, 0, 65535, 0, 0, 65535, 65535, 0, 0, 0, 65535, 65535, 0, 65535, 65535, 0, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535],
-                            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 64853, 0, 0, 0, 0, 0, 65535, 0, 65535, 0, 0, 0, 0, 65535, 65535, 0, 65535, 65535, 0, 65535, 0, 65535, 65535, 65535, 65535, 65535, 0, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535, 65535],
-                        ],
                         position: {
                             x: 0,
-                            y: 0,
+                            y: 1,
                         },
-                        animationDelay: 200,
-                        rubberbanding: false,
-                        limitLoops: 0,
                     },
                 },
-                function (k, v) {
-                    if (v instanceof Array) return JSON.stringify(v);
-                    return v;
-                },
-                2
-            )
-                .replace(/\\/g, '')
-                .replace(/"\[/g, '[')
-                .replace(/\]"/g, ']')
-                .replace(/"\{/g, '{')
-                .replace(/\}"/g, '}'),
+                null,
+                4
+            ),
             text: '€ ← ↑ → ↓ ★ 📁 📄 ♥ ↧ 🚗 😀',
             image: '[33808,0,0,0,0,0,0,33808,43680,33808,0,0,0,0,33808,43680,43680,33808,44373,44373,44373,44373,33808,43680,33808,65535,65535,44373,44373,65535,65535,33808,33808,65535,0,44373,44373,65535,0,33808,33808,65535,0,33808,33808,65535,0,33808,0,33808,33808,43680,43680,33808,33808,0,0,0,33808,33808,33808,33808,0,0],[33808,0,0,0,0,0,0,33808,43680,33808,0,0,0,0,33808,43680,43680,33808,44373,44373,44373,44373,33808,43680,33808,65535,65535,44373,44373,65535,65535,33808,33808,0,65535,44373,44373,0,65535,33808,33808,0,65535,33808,33808,0,65535,33808,0,33808,33808,43680,43680,33808,33808,0,0,0,33808,33808,33808,33808,0,0],[33808,0,0,0,0,0,0,33808,43680,33808,0,0,0,0,33808,43680,43680,33808,44373,44373,44373,44373,33808,43680,33808,65535,65535,44373,44373,65535,65535,33808,33808,65535,0,44373,44373,65535,0,33808,33808,65535,0,33808,33808,65535,0,33808,0,33808,33808,43680,43680,33808,33808,0,0,0,33808,33808,33808,33808,0,0],[33808,0,0,0,0,0,0,33808,43680,33808,0,0,0,0,33808,43680,43680,33808,44373,44373,44373,44373,33808,43680,33808,44373,44373,44373,44373,44373,44373,33808,33808,44373,44373,44373,44373,44373,44373,33808,33808,0,0,33808,33808,0,0,33808,0,33808,33808,43680,43680,33808,33808,0,0,0,33808,33808,33808,33808,0,0]',
         },
@@ -116,6 +91,11 @@ export default new Vuex.Store({
                 icon: 'mdi-cube-outline',
                 page: '/testarea',
             },
+            {
+                title: 'Statistics',
+                icon: 'mdi-chart-bar',
+                page: '/statistics',
+            },
             {
                 title: 'Update',
                 icon: 'mdi-tray-arrow-up',
@@ -471,6 +451,7 @@ export default new Vuex.Store({
         pixelCreatorPixel: {},
         telemetryData: '',
         userMapData: [],
+        statistics: {},
     },
     mutations: {
         SOCKET_ONOPEN(state, event) {

diff --git a/src/views/Options.vue b/src/views/Options.vue
@@ -75,9 +75,10 @@
                         <ColorPickerTextfield />
                         <v-switch v-model="config.clockDayLightSaving" label="Daylight saving" dense hide-details></v-switch>
                         <v-switch v-model="config.clock24Hours" label="24 Hours" persistent-hint dense hide-details></v-switch>
-                        <v-switch v-model="config.clockFatFont" label="Big clock font" persistent-hint dense hide-details></v-switch>
-                        <v-switch v-model="config.clockWithSeconds" label="Clock with seconds" :disabled="!config.clock24Hours || config.clockFatFont" dense hide-details></v-switch>
-                        <v-switch v-model="config.clockDrawWeekDays" label="Clock with Weekdays" :disabled="config.clockFatFont" dense hide-details></v-switch>
+                        <v-switch v-model="config.clockLargeFont" label="Large clock font" persistent-hint :disabled="config.clockFatFont" dense hide-details></v-switch>
+                        <v-switch v-model="config.clockFatFont" label="Bold clock font" persistent-hint :disabled="config.clockLargeFont" dense hide-details></v-switch>
+                        <v-switch v-model="config.clockWithSeconds" label="Clock with seconds" :disabled="!config.clock24Hours || config.clockFatFont || config.clockLargeFont" dense hide-details></v-switch>
+                        <v-switch v-model="config.clockDrawWeekDays" label="Clock with Weekdays" :disabled="config.clockFatFont || config.clockLargeFont" dense hide-details></v-switch>
                         <v-switch v-model="config.clockSwitchAktiv" label="Switch clock/date active" dense hide-details></v-switch>
                         <v-switch v-model="config.clockBlinkAnimated" label="Flashing time separator" dense hide-details></v-switch>
                         <v-switch v-model="config.clockDayOfWeekFirstMonday" label="Monday as start of the week" dense hide-details></v-switch>