Update

Fix border between client blocks
Add updateCharts computed
Remove unnecessary parameter in refresh()

src/tailwind.config.js

@@ -1,30 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-
-'use strict';
-
-module.exports = {
-  darkMode: 'selector',
-  content: ['./www/**/*.{html,js}'],
-  theme: {
-    screens: {
-      xxs: '450px',
-      xs: '576px',
-      sm: '640px',
-      md: '768px',
-      lg: '1024px',
-      xl: '1280px',
-      '2xl': '1536px',
-    },
-  },
-  plugins: [
-    function addDisabledClass({ addUtilities }) {
-      const newUtilities = {
-        '.is-disabled': {
-          opacity: '0.25',
-          cursor: 'default',
-        },
-      };
-      addUtilities(newUtilities);
-    },
-  ],
-};

webui/src/App.vue

@@ -17,7 +17,11 @@
 
           <div v-if="clients && clients.length > 0">
             <!-- Client -->
-            <div v-for="client in clients" :key="client.id">
+            <div
+              v-for="client in clients"
+              :key="client.id"
+              class="relative overflow-hidden border-b last:border-b-0 border-gray-100 dark:border-neutral-600 border-solid"
+            >
               <Client :client="client" />
             </div>
           </div>
@@ -125,7 +129,6 @@ onBeforeMount(() => {
     .getSession()
     .then((session) => {
       authenticated.value = session.authenticated;
-      // authenticated.value = false; //debug
       requiresPassword.value = session.requiresPassword;
       refresh();
       refreshInterval.value = setInterval(refresh, 1000);

webui/src/components/Client.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
+  <div v-if="client">
-    v-if="client"
-    class="relative overflow-hidden border-b last:border-b-0 border-gray-100 dark:border-neutral-600 border-solid"
-  >
     <!-- Chart -->
     <ClientCharts :client="client" />
 

webui/src/components/ClientCharts.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <!-- TODO: Individual bars are too wide -->
-    <div v-if="uiChartType && uiShowCharts" class="absolute z-0 bottom-0 left-0 right-0 h-6">
+    <div v-if="updateCharts" class="absolute z-0 bottom-0 left-0 right-0 h-6">
       <VueApexCharts
         width="100%"
         height="100%"
@@ -9,7 +9,7 @@
         :series="[{ name: 'Upload (TX)', data: client?.transferTxHistory }]"
       />
     </div>
-    <div v-if="uiChartType && uiShowCharts" class="absolute z-0 top-0 left-0 right-0 h-6">
+    <div v-if="updateCharts" class="absolute z-0 top-0 left-0 right-0 h-6">
       <VueApexCharts
         width="100%"
         height="100%"
@@ -46,7 +46,7 @@ defineProps({
 });
 
 const store = useStore();
-const { uiShowCharts, uiChartType, uiTheme, prefersDarkScheme } = storeToRefs(store);
+const { uiChartType, uiTheme, prefersDarkScheme, updateCharts } = storeToRefs(store);
 
 const darkOrLight = computed(() => {
   if (uiTheme.value === 'auto') {

webui/src/store/store.js

@@ -1,5 +1,5 @@
 import API from '@/services/api';
-import { ref, reactive } from 'vue';
+import { ref, computed } from 'vue';
 import sha256 from 'crypto-js/sha256';
 
 import { defineStore } from 'pinia';
@@ -13,7 +13,7 @@ export const useStore = defineStore('store', () => {
   const requiresPassword = ref(null);
 
   const clients = ref(null);
-  const clientsPersist = reactive({});
+  const clientsPersist = ref({});
   const clientToDelete = ref(null);
   const clientCreateShowModal = ref(null);
   const clientCreateName = ref('');
@@ -28,6 +28,10 @@ export const useStore = defineStore('store', () => {
   const uiShowCharts = ref(localStorage.getItem('uiShowCharts') === '1');
   const uiTrafficStats = ref(false);
 
+  const updateCharts = computed(() => {
+    return uiChartType.value > 0 && uiShowCharts.value;
+  });
+
   function login(e) {
     e.preventDefault();
 
@@ -88,7 +92,7 @@ export const useStore = defineStore('store', () => {
     clientToDelete.value = null;
   }
 
-  async function refresh({ updateCharts = false } = {}) {
+  async function refresh() {
     if (!authenticated.value) return;
 
     try {
@@ -107,11 +111,10 @@ export const useStore = defineStore('store', () => {
         }
 
         // Debug
-        client.transferRx = clientsPersist[client.id].transferRxPrevious + Math.random() * 1000;
+        // client.transferRx = clientsPersist[client.id].transferRxPrevious + Math.random() * 1000;
-        client.transferTx = clientsPersist[client.id].transferTxPrevious + Math.random() * 1000;
+        // client.transferTx = clientsPersist[client.id].transferTxPrevious + Math.random() * 1000;
-        updateCharts = true; // DEV TODO: Update. Get from settings
 
-        if (updateCharts) {
+        if (updateCharts.value) {
           clientsPersist[client.id].transferRxCurrent =
             client.transferRx - clientsPersist[client.id].transferRxPrevious;
           clientsPersist[client.id].transferRxPrevious = client.transferRx;
@@ -185,6 +188,7 @@ export const useStore = defineStore('store', () => {
     uiChartType,
     uiShowCharts,
     uiTrafficStats,
+    updateCharts,
     login,
     logout,
     createClient,