Using Vuetify

Share your advanced knowledge/code with the community.
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Using Vuetify

Post by Peter »

Hello,

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())
Image
munfraid
Posts: 104
Joined: Sat Mar 24, 2018 1:33 pm

Re: Using Vuetify

Post by munfraid »

This is amazing, thanks Peter! :shock:
Dirk Geppert
Posts: 282
Joined: Fri Sep 22, 2017 7:02 am

Re: Using Vuetify

Post by Dirk Geppert »

Looks great! Thx Peter!
Post Reply