Fetch widget data from backend

cmd/ui/front/package.json

@@ -9,6 +9,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.32",
     "@fortawesome/free-solid-svg-icons": "^5.15.1",
     "@fortawesome/vue-fontawesome": "^3.0.0-3",
+    "axios": "^0.21.1",
     "bulma": "^0.9.1",
     "bulmaswatch": "^0.8.1",
     "vue": "^3.0.4"

cmd/ui/front/src/App.vue

@@ -1,5 +1,9 @@
 <template lang="pug">
-HelloWorld(msg="Hello Vue 3.0 + Vite")
+Suspense
+    template(#default)
+        HelloWorld(msg="Hello Vue 3.0 + Vite")
+    template(#fallback)
+        h1 Loading
 </template>
 
 <script>

cmd/ui/front/src/components/HelloWorld.vue

@@ -1,75 +1,32 @@
 <template lang="pug">
 .container
     .tile.is-ancestor(v-for="row in widgets")
-        .tile.is-parent(v-for="widget in row")
-            Widget(:widget="widget")
+        .tile.is-parent(v-for="(widget, path) in row")
+            Widget(:widget="widget" :path="path")
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, reactive, ref } from "vue";
+import { computed, defineComponent, provide, reactive, ref } from "vue";
+import axios from "axios";
 import WidgetComponent from "./Widget.vue"
 import { Widget } from "../types/widget";
 
+type WidgetRow = { [path: string]: Widget };
+
 export default defineComponent({
     components: {
         Widget: WidgetComponent
     },
     setup() {
-        const widgets = reactive<Widget[][]>([
-            [
-                {
-                    title: "What's your name?",
-                    type: "text",
-                    value: "John Doe",
-                    placeholder: "Nice"
-                },
-                {
-                    title: "What's your story?",
-                    type: "text",
-                    value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel venenatis nisl. Maecenas feugiat enim in erat mattis, non commodo ante porta.",
-                    placeholder: "Nice",
-                    big: true
-                },
-                {
-                    title: "Lots of options!",
-                    type: "options",
-                    description: "Nice",
-                    options: [ "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten" ],
-                    value: 5
-                },
-            ],
-            [
-                {
-                    title: "I'm a parent",
-                    type: "group",
-                    children: [
-                        {
-                            title: "Just a few options",
-                            type: "options",
-                            description: "Nice",
-                            options: [ "One", "Two", "Three" ],
-                            value: 0
-                        },
-                        {
-                            title: "I have a couple children",
-                            type: "group",
-                            children: [
-                                {
-                                    title: "On or off?",
-                                    type: "onoff",
-                                    value: true
-                                },
-                                {
-                                    title: "How about now?",
-                                    type: "onoff",
-                                    value: false
-                                },
-                            ]
-                        },
-                    ]
-                }
-            ]
-        ])
+        const widgets = ref<WidgetRow[]>()
+        const data = ref<Record<string, any>>()
+        
+        axios.get("/api/data").then(resp => {
+            widgets.value = resp.data.widgets;
+            data.value = reactive(resp.data.data);
+        })
+        
+        provide("data", data)
 
         return { widgets }
     }

cmd/ui/front/src/components/Widget.vue

@@ -18,7 +18,7 @@
 
     .card-content.is-flex-grow-1.is-flex.is-justify-content-center.is-align-items-center(v-else)
         //- On/Off button
-        OnOff(v-if="widget.type == 'onoff'" name="nice" v-model="widget.value" @update:modelValue="save")
+        OnOff(v-if="widget.type == 'onoff'" name="nice" v-model="value" @update:modelValue="save")
 
         //- Options
         .options-group(v-else-if="widget.type == 'options'")
@@ -29,39 +29,54 @@
 
             //- Many options - flex layout
             .many.is-flex.is-flex-wrap-wrap.is-justify-content-space-around(v-else)
-                button.button.mb-1(v-for="(opt, i) in widget.options" :class="{'is-info': i == widget.value}" @click="setValue(i)") {{opt}}
+                button.button.mb-1(v-for="(opt, i) in widget.options" :class="{'is-info': i == value}" @click="setValue(i)") {{opt}}
 
         //- Text fields (big and small)
         .field.has-addons(v-else-if="widget.type == 'text'" :class="{'w-100': widget.big}")
             //- Small field
-            input.input.mr-2(v-if="!widget.big" type="text" :placeholder="widget.placeholder" v-model="widget.value" @focusout="save")
+            input.input.mr-2(v-if="!widget.big" type="text" :placeholder="widget.placeholder" v-model="value" @focusout="save")
 
             //- Big field
-            textarea.input.mr-2.h-100.w-100(v-else v-model="widget.value" :placeholder="widget.placeholder" @focusout="save")
+            textarea.input.mr-2.h-100.w-100(v-else v-model="value" :placeholder="widget.placeholder" @focusout="save")
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import axios from 'axios'
+import { computed, defineComponent, inject, Ref } from 'vue'
 import OnOff from "./OnOff.vue"
 
 export default defineComponent({
     components: {
         OnOff
     },
     props: {
-        widget: Object
+        widget: Object,
+        path: String,
     },
-    setup(props) {
+    setup(props, { emit }) {
+        var data = inject<Ref<Record<string, any>>>("data")
+
+        const value = computed({
+            get: () => data.value[props.path],
+            set: val => data.value[props.path] = val
+        })
+        
         async function save() {
-            console.log("save")
+            console.log(value.value, data);
+            
+            await axios({
+                method: "post",
+                url: `/api/widget/${props.path}/value`,
+                data: JSON.stringify(value.value)
+            })
         }
 
         async function setValue(val: any) {
-            props.widget.value = val;
+            value.value = val
             await save();
         }
         
-        return { save, setValue }
+        return { save, setValue, value }
     }
 })
 </script>

cmd/ui/front/vite.config.js

@@ -1,6 +1,6 @@
 module.exports = {
     outDir: "../dist",
     proxy: {
-        "/api/data": "http://localhost:8080/api/data"
+        "/api": "http://localhost:8080"
     }
 }

cmd/ui/main.go

@@ -52,6 +52,16 @@ func main() {
 
 		ctx.JSON(resp)
 	})
+	app.Post("/api/widget/:path/value", func(ctx iris.Context) {
+		path := ctx.Params().Get("path")
+		body, err := ctx.GetBody()
+		if err != nil {
+			ctx.StatusCode(iris.StatusBadRequest)
+			return
+		}
+
+		hat.Set(string(body), client.SplitPath(path)...)
+	})
 
 	app.HandleDir("/", "./dist", iris.DirOptions{
 		Asset:      GzipAsset,

cmd/ui/widget/widget.go

@@ -33,7 +33,7 @@ type Widget struct {
 	Big         bool   `json:"big,omitempty" yaml:"big"`
 
 	// Group widget
-	Children []*Widget `json:"children,omitempty" yaml:"children"`
+	Children map[string]*Widget `json:"children,omitempty" yaml:"children"`
 
 	// Options widget
 	Options    []string `json:"options,omitempty" yaml:"options"`