userbogd/webguicomp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CRON frontend implemented

Browse Source
This commit is contained in:
Bogdan Pilyugin 2023-10-20 14:22:40 +02:00
parent 5f34a17f8b
commit e3409c38fb
1 changed files with 76 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
cards/CronCard.vue
View File

@ -3,18 +3,20 @@
<q-card-section> <q-card-section>
<div class="text-h6">CRON Scheduler</div> <div class="text-h6">CRON Scheduler</div>
</q-card-section> </q-card-section>
<q-scroll-area style="height: 600px;"> <q-scroll-area :style="{ height: scrollHeight + 'px' }">
<q-card-section class="q-pt-none"> <q-card-section class="q-pt-none">
<div class="q-pa-md"> <div class="q-pa-md">
<div class="q-gutter-md q-pa-none q-pb-none"> <div class="q-gutter-md q-pa-none q-pb-none">
<q-card flat bordered class="card" v-for="cronrec in data.cronrecs" :key="cronrec.num"
<q-card flat bordered class="card" v-for="cronrec in data.cronrecs" :key="cronrec.num" v-show="!cronrec.del"> v-show="!cronrec.del">
<q-card-section> <q-card-section>
<div class="text-h7">Task {{ cronrec.num }}</div> <div class="text-h6">Task {{ cronrec.num }}</div>
</q-card-section> </q-card-section>
<q-card-section class="q-pt-none"> <q-card-section class="q-pt-none">
<div><q-toggle v-model="cronrec.enab" :true-value="1" :false-value="0">Task enabled</q-toggle></div> <div><q-toggle v-model="cronrec.enab" :true-value=1 :false-value=0>Task enabled</q-toggle>
<div><q-toggle v-model="cronrec.prev" :true-value="1" :false-value="0">Trigger previous</q-toggle></div> </div>
<div><q-toggle v-model="cronrec.prev" :true-value=1 :false-value=0>Trigger
previous</q-toggle></div>
<q-input v-model="cronrec.name" label="Task name" /> <q-input v-model="cronrec.name" label="Task name" />
<q-input v-model="cronrec.cron" label="CRON expression" /> <q-input v-model="cronrec.cron" label="CRON expression" />
<q-input v-model="cronrec.exec" label="Execute command" /> <q-input v-model="cronrec.exec" label="Execute command" />
@ -24,13 +26,12 @@
<q-btn class="btn" flat v-on:click="DeleteCronRecord(cronrec.num)">Delete</q-btn> <q-btn class="btn" flat v-on:click="DeleteCronRecord(cronrec.num)">Delete</q-btn>
</q-card-actions> </q-card-actions>
</q-card> </q-card>
</div> </div>
</div> </div>
</q-card-section> </q-card-section>
</q-scroll-area> </q-scroll-area>
<q-card-actions> <q-card-actions>
<div class="q-pa-md"> <div>
<q-btn class="btn" flat v-on:click="AddCronRecord">Add new</q-btn> <q-btn class="btn" flat v-on:click="AddCronRecord">Add new</q-btn>
</div> </div>
</q-card-actions> </q-card-actions>
@ -40,49 +41,65 @@
<script setup> <script setup>
import { reactive, computed } from "vue"; import { reactive, computed } from "vue";
import { PostData } from "components/webguicomp/network"; import { PostData } from "components/webguicomp/network";
import CardActions from "components/webguicomp/CardActions.vue" import { ShowDelayDialog } from "components/webguicomp/helpers";
const init = { const init = {
cronrecs: [ cronrecs: [
{num: 1, del: 1, enab: 1, prev: 0, name: "defName", cron: "* * * * * *", exec: "SYSTEM,TEST,ARGUMENTS"}, { num: 1, del: 1, enab: 1, prev: 0, name: "", cron: "", exec: "" },
{num: 2, del: 1, enab: 1, prev: 0, name: "defName", cron: "* * * * * *", exec: "SYSTEM,TEST,ARGUMENTS"}, { num: 2, del: 1, enab: 1, prev: 0, name: "", cron: "", exec: "" },
{num: 3, del: 1, enab: 1, prev: 0, name: "defName", cron: "* * * * * *", exec: "SYSTEM,TEST,ARGUMENTS"}, { num: 3, del: 1, enab: 1, prev: 0, name: "", cron: "", exec: "" },
{num: 4, del: 1, enab: 1, prev: 0, name: "defName", cron: "* * * * * *", exec: "SYSTEM,TEST,ARGUMENTS"}, { num: 4, del: 1, enab: 1, prev: 0, name: "", cron: "", exec: "" },
{num: 5, del: 1, enab: 1, prev: 0, name: "defName", cron: "* * * * * *", exec: "SYSTEM,TEST,ARGUMENTS"}, { num: 5, del: 1, enab: 1, prev: 0, name: "", cron: "", exec: "" },
{num: 6, del: 1, enab: 1, prev: 0, name: "defName", cron: "* * * * * *", exec: "SYSTEM,TEST,ARGUMENTS"}, { num: 6, del: 1, enab: 1, prev: 0, name: "", cron: "", exec: "" },
{num: 7, del: 1, enab: 1, prev: 0, name: "defName", cron: "* * * * * *", exec: "SYSTEM,TEST,ARGUMENTS"}, { num: 7, del: 1, enab: 1, prev: 0, name: "", cron: "", exec: "" },
{num: 8, del: 1, enab: 1, prev: 0, name: "defName", cron: "* * * * * *", exec: "SYSTEM,TEST,ARGUMENTS"}, { num: 8, del: 1, enab: 1, prev: 0, name: "", cron: "", exec: "" },
{num: 9, del: 1, enab: 1, prev: 0, name: "defName", cron: "* * * * * *", exec: "SYSTEM,TEST,ARGUMENTS"}, { num: 9, del: 1, enab: 1, prev: 0, name: "", cron: "", exec: "" },
{num: 10, del: 1, enab: 1, prev: 0, name: "defName", cron: "* * * * * *", exec: "SYSTEM,TEST,ARGUMENTS"}, { num: 10, del: 1, enab: 1, prev: 0, name: "", cron: "", exec: "" },
{num: 11, del: 1, enab: 1, prev: 0, name: "defName", cron: "* * * * * *", exec: "SYSTEM,TEST,ARGUMENTS"}, { num: 11, del: 1, enab: 1, prev: 0, name: "", cron: "", exec: "" },
{num: 12, del: 1, enab: 1, prev: 0, name: "defName", cron: "* * * * * *", exec: "SYSTEM,TEST,ARGUMENTS"}, { num: 12, del: 1, enab: 1, prev: 0, name: "", cron: "", exec: "" },
{num: 13, del: 1, enab: 1, prev: 0, name: "defName", cron: "* * * * * *", exec: "SYSTEM,TEST,ARGUMENTS"}, { num: 13, del: 1, enab: 1, prev: 0, name: "", cron: "", exec: "" },
{num: 14, del: 1, enab: 1, prev: 0, name: "defName", cron: "* * * * * *", exec: "SYSTEM,TEST,ARGUMENTS"}, { num: 14, del: 1, enab: 1, prev: 0, name: "", cron: "", exec: "" },
{num: 15, del: 1, enab: 1, prev: 0, name: "defName", cron: "* * * * * *", exec: "SYSTEM,TEST,ARGUMENTS"}, { num: 15, del: 1, enab: 1, prev: 0, name: "", cron: "", exec: "" },
{num: 16, del: 1, enab: 1, prev: 0, name: "defName", cron: "* * * * * *", exec: "SYSTEM,TEST,ARGUMENTS"} { num: 16, del: 1, enab: 1, prev: 0, name: "", cron: "", exec: "" }
] ]
} }
function ApplyCronRecord(num) function ApplyCronRecord(num) {
{ PostData({
cronrecs: [{
PostData({cronrecs:[{ num: data.cronrecs[num - 1].num,
num: data.cronrecs[num-1].num, del: data.cronrecs[num - 1].del,
del: data.cronrecs[num-1].del, enab: data.cronrecs[num - 1].enab,
enab: data.cronrecs[num-1].del, prev: data.cronrecs[num - 1].prev,
prev: data.cronrecs[num-1].prev, name: data.cronrecs[num - 1].name,
name: data.cronrecs[num-1].name, cron: data.cronrecs[num - 1].cron,
cron: data.cronrecs[num-1].cron, exec: data.cronrecs[num - 1].exec
exec: data.cronrecs[num-1].exec}]}, 1, 1, null); }]
}, 1, 1, ShowDelayDialog('Data applying...', 250, null));
} }
function DeleteCronRecord(num)
{
function DeleteCronRecord(num) {
data.cronrecs[num - 1].del = 1;
ApplyCronRecord(num);
} }
function AddCronRecord()
{
function AddCronRecord() {
for (let i = 0; i < 16; i++) {
if (data.cronrecs[i].del == 1) {
data.cronrecs[i].del = 0;
data.cronrecs[i].enab = 0;
ApplyCronRecord(i + 1);
break;
}
}
} }
const scrollHeight = computed(() => {
let num = 0;
for (let i = 0; i < 16; i++) if (!data.cronrecs[i].del) ++num;
return (num <= 2) ? num * 400 : 800;
});
const data = reactive(init); const data = reactive(init);
PostData(data, 2, 0, null); PostData(data, 2, 0, null);
</script> </script>