[FORDJ] Add Playground App

templates/playground/playground.tmpl

@@ -4,4 +4,5 @@ User : 	{{.UserName}}
 {{else}}
 User : None
 {{end}}
+<div id="playground"></div>
 {{template "base/footer" .}}

web_src/js/components/Playground.vue

@@ -0,0 +1,27 @@
+
+<template>
+    <h1>{{ message }}</h1>
+    <div>
+    <p v-if="serverData">{{ serverData.data }}</p>
+    <button @click="fetchData">Fetch</button>
+    </div>
+
+</template>
+<script>
+export default {
+    data() {
+        return {
+            message: 'Test',
+            serverData : '...'
+        };
+    },
+    methods : {
+        async fetchData() {
+            const response = await fetch("http://localhost:3333/data/");
+            this.serverData = await response.json();
+        }
+    }
+
+};
+</script>
+<style></style>

web_src/js/features/playground.js

@@ -0,0 +1,12 @@
+import {createApp} from 'vue'
+import Playground from '../components/Playground.vue'
+
+
+export function initPlayground() {
+	const el = document.getElementById('playground');
+	if (!el) return;
+
+	const View = createApp(Playground);	
+	View.mount(el)
+}
+

web_src/js/index.js

@@ -88,6 +88,8 @@ import {initDirAuto} from './modules/dirauto.js';
 import {initRepositorySearch} from './features/repo-search.js';
 import {initColorPickers} from './features/colorpicker.js';
 
+import {initPlayground} from './features/playground.js';
+
 // Init Gitea's Fomantic settings
 initGiteaFomantic();
 initDirAuto();
@@ -190,4 +192,6 @@ onDomReady(() => {
   initPdfViewer();
   initScopedAccessTokenCategories();
   initColorPickers();
+
+  initPlayground();
 });