Added options page template. Fixed top page + added monthly top users

src-electron/electron-preload.ts

@@ -71,7 +71,7 @@ const modulesAPI = {
 contextBridge.exposeInMainWorld('modulesAPI', modulesAPI)
 
 import { State as ExecutionEngineState, ExecutionLogEntry } from './handlers/engine'
-import { WeeklyTopData } from './handlers/top'
+import { TopData } from './handlers/top'
 
 declare global {
   interface Window {
@@ -135,7 +135,7 @@ declare global {
 }
 
 const topAPI = {
-  async getWeeklyTop (): Promise<WeeklyTopData> {
+  async getWeeklyTop (): Promise<TopData> {
     return await ipcRenderer.invoke('top:getWeeklyTop')
   },
 }

src-electron/handlers/top.ts

@@ -1,28 +1,33 @@
 import { ipcMain } from "electron";
 import fetch from "electron-fetch";
 
-export interface WeeklyTopData {
+export interface PeriodTopData {
+    items: Array<{
+        traffic: number,
+        user_name: string,
+        systems: Array<string>,
+        servers_count: number,
+    }>
+    start_date: string
+    end_data: string 
+}
+
+export interface TopData {
     success: boolean;
     error: string
     data: {
-        items: Array<{
-            traffic: number,
-            user_name: string,
-            systems: Array<string>,
-            servers_count: number,
-        }>
-        start_date: string
-        end_data: string 
+        week_stats: PeriodTopData
+        month_stats: PeriodTopData
     }
 }
 
-async function getWeeklyTopData(): Promise<WeeklyTopData> {
+async function getTopData(): Promise<TopData> {
     const response = await fetch("https://itarmy.com.ua/leaderboard/json/leaderboard.json")
-    return await response.json() as WeeklyTopData
+    return await response.json() as TopData
 }
 
 export function handleTop () {
     ipcMain.handle('top:getWeeklyTop', async () => {
-      return await getWeeklyTopData()
+      return await getTopData()
     })
 }

src/pages/SettingsPage.vue

@@ -1,3 +1,135 @@
 <template>
-    <div>Settings</div>
+    <a-page padding class="">
+        <q-card
+            flat
+            class="bg-transparent"
+        >
+            <q-card-section>
+                <div class="text-h5">System</div>
+                <q-separator class="q-mt-xs q-mb-xs"/>
+                <q-item class="" v-ripple clickable>
+                    <q-item-section>
+                        <q-item-label>Automatic updates</q-item-label>
+                        <q-item-label caption>Automatically update application to the newest version</q-item-label>
+                    </q-item-section>
+                    <q-item-section side top>
+                        <q-toggle color="primary" v-model="systemAutoUpdate" @update:model-value="setSystemAutoUpdate" />
+                    </q-item-section>
+                </q-item>
+
+                <q-item class="" v-ripple clickable>
+                    <q-item-section>
+                        <q-item-label>Automatic startup</q-item-label>
+                        <q-item-label caption>Automatically startup application on system startup</q-item-label>
+                    </q-item-section>
+                    <q-item-section side top>
+                        <q-toggle color="primary" v-model="systemAutoStartup" @update:model-value="setSystemAutoStartup" />
+                    </q-item-section>
+                </q-item>
+
+                <q-item class="" v-ripple clickable>
+                    <q-item-section>
+                        <q-item-label>Hide application in tray</q-item-label>
+                        <q-item-label caption>Hide application in tray instead closing it. Also when starting up, dont show the main window.</q-item-label>
+                    </q-item-section>
+                    <q-item-section side top>
+                        <q-toggle color="primary" v-model="systemHideInTray" @update:model-value="setSystemHideInTray" />
+                    </q-item-section>
+                </q-item>
+            </q-card-section>
+
+            <q-card-section>
+                <div class="text-h5">Shedule</div>
+                <q-separator class="q-mt-xs q-mb-xs"/>
+                <q-item class="" v-ripple clickable>
+                    <q-item-section>
+                        <q-item-label>Enable</q-item-label>
+                        <q-item-label caption>Enable or disable sheduler. It changes behaviour of the tool in specified hour (for example during the work you can lower resource usage)</q-item-label>
+                    </q-item-section>
+                    <q-item-section side top>
+                        <q-toggle color="primary" v-model="systemSheduleEnabled" @update:model-value="setSystemSheduleEnabled" />
+                    </q-item-section>
+                </q-item>
+                <div class="row fit q-mt-sm">
+                    <div class="col-6 q-pr-xs">
+                        <q-input outlined v-model="sheduleStartTime" mask="time" :rules="['time']" label="Start time" :disable="!systemSheduleEnabled">
+                            <template v-slot:append>
+                            <q-icon name="access_time" class="cursor-pointer">
+                                <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+                                <q-time v-model="sheduleStartTime">
+                                    <div class="row items-center justify-end">
+                                    <q-btn v-close-popup label="Close" color="primary" flat />
+                                    </div>
+                                </q-time>
+                                </q-popup-proxy>
+                            </q-icon>
+                            </template>
+                        </q-input>
+                    </div>
+
+                    <div class="col-6 q-pl-xs">
+                        <q-input outlined v-model="sheduleEndTime" mask="time" :rules="['time']" label="End time" :disable="!systemSheduleEnabled">
+                            <template v-slot:append>
+                            <q-icon name="access_time" class="cursor-pointer">
+                                <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+                                <q-time v-model="sheduleEndTime">
+                                    <div class="row items-center justify-end">
+                                    <q-btn v-close-popup label="Close" color="primary" flat />
+                                    </div>
+                                </q-time>
+                                </q-popup-proxy>
+                            </q-icon>
+                            </template>
+                        </q-input>
+                    </div>
+                </div>
+                <q-select outlined v-model="sheduleActivity" type="number" class="" :options="sheduleActivityOptions" @update:model-value="setSheduleActivity" label="Replacing activity" :disable="!systemSheduleEnabled" />
+            </q-card-section>
+
+            <q-card-section>
+                <div class="text-h5">Data</div>
+                <q-separator class="q-mt-xs q-mb-xs"/>
+                <q-btn outline label="Open data folder" class="fit q-mt-sm" />
+                <q-btn outline label="Delete modules cache" color="negative" class="fit q-mt-sm" />
+                <q-btn outline label="Delete all the data" color="negative" class="fit q-mt-sm" />
+            </q-card-section>
+
+        </q-card>
+    </a-page>
 </template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const systemAutoUpdate = ref(true)
+async function setSystemAutoUpdate() {
+    
+}
+
+const systemAutoStartup = ref(true)
+async function setSystemAutoStartup() {
+    
+}
+
+const systemHideInTray = ref(true)
+async function setSystemHideInTray() {
+    
+}
+
+const systemSheduleEnabled = ref(false)
+async function setSystemSheduleEnabled() {
+    
+}
+
+const sheduleStartTime = ref("08:00")
+const sheduleEndTime = ref("16:00")
+const sheduleActivityOptions = ref([
+    { label: "Do nothing", value: "DO_NOTHING" },
+    { label: "Minimal resource usage", value: "MINIMAL_USAGE" },
+])
+const sheduleActivity = ref("DO_NOTHING")
+async function setSheduleActivity() {
+    
+}
+
+</script>

src/pages/top/TopPage.vue

@@ -1,21 +1,52 @@
 <template>
     <q-page padding>
         <div class="text-h4 text-center text-bold q-mb-md">TOP USERS</div>
-        <q-table
-        flat
-        bordered
+        <q-tabs
+            v-model="activeTab"
             dense
-            :columns="columns"
-            :rows="top"
-            hide-pagination
-            :pagination="{rowsPerPage: 100}"
-        ></q-table>
+        >
+            <q-tab name="weekly" label="This week" />
+            <q-tab name="monthly" label="This month" />
+        </q-tabs>
+
+        <q-separator class="q-mb-sm"/>
+
+        <q-tab-panels v-model="activeTab" animated class="bg-transparent">
+            <q-tab-panel name="weekly" class="bg-transparent">
+                <q-table
+                    class="bg-transparent"
+                    flat
+
+                    dense
+                    :columns="columns"
+                    :rows="topWeek"
+                    hide-pagination
+                    :pagination="{rowsPerPage: 100}"
+                />
+            </q-tab-panel>
+            <q-tab-panel name="monthly" class="bg-transparent">
+                <q-table
+                    class="bg-transparent"
+                    flat
+
+                    dense
+                    :columns="columns"
+                    :rows="topMonth"
+                    hide-pagination
+                    :pagination="{rowsPerPage: 100}"
+                />
+            </q-tab-panel>
+        </q-tab-panels>
+
     </q-page>
 </template>
 
 <script setup lang="ts">
+import { QTableColumn } from 'quasar';
 import { ref, onMounted } from 'vue'
 
+const activeTab = ref('weekly')
+
 function humanBytesString(bytes: number, dp=1) {
   const thresh = 1000;
 
@@ -40,21 +71,33 @@ const columns = [
     {'name': "Traffic", 'field': (row) => humanBytesString(row.traffic), 'align': "left", 'label': "Traffic", 'sortable': false},
     {'name': "Name", 'field': "name", 'align': "left", 'label': "Name", 'sortable': false},
     {'name': "Servers", 'field': "servers", 'align': "left", 'label': "Servers", 'sortable': false}
-]
+] as Array<QTableColumn>
+
+const topWeek = ref([] as Array<{
+    traffic: number
+    name: string
+    servers: number
+}>)
 
-const top = ref([] as Array<{
+const topMonth = ref([] as Array<{
     traffic: number
     name: string
     servers: number
 }>)
 
 async function loadTop() {
     const weeklyTop = await window.topAPI.getWeeklyTop()
-    console.log(weeklyTop)
-    console.log(weeklyTop.data.items)
-    top.value = []
-    for (const entry of weeklyTop.data.items) {
-        top.value.push({
+    topWeek.value = []
+    for (const entry of weeklyTop.data.week_stats.items) {
+        topWeek.value.push({
+            traffic: entry.traffic,
+            name: entry.user_name,
+            servers: entry.servers_count
+        })
+    }
+    topMonth.value = []
+    for (const entry of weeklyTop.data.month_stats.items) {
+        topMonth.value.push({
             traffic: entry.traffic,
             name: entry.user_name,
             servers: entry.servers_count