color schemes added to frontend

This commit is contained in:
Bogdan Pilyugin 2023-09-05 21:28:18 +02:00
parent a7be57a1f2
commit 81e246ae41
12 changed files with 26 additions and 16 deletions

View File

@ -1,9 +1,8 @@
<template>
<q-card flat bordered class="card" v-show="data.eth_visible">
<q-card flat class="card" v-show="data.eth_visible">
<q-card-section>
<div class="text-h6">ETHERNET</div>
</q-card-section>
<q-card-section class="q-pt-none">
<div class="q-pa-md">
<div class="q-gutter-md q-pa-none q-pb-none">

View File

@ -1,5 +1,5 @@
<template>
<q-card flat bordered class="card">
<q-card flat class="card">
<q-card-section>
<div class="text-h6">FIRMWARE</div>
</q-card-section>

View File

@ -1,5 +1,5 @@
<template>
<q-card flat bordered class="card" v-show="data.gsm_visible">
<q-card flat class="card" v-show="data.gsm_visible">
<q-card-section>
<div class="text-h6">GPRS MODEM</div>
</q-card-section>

View File

@ -1,5 +1,5 @@
<template>
<q-card flat bordered class="card">
<q-card flat class="card">
<q-card-section>
<div class="text-h6">Home</div>
</q-card-section>

View File

@ -1,5 +1,5 @@
<template>
<q-card flat bordered class="card" v-show="data.lora_visible">
<q-card flat class="card" v-show="data.lora_visible">
<q-card-section>
<div class="text-h6">LoRaWAN MODEM</div>
</q-card-section>

View File

@ -1,5 +1,5 @@
<template>
<q-card flat bordered class="card">
<q-card flat class="card">
<q-card-section>
<div class="text-h6">MQTT 1</div>
</q-card-section>

View File

@ -1,5 +1,5 @@
<template>
<q-card flat bordered class="card">
<q-card flat class="card">
<q-card-section>
<div class="text-h6">MQTT 2</div>
</q-card-section>

View File

@ -1,5 +1,5 @@
<template>
<q-card flat bordered class="card" v-show="data.mbtcp_visible">
<q-card flat class="card" v-show="data.mbtcp_visible">
<q-card-section>
<div class="text-h6">MODBUS</div>
</q-card-section>

View File

@ -1,5 +1,5 @@
<template>
<q-card flat bordered class="card">
<q-card flat class="card">
<q-card-section>
<div class="text-h6">SNTP</div>
</q-card-section>

View File

@ -1,5 +1,5 @@
<template>
<q-card flat bordered class="card">
<q-card flat class="card">
<q-card-section>
<div class="text-h6">INFO</div>
</q-card-section>

View File

@ -1,5 +1,5 @@
<template>
<q-card flat bordered class="card">
<q-card flat class="card">
<q-card-section>
<div class="text-h6">SYSTEM</div>
</q-card-section>
@ -9,6 +9,8 @@
<q-input v-model="data.net_bios_name" label="Device bios name" />
<q-input v-model="data.sys_name" label="User name" />
<q-input type="password" v-model="data.sys_pass" label="User password" />
<q-select v-model="colormodestr" :options="colorschemes" :map-options="true" :emit-value="true"
label="Color scheme"></q-select>
<div>Device model: {{ data.model_name }}</div>
<div>Hardware revision: {{ data.hw_rev }}</div>
<div>Firmware version: {{ data.fw_rev }}</div>
@ -41,7 +43,7 @@
</style>
<script setup>
import { reactive } from "vue";
import { reactive, computed } from "vue";
import { PostData } from "components/webguicomp/network"
import CardActions from "components/webguicomp/CardActions.vue"
@ -49,9 +51,17 @@ defineOptions({
name: 'SystemCard'
})
const init = {
net_bios_name: "", sys_name: "", sys_pass: "",
net_bios_name: "", sys_name: "", sys_pass: "", color_scheme: 1,
model_name: "", hw_rev: 0, fw_rev: "", idf_rev: "", build_date: "", ser_num: ""
}
const colorschemes = [
{ label: 'Light', value: '1' },
{ label: 'Dark', value: '2' }];
const colormodestr = computed({
get() { return (data.color_scheme).toString() },
set(val) { data.color_scheme = Number(val); }
})
const data = reactive(init);
PostData(data, 2, 0, null);
</script>

View File

@ -1,5 +1,5 @@
<template>
<q-card flat bordered class="card">
<q-card flat class="card">
<q-card-section>
<div class="text-h6">WiFi</div>
</q-card-section>
@ -9,7 +9,8 @@
<div class="q-gutter-md q-pa-none q-pb-none">
<q-toggle v-model="data.wifi_enab" label="WiFi enable" />
<q-btn label="Scan WiFi" @click="OpenScanDialog()"></q-btn>
<q-select v-model="wifimodestr" :options="wifimodes" :map-options="true" :emit-value="true" label="WiFi mode"></q-select>
<q-select v-model="wifimodestr" :options="wifimodes" :map-options="true" :emit-value="true"
label="WiFi mode"></q-select>
<q-input type="number" v-model="wifipwr" label="Max power, dBm" />
<q-input v-model="data.wifi_ap_ssid" label="WiFi network name(AP):" />
<q-input type="password" v-model="data.wifi_ap_key" label="WiFi network key(AP):" />