using Vuetify with SpiderBasic
before I explain a lot that nobody is interested in: If you have any questions, please ask.
Code: Select all
EnableExplicit
Global Vue
Procedure SetData(DataName.s, DataValue.s)
! v_vue.$data[v_dataname] = v_datavalue;
EndProcedure
Procedure.s GetTemplate()
Protected Template.s = "<v-app>" +
" <v-navigation-drawer v-model='drawer' app>" +
" <v-list>" +
" <v-list-item v-for='[icon, text] in links' :key='icon' link> " +
" <v-list-item-icon>" +
" <v-icon>{{ icon }}</v-icon>" +
" </v-list-item-icon>" +
" <v-list-item-content>" +
" <v-list-item-title>{{ text }}</v-list-item-title>" +
" </v-list-item-content>" +
" </v-list-item>" +
" </v-list>" +
" </v-navigation-drawer>" +
" <v-app-bar app>" +
" <v-app-bar-nav-icon @click='drawer = !drawer'></v-app-bar-nav-icon>" +
" <v-toolbar-title>{{ApplicationTitle}}</v-toolbar-title>" +
" </v-app-bar>" +
" <v-main>" +
" <v-container>" +
" <h1>Current time: {{CurrentTime}}</h1>" +
" </v-container>" +
" </v-main>" +
" </v-app>"
ProcedureReturn Template
EndProcedure
Procedure TimerEvent()
SetData("CurrentTime", FormatDate("%hh:%ii:%ss", Date()))
EndProcedure
Procedure Main()
! $("body").append("<div id='app'></div>");
! v_vue = new Vue({
! el: '#app',
! template: f_gettemplate(),
! vuetify: new Vuetify(),
! data: () => ({
! ApplicationTitle: '',
! drawer: null,
! links: [],
! CurrentTime: '00:00:00',
! }),
! })
SetData("ApplicationTitle", "Vuetify with SpiderBasic")
! v_vue.$data.links = [
! ['mdi-inbox-arrow-down', 'Inbox'],
! ['mdi-send', 'Send'],
! ['mdi-delete', 'Trash'],
! ['mdi-alert-octagon', 'Spam'],
! ];
OpenWindow(0, 0, 0, 0, 0, "", #PB_Window_Invisible)
AddWindowTimer(0, 0, 1000)
BindEvent(#PB_Event_Timer, @TimerEvent())
TimerEvent()
EndProcedure
Procedure Init(Callback)
! define = null;
! $("<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900' rel='stylesheet' />").appendTo("head");
! $("<link href='https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css' rel='stylesheet' />").appendTo("head");
! $("<link href='https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css' rel='stylesheet' />").appendTo("head");
! $.ajax({
! url: "https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js",
! dataType: "script",
! })
! .done(function() {
! $.ajax({
! url: "https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js",
! dataType: "script",
! })
! .done(function() { v_callback(); })
! .fail(function() {})
! })
! .fail(function() {})
EndProcedure
CloseDebugOutput()
Init(@Main())