B4J Library [BANanoVueMaterial]: The first complete opensource VueJS UX based framework for BANano

#Region Project Attributes
    #MergeLibraries: True
    #LibraryAuthor: Anele Mashy Mbanga
    #LibraryVersion: 0.01
#End Region

Sub Process_Globals
    Public BANano As BANano 'ignore
    Public AppName As String = "helloworld"
    Public Dbase As String
    Private Publish As String
    Private BP As BANanoPostProcessor
    Public ServerIP As String
End Sub

Sub AppStart (Form1 As Form, Args() As String)
    'post processor
    BP.Initialize
    BP.RedirectOutput(File.DirApp,"log.txt")
    Publish = "C:\laragon\www"
    'ServerIP = BP.FileReadString(File.DirAssets, "host.txt")
    'Dbase = BP.FileReadString(File.DirAssets, "dbase.txt")
    '
    Dim Version As Long = DateTime.now
    Dim appFile As String = $"app${Version}.js"$
 
    'initialize banano for first use
    BANano.Initialize("BANano", AppName, Version)
    BANano.HTML_NAME = "index.html"
    BANano.Header.Title = AppName
    BANano.JAVASCRIPT_NAME = appFile
    BANano.TranspilerOptions.UseServiceWorker = False
    BANano.transpileroptions.MergeAllCSSFiles = True
    BANano.transpileroptions.MergeAllJavascriptFiles = True
    '
    'php
    'set php settings
    'BANano.PHP_NAME = $"${AppName}.php"$
    'BANano.PHPHost = $"http://${ServerIP}/${AppName}/"$
    'BANano.PHPAddHeader("Access-Control-Allow-Origin: *")
 
    BANano.Build(Publish)
    BP.OpenLog(File.DirApp, "log.txt")
 
    BP.PublishPath = Publish
    BP.ShortName = AppName
    BP.AssetsPath = BANano.ASSETS_FOLDER
    BP.ScriptsPath = BANano.SCRIPTS_FOLDER
    BP.StylesPath = BANano.STYLES_FOLDER
    BP.ScriptFile = BANano.JAVASCRIPT_NAME
    BP.UnzipFonts
    BP.Open(True)
    ExitApplication
End Sub

'Return true to allow the default exceptions handler to handle the uncaught exception.
Sub Application_Error (Error As Exception, StackTrace As String) As Boolean
    Return True
End Sub

Sub BANano_Ready
    pgIndex.Init
End Sub

'Static code module
Sub Process_Globals
    Private BANano As BANano  'ignore
    Private vm As BANanoVM
    Private sections As List
End Sub

Sub Init
    'initialize the page
    vm.Initialize(Me, Main.appname)
    'update the nav bar title
    vm.NavBar.UpdateTitle("Hello World")
    vm.Drawer.UpdateTitle("Hello")
    vm.Drawer.SetPersistentFull(True)
    'the drawer will be visible (not)
    vm.Drawer.Hide
    'the navbar will be visible
    vm.NavBar.Show
    'set primary color for the navbar
    vm.NavBar.SetPrimary(True)
    'fix the navbar so that it does not move
    vm.NavBar.SetModeFixed(True)
    'hide the back button
    vm.NavBar.SetHasBackButton(False)
    'show the hamburger button
    vm.NavBar.SetHasMenuButton(False)
    '
    'BuildDrawer
 
    'add the code from the modules
    InitSections
    'show the initial page
    ShowSection(modHello.name)
    'build the page
    vm.ux
End Sub

'build list once and for all for all pages
Sub InitSections
    sections.initialize
    '
    sections.add(modHello.name)
    modHello.Code(vm)
 
End Sub

'show 1 section from available sections
Sub ShowSection(sectionName As String)
    For Each section As String In sections
        If section = sectionName Then
            vm.show(section)
        Else
            vm.hide(section)
        End If
    Next
End Sub


Sub BuildDrawer
    'vm.Drawer.AddItem("ui","whatshot","UI Elements")
    'vm.drawer.AddSubItem("ui", "avatar", "person_outline","Avatar")
End Sub

'Static code module
Sub Process_Globals
    Private vm As BANanoVM
    Public name As String = "hellocode"
End Sub


Sub Code(vmx As BANanoVM)
    'the instance of view material
    vm = vmx
    'create a container to hold all contents for this page
    Dim cont As VMContainer = vm.CreateContainer(name, Me)
    'hide this container, will be made available when we need
    cont.Hide
 
    '
    cont.addrows(1).AddColumns12
    cont.AddRows(1).AddColumns(1,12,1,1,1).AddColumns(1,12,11,11,11)
    cont.AddRows(1).AddColumns(1,12,2,2,2).AddColumns(1,12,10,10,10)
    cont.AddRows(1).AddColumns(1,12,3,3,3).AddColumns(1,12,9,9,9)
    cont.AddRows(1).AddColumns(1,12,4,4,4).AddColumns(1,12,8,8,8)
    cont.AddRows(1).AddColumns(1,12,5,5,5).AddColumns(1,12,7,7,7)
    cont.AddRows(1).AddColumns(1,12,6,6,6).AddColumns(1,12,6,6,6)
    cont.AddRows(1).AddColumns3_4
    cont.AddRows(1).AddColumns4_3
    '
    Dim rCnt As Int
 
    For rCnt = 1 To 9
        cont.Grid.SetBorder(rCnt,1,"1px", vm.COLOR_BLUEGREY, vm.BORDER_DOTTED)
        cont.Grid.SetBorder(rCnt,2,"1px", vm.COLOR_BLUEGREY, vm.BORDER_DOTTED)
        cont.Grid.SetBorder(rCnt,3,"1px", vm.COLOR_BLUEGREY, vm.BORDER_DOTTED)
        '
        Dim rkey As String = $"lbl${rCnt}1"$
        Dim lblx As VMLabel = vm.CreateLABEL(rkey).SetText($"R${rCnt}.C${1}"$).SetParagraph
        cont.AddComponent(rCnt,1, lblx.ToString)
        '
        Dim rkey1 As String = $"lbl${rCnt}2"$
        Dim lblx1 As VMLabel = vm.CreateLABEL(rkey1).SetText($"R${rCnt}.C2"$).SetParagraph
        cont.AddComponent(rCnt,2, lblx1.ToString)

    Next
 
    '
    'add this container to the contents of the page
    vm.AddHTML(cont.tostring)
End Sub

sections.add(modHello.name)
    modHello.Code(vm)

'hide this container, will be made available when we need
    cont.Hide

'show the initial page
    ShowSection(modHello.name)

cont.AddComponent(rCnt,1, lblx.ToString)

vm.Drawer.Show
    vm.Drawer.AddItem("page1","done", "Page 1")
    vm.Drawer.AddItem("page2","done_all", "Page 2")

Sub page1_click(e As BANanoEvent)
    'update the title of the navigation bar
    vm.navbar.UpdateTitle("Navigation - Page 1")
    'show page 1
    vm.showpage(modPage1.name)
    'hide the navbar button
    vm.Hide("npage1")
    'show the navbar button
    vm.Show("npage2")
End Sub

Sub page2_click(e As BANanoEvent)
    'update the title of the navigation bar
    vm.navbar.UpdateTitle("Navigation - Page 2")
    'show page 2
    vm.showpage(modPage2.name)
    vm.Show("npage1")
    vm.Hide("npage2")
End Sub

'the navbar will be visible
    vm.NavBar.Show
    'set primary color for the navbar
    vm.NavBar.SetPrimary(True)
    'fix the navbar so that it does not move
    vm.NavBar.SetModeFixed(True)
    'hide the back button
    vm.NavBar.SetHasBackButton(False)
    'show the hamburger button
    vm.NavBar.SetHasMenuButton(True)
    'add buttons
    vm.NavBar.AddIcon("npage1","done","Go to page 1", "")
    vm.NavBar.AddIcon("npage2","done_all","Go to page 2", "")

Sub npage1_click(e As BANanoEvent)
    vm.navbar.UpdateTitle("Navigation - Page 1")
    vm.ShowPage(modPage1.name)
    vm.Show("npage2")
    vm.Hide("npage1")
End Sub

Sub npage2_click(e As BANanoEvent)
    vm.navbar.UpdateTitle("Navigation - Page 2")
    vm.ShowPage(modPage2.name)
    vm.Show("npage1")
    vm.Hide("npage2")
End Sub

'add the code from the modules
    vm.AddPage(modPage1.name, modPage1)
    vm.addpage(modPage2.name, modPage2)
    'show this page
    vm.navbar.UpdateTitle("Navigation - Page 1")
    vm.ShowPage(modPage1.name)
    vm.Hide("npage1")
    vm.Show("npage2")

'create the grid for the container in the page
    cont.AddRows(1).AddColumns2_6
    ' create a H1 label
    Dim lbl As VMLabel = vm.CreateLABEL("lbl1").SetText("This is page 1!").SetH1
    'create button
    Dim btn As VMButton = vm.CreateButton("btn0", Me).SetText("Page 2").SetPrimary(True).SetRaised(True).SetToolTip("Go to page 2")
    'add label to R1C1
    cont.AddComponent(1,1, lbl.ToString)
    'add button to r1c2
    cont.AddComponent(1,2, btn.ToString)

Sub btn0_click(e As BANanoEvent)
    vm.navbar.UpdateTitle("Navigation - Page 2")
    vm.ShowPage(modPage2.name)
    vm.Show("npage1")
    vm.Hide("npage2")
End Sub

Sub Init
    'initialize the page
    vm.Initialize(Me, Main.appname)
    'update the nav bar title
    vm.NavBar.UpdateTitle("Login Dialog")
    vm.Drawer.UpdateTitle("Login")
    vm.Drawer.SetPersistentFull(True)
    'the navbar will be hidden
    vm.NavBar.Hide
    'set primary color for the navbar
    vm.NavBar.SetPrimary(True)
    'fix the navbar so that it does not move
    vm.NavBar.SetModeFixed(True)
    'hide the back button
    vm.NavBar.SetHasBackButton(False)
    'show the hamburger button
    vm.NavBar.SetHasMenuButton(False)
    
    'add the drawer items
    'the drawer will be visible (not)
    vm.Drawer.Hide
    'add the code from the modules
    vm.AddPage(pgLogin.name, pgLogin)
    'show the dialog when page opens
    vm.ShowDialog("mdlsignin")
    'build the page
    vm.ux
End Sub

Private mdlSignIn As VMDialog

Sub Code(vmx As BANanoVM)
    'the instance of view material
    vm = vmx
    'create the modal dialog
    mdlSignIn = vm.CreateDialog("mdlsignin", Me)
    'dont show the backdrop
    mdlSignIn.SetBackdrop(False)
    'disable clicking outside of modal
    mdlSignIn.SetClickOutsideToClose(False)
    'dont close when a user presses escape
    mdlSignIn.SetCloseOnEsc(False)
    'on cellphones show full screen
    mdlSignIn.SetFullScreen(True)
    'set width of the modal
    mdlSignIn.SetWidth("600px")
    '
    'set the title of the modal
    mdlSignIn.SetTitle("Sign In")
    'add a cancel button
    mdlSignIn.AddCancel("btnCancelLogin", "Cancel")
    'add a login button
    mdlSignIn.AddOk("btnOkSignIn", "Sign In")
    'create the controls
    Dim txtEmail As VMInputControl = vm.Container.NewEmail("email","Email Address","",True,"email","Enter email address here", "The email address is required!")
    Dim txtPassword As VMInputControl = vm.container.NewPassword("password","Password","",True,"lock",10,"Enter password here","The password is required!")
    'add the controls, the grid will be automatically created
    mdlSignIn.Container.AddControl(txtEmail,1,1,0,0,0,0,12,12,12,12)
    mdlSignIn.Container.AddControl(txtPassword,1,1,0,0,0,0,12,12,12,12)
    
    'add this modal to the page
    vm.adddialog(mdlSignIn)
End Sub

 mdlSignIn.Container.AddControl(txtEmail,1,1,0,0,0,0,12,12,12,12)

    mdlSignIn.Container.AddControl(txtPassword,1,1,0,0,0,0,12,12,12,12)

Sub btnOkSignIn_click(e As BANanoEvent)
    'get the contents of the form
    Dim rec As Map = mdlSignIn.Container.GetData
    'validate the details
    Dim bValid As Boolean = mdlSignIn.Container.Validate(rec)
    If bValid = False Then Return
    Log(rec)
    'process further
End Sub

Dim txtfirstname As VMInputControl = vm.Container.NewText("firstname", "First Name", "First Name", True, "", 0, "", "The first name is required!", 0)
    Dim txtlastname As VMInputControl = vm.Container.NewText("lastname", "Last Name", "Last Name", True, "", 0, "", "The last name is required!", 0)
    '
    Dim dpDOB As VMInputControl = vm.Container.NewDatePicker("dateofbirth", "Date of Birth", True, True, True, "Date of Birth",0)
    Dim tpTOB As VMInputControl = vm.Container.NewTimePicker("timeofbirth", "Time of Birth", True, True, "", "",0)
    '
    Dim txtTel As VMInputControl = vm.Container.NewTel("telephone", "Telephone", "Telephone Number", True, "", "", "",0)
    Dim txtEmail As VMInputControl = vm.Container.NewEmail("email","Email Address","Email Address",True,"","", "The email address is required!",0)
    '
    Dim radGender As VMInputControl = vm.Container.NewRadioGroup("gender", "Gender", "M", CreateMap("M":"Male","F":"Female"),0)
    Dim chipSkills As VMInputControl = vm.Container.NewChips("skills", "Skills", "", False, False, "","", 0)
    '
    Dim children As VMInputControl = vm.Container.NewNumber("children", "Total Children", "", False, "", "","", 0)
    Dim notifications As VMInputControl = vm.Container.NewSwitch("notifications", "Receive Notifications", "true", True, 0)
    '
    Dim profilepic As VMInputControl = vm.Container.NewImage("displaypic", "./assets/sponge.png", "SpongeBob","80px", "80px")
    Dim uploadprofile As VMInputControl = vm.Container.NewFile("uploadpic", "Upload Profile Image", "", False, "", "", 0)
    
    Dim notes As VMInputControl = vm.Container.NewTextArea("notes", "Notes", "", True, True, "", 0,"", "Notes are required!", 0)
    Dim agree As VMInputControl = vm.Container.NewCheckBox("agree", "I agree with terms of use", "true", True, 0)
    
    Dim txtPassword As VMInputControl = vm.container.NewPassword("password","Password","",True,False,"",15,"", "The password is required!",0)
    Dim txtconfirmPassword As VMInputControl = vm.container.NewPassword("confirmpassword","Confirm Password","",True,True,"",15,"", "The password is required!",0)
    
    'add the controls, the grid will be automatically created
    mdlRegister.Container.AddControl(profilepic,1,1,0,0,0,0,12,6,6,6)
    mdlRegister.Container.AddControl(uploadprofile,1,2,0,0,0,0,12,6,6,6)
    
    mdlRegister.Container.AddControl(txtfirstname,2,1,0,0,0,0,12,6,6,6)
    mdlRegister.Container.AddControl(txtlastname,2,2,0,0,0,0,12,6,6,6)
    '
    mdlRegister.Container.AddControl(dpDOB,3,1,0,0,0,0,12,6,6,6)
    mdlRegister.Container.AddControl(tpTOB,3,2,0,0,0,0,12,6,6,6)
    '
    mdlRegister.Container.AddControl(txtTel,4,1,0,0,0,0,12,6,6,6)
    mdlRegister.Container.AddControl(txtEmail,4,2,0,0,0,0,12,6,6,6)
    '
    mdlRegister.Container.AddControl(radGender,5,1,0,0,0,0,12,6,6,6)
    mdlRegister.Container.AddControl(chipSkills,5,2,0,0,0,0,12,6,6,6)
    '
    mdlRegister.Container.AddControl(children,6,1,0,0,0,0,12,6,6,6)
    mdlRegister.Container.AddControl(notifications,6,2,0,0,0,0,12,6,6,6)
    '
    mdlRegister.Container.AddControl(txtPassword,7,1,0,0,0,0,12,6,6,6)
    mdlRegister.Container.AddControl(txtconfirmPassword,7,2,0,0,0,0,12,6,6,6)
    '
    mdlRegister.Container.AddControl(notes,8,1,0,0,0,0,12,12,12,12)
    mdlRegister.Container.AddControl(agree,9,1,0,0,0,0,12,12,12,12)

Sub btnCancelSignUp_click(e As BANanoEvent)
    'hide the registration modal
    vm.HideDialog("mdlregister")
    'show the login modal
    vm.ShowDialog("mdlsignin")
End Sub

Sub btnOkSignUp_click(e As BANanoEvent)
    'get the contents of the form
    Dim rec As Map = mdlRegister.Container.GetData
    'validate the details
    Dim bValid As Boolean = mdlRegister.Container.Validate(rec)
    If bValid = False Then Return
    Log(rec)
    'process further
End Sub

Sub UploadFiles(fList As List)
    For Each fileObj As Object In fList
        vm.HTTPUpload(fileObj, Me, "filedone")
    Next
End Sub

Sub FileDone(fileObj As Map, json As String)
    Dim resp As Map = BANano.FromJson(json)
    Dim status As String = resp.Get("status")
    Select Case status
    Case "success"
        Dim fd As FileObject = vm.GetFileDetails(fileObj)
        Log(fd)
    Case Else
        vm.ShowSnackBar("File could not be uploaded!")
    End Select
End Sub

Type FileObject(FileName As String, FileDate As String, FileSize As Long, FileType As String)

Sub GetFileDetails(fileObj As Map) As FileObject
    Dim sname As String = fileObj.Get("name")
    Dim slastModifiedDate As String = fileObj.Get("lastModifiedDate")
    slastModifiedDate = Date2YYYYMMDDHHMM(slastModifiedDate)
    Dim ssize As String = fileObj.Get("size")
    Dim stype As String = fileObj.Get("type")
    '
    Dim ff As FileObject
    ff.Initialize
    ff.FileName = sname
    ff.FileDate = slastModifiedDate
    ff.FileSize = ssize
    ff.FileType = stype
    Return ff
End Sub

Sub HTTPUpload(fileObj As Object, module As Object, methodname As String)
    Dim promise As BANanoPromise 'ignore
    ' some vars to hold our results
    Dim Error As String
    Dim json As String
    
    ' call the http request
    promise.CallSub(Me, "DoUpload", Array(fileObj))
    promise.ThenWait(json)
    BANAno.CallSub(module, methodname, Array(fileObj, json))
    promise.ElseWait(Error)  'ignore
    BANAno.CallSub(module, methodname, Array(fileObj, Error))
    promise.End
End Sub

private Sub DoUpload(fileObj As Object) As String   'ignore
    Dim aEvt As Object
    Dim xhr As BANanoXMLHttpRequest
    'define form data
    Dim fd As BANanoObject
    fd.Initialize2("FormData",Null)
    fd.RunMethod("append", Array("upload", fileObj))
    '
    xhr.Initialize
    xhr.Open("POST", "./assets/upload.php")
    xhr.AddEventListenerOpenAsync("onreadystatechange", aEvt)
    If xhr.ReadyState = 4 Then
        If xhr.Status = 200 Then
            BANAno.ReturnThen(xhr.ResponseText)
        Else
            Dim err As Map = CreateMap()
            err.Put("status", "error")
            Dim serr As String = BANAno.ToJson(err)
            BANAno.ReturnElse(serr)
        End If
    End If
    xhr.CloseEventListener
    xhr.Send2(fd)
End Sub

Sub StartTour
    Dim eh As VMEasyHint
    eh.initialize
    eh.AddStep("btnAddEmployees", "Click here to add an employee")
    eh.AddStep("btnRefreshEmployees", "To refresh the list of employees, click here")
    eh.AddGijgoTable("tblEmployees", "Your list of captured employees will be shown in this table. Here you can also click Edit or Delete to update and delete employees")
    eh.AddStep("fltEmployees", "You can filter the columns to display on your table by using filters here")
    eh.AddSelect("filterEmployees", "You can select multiple columns to display on the table here")
    eh.AddStep("btnRstFltEmployees", "Clicking here will reset the column filters")
    eh.AddStep("btnAplyFltEmployees", "Once columns are selected in the filter, you can click here to apply the filters")
    eh.EndsOn("btnAplyFltEmployees")
    eh.run
End Sub

Dim fonts As Map = CreateMap()
    fonts.put("arial","Arial")
    fonts.put("calibri","Calibri")
    fonts.put("cambria","Cambria")
    fonts.put("comicsans","Comic Sans")
    fonts.put("consolas","Consolas")
    fonts.put("courier","Courier")
    fonts.put("droidsans","Droid Sans")
    fonts.put("georgia","Georgia")
    fonts.put("helvetica","Helvetica")
    fonts.put("impact","Impact")
    fonts.put("roboto","Roboto")
    fonts.put("segoeui","Segoe UI")
    fonts.put("timesnewroman","Times New Roman")
    fonts.put("ubuntu","Ubuntu")
    fonts.put("verdana","Verdana")
    '
    Dim ac4 As VMAutoComplete = vm.createautocomplete("ac4", Me).SetLabel("Fonts")
    ac4.SetVModel("fonts").SetOptionsMap(fonts).SetHelperText("Uses options as source")
    cont.AddComponent(4,1, ac4.ToString)

'get the
    Dim selValue As String = vm.GetAutoCompleteKey("ac4")
    vm.ShowSnackBar(selValue)

vm.SetAutoCompleteKey("ac4", "roboto")

'use datasource for content source
    Dim countries As List
    countries.initialize
    countries.add(CreateMap("id":"australia", "text":"Australia"))
    countries.add(CreateMap("id":"brazil", "text":"Brazil"))
    countries.add(CreateMap("id":"japan", "text":"Japan"))
    countries.add(CreateMap("id":"united-states", "text":"United States"))
    vm.setstatesingle("countries", countries)

    Dim ac5 As VMAutoComplete = vm.createautocomplete("ac5", Me).SetLabel("DataSource")
    ac5.SetVModel("ds").SetDataSource("countries", "id", "text").SetHelperText("Uses datasource for content")
    cont.AddComponent(4,1, ac5.ToString)