P4wnP1_aloa/web_client/hvueComponentsDialog.go

279 lines
6.7 KiB
Go

// +build js
package main
import (
"github.com/gopherjs/gopherjs/js"
"github.com/mame82/hvue"
)
func InitComponentsDialog() {
hvue.NewComponent(
"select-string-from-array",
hvue.Template(templateSelectStringModal),
hvue.DataFunc(func(vm *hvue.VM) interface{} {
data := struct {
*js.Object
CurrentSelection *js.Object `js:"CurrentSelection"`
}{Object:O()}
data.CurrentSelection = O()
return &data
}),
hvue.Mounted(func(vm *hvue.VM) {
vm.Set("CurrentSelection", vm.Get("values").Index(0))
// println("Index 0 on mount", vm.Get("values").Index(0))
}),
hvue.ComputedWithGetSet(
"visible",
func(vm *hvue.VM) interface{} {
return vm.Get("value")
},
func(vm *hvue.VM, newValue *js.Object) {
vm.Call("$emit", "input", newValue)
},
),
hvue.Method(
"onLoadPressed",
func(vm *hvue.VM) {
vm.Call("$emit", "load", vm.Get("CurrentSelection"))
//println(vm.Get("CurrentSelection"))
},
),
hvue.Method(
"onDeletePressed",
func(vm *hvue.VM, name *js.Object) {
vm.Call("$emit", "delete", name)
},
),
hvue.PropObj(
"values",
hvue.Required,
),
hvue.PropObj(
"value",
hvue.Required,
hvue.Types(hvue.PBoolean),
),
hvue.PropObj(
"with-delete",
hvue.Types(hvue.PBoolean),
hvue.Default(false),
),
hvue.PropObj(
"title",
hvue.Types(hvue.PString),
),
)
hvue.NewComponent(
"modal-string-input",
hvue.Template(templateInputStringModal),
hvue.DataFunc(func(vm *hvue.VM) interface{} {
data := struct {
*js.Object
Text string `js:"text"`
}{Object:O()}
data.Text = ""
return &data
}),
hvue.ComputedWithGetSet(
"visible",
func(vm *hvue.VM) interface{} {
return vm.Get("value")
},
func(vm *hvue.VM, newValue *js.Object) {
vm.Call("$emit", "input", newValue)
},
),
hvue.Method(
"onSavePressed",
func(vm *hvue.VM) {
if vm.Get("text") == js.Undefined || vm.Get("text").String() == "" {
QuasarNotifyError("Can't store to empty template name", "", QUASAR_NOTIFICATION_POSITION_TOP)
return
}
vm.Call("$emit", "save", vm.Get("text"))
println(vm.Get("text"))
},
),
hvue.PropObj(
"title",
hvue.Types(hvue.PString),
),
hvue.PropObj(
"value",
hvue.Required,
hvue.Types(hvue.PBoolean),
),
)
hvue.NewComponent(
"ransom-note",
hvue.Template(templateRansomModal),
hvue.ComputedWithGetSet(
"visible",
func(vm *hvue.VM) interface{} {
return vm.Get("value")
},
func(vm *hvue.VM, newValue *js.Object) {
vm.Call("$emit", "input", newValue)
},
),
hvue.PropObj(
"value",
hvue.Required,
hvue.Types(hvue.PBoolean),
),
)
hvue.NewComponent(
"disconnect-modal",
hvue.Template(templateDisconnectModal),
hvue.ComputedWithGetSet(
"visible",
func(vm *hvue.VM) interface{} {
return vm.Get("value")
},
func(vm *hvue.VM, newValue *js.Object) {
vm.Call("$emit", "input", newValue)
},
),
hvue.PropObj(
"value",
hvue.Required,
hvue.Types(hvue.PBoolean),
),
)
}
const templateSelectStringModal = `
<q-modal v-model="visible">
<q-modal-layout>
<q-toolbar slot="header">
<q-toolbar-title>
{{ title }}
</q-toolbar-title>
</q-toolbar>
<q-list>
<q-item link tag="label" v-for="name in values" :key="name">
<q-item-side>
<q-radio v-model="CurrentSelection" :val="name"/>
</q-item-side>
<q-item-main>
<q-item-tile label>{{ name }}</q-item-tile>
</q-item-main>
<q-item-side v-if="withDelete" right>
<q-btn icon="delete" color="negative" @click="onDeletePressed(name)" round flat />
</q-item-side>
</q-item>
<!--
<q-item tag="label">
<q-item-main>
<q-item-tile>
<q-btn color="primary" v-show="CurrentSelection != undefined" label="ok" @click="onLoadPressed(); visible=false"/>
<q-btn color="secondary" v-close-overlay label="close" />
</q-item-tile>
</q-item-main>
</q-item>
-->
</q-list>
<q-list slot="footer">
<q-item tag="label">
<q-item-main>
<q-item-tile>
<q-btn color="primary" v-show="CurrentSelection != undefined" label="ok" @click="onLoadPressed(); visible=false"/>
<q-btn color="secondary" v-close-overlay label="close" />
</q-item-tile>
</q-item-main>
</q-item>
</q-list>
</q-modal-layout>
</q-modal>
`
const templateInputStringModal = `
<div>
<q-modal v-model="visible">
<q-modal-layout>
<q-toolbar slot="header">
<q-toolbar-title>
{{ title }}
</q-toolbar-title>
</q-toolbar>
<q-list>
<q-item tag="label">
<q-item-main>
<q-item-tile label>Name</q-item-tile>
<q-item-tile>
<q-input v-model="text" inverted></q-input>
</q-item-tile>
</q-item-main>
</q-item>
<q-item tag="label">
<q-item-main>
<q-item-tile>
<q-btn color="primary" v-show="text != undefined && text.length > 0" @click="onSavePressed(); visible=false" label="store" />
<q-btn color="secondary" v-close-overlay label="close" />
</q-item-tile>
</q-item-main>
</q-item>
</q-list>
</q-modal-layout>
</q-modal>
</div>
`
const templateDisconnectModal = `
<div>
<q-modal v-model="visible">
<q-modal-layout>
<q-toolbar slot="header">
<q-toolbar-title>
Not connection to server
</q-toolbar-title>
</q-toolbar>
<div class="layout-padding">
<p>No connection to server</p>
<p>Trying to reconnect ... Attempt: {{ $store.state.ConnectRetryCount }}</p>
</div>
</q-modal-layout>
</q-modal>
</div>
`
const templateRansomModal = `
<div>
<q-modal v-model="visible" content-css="background: red;" no-esc-dismiss no-route-dismiss no-backdrop-dismiss>
<div style="color: white; font-size: 1.5em; font-family: monospace; padding: 10%">
You became victim of a VERY SILLY IDEA</br>
███████████████████████████████████████████████████████████████████████████████</br>
</br>
The web page you've been viewing, provided a sophisticated experience</br>
in terms of keyboard automation and scripting. There were LED based triggers,</br>
there was scriptable mouse control, there were complex control structures</br>
like if-else-branching and for-loops. Not to mention the capability of running</br>
multiple asynchronous jobs.</br>
</br>
If you really need a converter for a limited, old-school language:</br>
</br>
1. Ask somebody else to write one.</br>
2. Send me 10+ BTC and I'll write one'.</br>
or</br>
3. Write one yourself and don't send a PR'.</br>
</br>
If you want your DuckyScript encrypted, please enter it elsewhere!</br>
</div>
</q-card>
</q-modal>
</div>
`