Skip to content

Commit 5111e64

Browse files
wickedyodawickedyoda
committed
Split application form and lazy-load frontend routes
1 parent 5c40925 commit 5111e64

4 files changed

Lines changed: 436 additions & 393 deletions

File tree

‎frontend/src/App.vue‎

Lines changed: 16 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -63,34 +63,27 @@ export default {
6363
methods: {
6464
...mapActions({
6565
authCheck: "auth/AUTH_CHECK"
66-
})
66+
}),
67+
applyStoredTheme() {
68+
const dark_theme = localStorage.getItem("dark_theme");
69+
const theme = JSON.parse(localStorage.getItem("theme"));
70+
71+
if (dark_theme == "false") {
72+
this.$vuetify.theme.dark = false;
73+
} else if (dark_theme == "true") {
74+
this.$vuetify.theme.dark = true;
75+
}
76+
if (theme) {
77+
this.$vuetify.theme.themes = theme;
78+
}
79+
}
6780
},
6881
created() {
6982
this.authCheck();
70-
const dark_theme = localStorage.getItem("dark_theme");
71-
const theme = JSON.parse(localStorage.getItem("theme"));
72-
73-
if (dark_theme == "false") {
74-
this.$vuetify.theme.dark = false;
75-
} else if (dark_theme == "true") {
76-
this.$vuetify.theme.dark = true;
77-
}
78-
if (theme) {
79-
this.$vuetify.theme.themes = theme;
80-
}
83+
this.applyStoredTheme();
8184
},
8285
mounted() {
83-
const dark_theme = localStorage.getItem("dark_theme");
84-
const theme = JSON.parse(localStorage.getItem("theme"));
85-
86-
if (dark_theme == "false") {
87-
this.$vuetify.theme.dark = false;
88-
} else if (dark_theme == "true") {
89-
this.$vuetify.theme.dark = true;
90-
}
91-
if (theme) {
92-
this.$vuetify.theme.themes = theme;
93-
}
86+
this.applyStoredTheme();
9487
}
9588
};
9689
</script>

‎frontend/src/components/applications/ApplicationsForm.vue‎

Lines changed: 4 additions & 317 deletions
Original file line numberDiff line numberDiff line change
@@ -453,316 +453,7 @@
453453
</v-stepper-content>
454454
</v-stepper-items>
455455
</v-stepper>
456-
<v-card color="primary" class="mt-5">
457-
<v-card-title>
458-
Advanced
459-
</v-card-title>
460-
<v-expansion-panels flat accordion multiple focusable>
461-
<v-expansion-panel>
462-
<v-expansion-panel-header color="foreground">
463-
<v-row no-gutters>
464-
<v-col cols="2">Command</v-col>
465-
<v-col cols="4" class="text--secondary">
466-
(Container Commands)
467-
</v-col>
468-
</v-row>
469-
</v-expansion-panel-header>
470-
<v-expansion-panel-content color="foreground" class="mt-5">
471-
<form>
472-
<transition-group
473-
name="slide"
474-
enter-active-class="animated fadeInLeft fast-anim"
475-
leave-active-class="animated fadeOutLeft fast-anim"
476-
>
477-
<v-row v-for="(item, index) in form.command" :key="index">
478-
<v-col>
479-
<ValidationProvider
480-
name="Command"
481-
rules="required"
482-
v-slot="{ errors, valid }"
483-
>
484-
<v-text-field
485-
:label="'Command ' + index + ':'"
486-
v-model="form.command[index]"
487-
:error-messages="errors"
488-
:success="valid"
489-
required
490-
></v-text-field>
491-
</ValidationProvider>
492-
</v-col>
493-
<v-col class="d-flex justify-end" cols="1">
494-
<v-btn
495-
icon
496-
class="align-self-center"
497-
@click="removeCommand(index)"
498-
>
499-
<v-icon>mdi-minus</v-icon>
500-
</v-btn>
501-
</v-col>
502-
</v-row>
503-
</transition-group>
504-
<v-row>
505-
<v-col cols="12" class="d-flex justify-end">
506-
<v-btn icon class="align-self-center" @click="addCommand">
507-
<v-icon>mdi-plus</v-icon>
508-
</v-btn>
509-
</v-col>
510-
</v-row>
511-
</form>
512-
</v-expansion-panel-content>
513-
</v-expansion-panel>
514-
<v-expansion-panel>
515-
<v-expansion-panel-header color="foreground">
516-
<v-row no-gutters>
517-
<v-col cols="2">Devices</v-col>
518-
<v-col cols="4" class="text--secondary">
519-
(Passthrough Devices)
520-
</v-col>
521-
</v-row>
522-
</v-expansion-panel-header>
523-
<v-expansion-panel-content color="foreground">
524-
<form>
525-
<transition-group
526-
name="slide"
527-
enter-active-class="animated fadeInLeft fast-anim"
528-
leave-active-class="animated fadeOutLeft fast-anim"
529-
>
530-
<v-row v-for="(item, index) in form.devices" :key="index">
531-
<v-col>
532-
<ValidationProvider
533-
name="Container"
534-
rules="required"
535-
v-slot="{ errors, valid }"
536-
>
537-
<v-text-field
538-
label="Container"
539-
v-model="item['container']"
540-
:error-messages="errors"
541-
:success="valid"
542-
required
543-
></v-text-field>
544-
</ValidationProvider>
545-
</v-col>
546-
<v-col>
547-
<ValidationProvider
548-
name="Host"
549-
rules="required"
550-
v-slot="{ errors, valid }"
551-
>
552-
<v-text-field
553-
label="Host"
554-
v-model="item['host']"
555-
:error-messages="errors"
556-
:success="valid"
557-
required
558-
></v-text-field>
559-
</ValidationProvider>
560-
</v-col>
561-
<v-col class="d-flex justify-end" cols="1">
562-
<v-btn
563-
icon
564-
class="align-self-center"
565-
@click="removeDevices(index)"
566-
>
567-
<v-icon>mdi-minus</v-icon>
568-
</v-btn>
569-
</v-col>
570-
</v-row>
571-
</transition-group>
572-
<v-row>
573-
<v-col cols="12" class="d-flex justify-end">
574-
<v-btn icon class="align-self-center" @click="addDevices">
575-
<v-icon>mdi-plus</v-icon>
576-
</v-btn>
577-
</v-col>
578-
</v-row>
579-
</form>
580-
</v-expansion-panel-content>
581-
</v-expansion-panel>
582-
<v-expansion-panel>
583-
<v-expansion-panel-header color="foreground">
584-
<v-row no-gutters>
585-
<v-col cols="2">Labels</v-col>
586-
<v-col cols="4" class="text--secondary">
587-
(Container Labels)
588-
</v-col>
589-
</v-row>
590-
</v-expansion-panel-header>
591-
<v-expansion-panel-content color="foreground">
592-
<form>
593-
<transition-group
594-
name="slide"
595-
enter-active-class="animated fadeInLeft fast-anim"
596-
leave-active-class="animated fadeOutLeft fast-anim"
597-
>
598-
<v-row v-for="(item, index) in form.labels" :key="index">
599-
<v-col>
600-
<ValidationProvider
601-
name="Label"
602-
rules="required"
603-
v-slot="{ errors, valid }"
604-
>
605-
<v-text-field
606-
label="Label"
607-
v-model="item['label']"
608-
:error-messages="errors"
609-
:success="valid"
610-
required
611-
></v-text-field>
612-
</ValidationProvider>
613-
</v-col>
614-
<v-col>
615-
<ValidationProvider
616-
name="Value"
617-
rules=""
618-
v-slot="{ errors, valid }"
619-
>
620-
<v-text-field
621-
label="Value"
622-
v-model="item['value']"
623-
:error-messages="errors"
624-
:success="valid"
625-
></v-text-field>
626-
</ValidationProvider>
627-
</v-col>
628-
<v-col class="d-flex justify-end" cols="1">
629-
<v-btn
630-
icon
631-
class="align-self-center"
632-
@click="removeLabels(index)"
633-
>
634-
<v-icon>mdi-minus</v-icon>
635-
</v-btn>
636-
</v-col>
637-
</v-row>
638-
</transition-group>
639-
<v-row>
640-
<v-col cols="12" class="d-flex justify-end">
641-
<v-btn icon class="align-self-center" @click="addLabels">
642-
<v-icon>mdi-plus</v-icon>
643-
</v-btn>
644-
</v-col>
645-
</v-row>
646-
</form>
647-
</v-expansion-panel-content>
648-
</v-expansion-panel>
649-
<v-expansion-panel>
650-
<v-expansion-panel-header color="foreground">
651-
<v-row no-gutters>
652-
<v-col cols="2">Sysctls</v-col>
653-
<v-col cols="4" class="text--secondary"> (Kernel Options) </v-col>
654-
</v-row>
655-
</v-expansion-panel-header>
656-
<v-expansion-panel-content color="foreground">
657-
<form>
658-
<transition-group
659-
name="slide"
660-
enter-active-class="animated fadeInLeft fast-anim"
661-
leave-active-class="animated fadeOutLeft fast-anim"
662-
>
663-
<v-row v-for="(item, index) in form.sysctls" :key="index">
664-
<v-col>
665-
<ValidationProvider
666-
name="Name"
667-
rules="required"
668-
v-slot="{ errors, valid }"
669-
>
670-
<v-text-field
671-
label="Name"
672-
v-model="item['name']"
673-
:error-messages="errors"
674-
:success="valid"
675-
required
676-
></v-text-field>
677-
</ValidationProvider>
678-
</v-col>
679-
<v-col>
680-
<ValidationProvider
681-
name="Value"
682-
rules="required"
683-
v-slot="{ errors, valid }"
684-
>
685-
<v-text-field
686-
label="Value"
687-
v-model="item['value']"
688-
:error-messages="errors"
689-
:success="valid"
690-
required
691-
></v-text-field>
692-
</ValidationProvider>
693-
</v-col>
694-
<v-col class="d-flex justify-end" cols="1">
695-
<v-btn
696-
icon
697-
class="align-self-center"
698-
@click="removeSysctls(index)"
699-
>
700-
<v-icon>mdi-minus</v-icon>
701-
</v-btn>
702-
</v-col>
703-
</v-row>
704-
</transition-group>
705-
<v-row>
706-
<v-col cols="12" class="d-flex justify-end">
707-
<v-btn icon class="align-self-center" @click="addSysctls">
708-
<v-icon>mdi-plus</v-icon>
709-
</v-btn>
710-
</v-col>
711-
</v-row>
712-
</form>
713-
</v-expansion-panel-content>
714-
</v-expansion-panel>
715-
<v-expansion-panel>
716-
<v-expansion-panel-header color="foreground">
717-
<v-row no-gutters>
718-
<v-col cols="2">Capabilities</v-col>
719-
<v-col cols="4" class="text--secondary">
720-
(Special Permissions/Capabilities)
721-
</v-col>
722-
</v-row></v-expansion-panel-header
723-
>
724-
<v-expansion-panel-content color="foreground">
725-
<form>
726-
<v-select
727-
v-model="form['cap_add']"
728-
:items="cap_options"
729-
label="Add Capabilities"
730-
multiple
731-
hide-selected
732-
clearable
733-
chips
734-
deletable-chips
735-
/>
736-
</form>
737-
</v-expansion-panel-content>
738-
</v-expansion-panel>
739-
<v-expansion-panel>
740-
<v-expansion-panel-header color="foreground">
741-
<v-row no-gutters>
742-
<v-col cols="2">Runtime</v-col>
743-
<v-col cols="4" class="text--secondary">
744-
(CPU/MEM Limits)
745-
</v-col>
746-
</v-row></v-expansion-panel-header
747-
>
748-
<v-expansion-panel-content color="foreground">
749-
<form>
750-
<v-text-field
751-
v-model="form['cpus']"
752-
label="CPU Cores:"
753-
clearable
754-
/>
755-
<v-text-field
756-
v-model="form['mem_limit']"
757-
label="Memory Limit:"
758-
placeholder="(1000b,100k,10m,1g)"
759-
clearable
760-
/>
761-
</form>
762-
</v-expansion-panel-content>
763-
</v-expansion-panel>
764-
</v-expansion-panels>
765-
</v-card>
456+
<ApplicationsFormAdvanced :form="form" :cap-options="cap_options" />
766457
<v-dialog v-model="editDialog" max-width="290">
767458
<v-card>
768459
<v-card-title class="headline" style="word-break: break-all;">
@@ -798,11 +489,13 @@
798489
import axios from "axios";
799490
import { mapActions, mapMutations, mapState } from "vuex";
800491
import { ValidationObserver, ValidationProvider } from "vee-validate";
492+
import ApplicationsFormAdvanced from "./ApplicationsFormAdvanced.vue";
801493
802494
export default {
803495
components: {
804496
ValidationProvider,
805-
ValidationObserver
497+
ValidationObserver,
498+
ApplicationsFormAdvanced
806499
},
807500
data() {
808501
return {
@@ -914,12 +607,6 @@ export default {
914607
removeSysctls(index) {
915608
this.form.sysctls.splice(index, 1);
916609
},
917-
addCap_add() {
918-
this.form.cap_add.push("");
919-
},
920-
removeCap_add(index) {
921-
this.form.cap_add.splice(index, 1);
922-
},
923610
transform_ports(ports, app) {
924611
let portlist = [];
925612
for (let port in ports) {

0 commit comments

Comments
 (0)