WebClient: Open newly created TriggerActions in edit mode

This commit is contained in:
MaMe82
2018-11-14 14:14:38 +01:00
parent 65210bb519
commit e85e6189fc
4 changed files with 163 additions and 33 deletions

View File

@@ -17,6 +17,24 @@ func InitComponentsGeneric() {
hvue.NewComponent( hvue.NewComponent(
"startup-settings", "startup-settings",
hvue.Template(compStartupSettings), hvue.Template(compStartupSettings),
hvue.DataFunc(func(vm *hvue.VM) interface{} {
data := &struct {
*js.Object
MasterTemplateName string `js:"MasterTemplateName"`
ShowTemplateSelect bool `js:"ShowTemplateSelect"`
}{Object: O()}
data.ShowTemplateSelect = false
data.MasterTemplateName = "startup"
//data.MasterTemplate = NewMasterTemplate()
return data
}),
hvue.Method("selectMasterTemplate",
func(vm *hvue.VM, name *js.Object) {
println("Selecting Startup Master Template :", name.String())
vm.Set("MasterTemplateName", name)
}),
) )
hvue.NewComponent( hvue.NewComponent(
"system", "system",
@@ -276,6 +294,22 @@ const compStartupSettings = `
<q-card-main> <q-card-main>
<div class="row gutter-sm"> <div class="row gutter-sm">
<q-item tag="div" class="col-12">
<select-string-from-array :values="$store.state.StoredMasterTemplateList" v-model="ShowTemplateSelect" title="Select Master Template used on startup" @load="selectMasterTemplate($event)"></select-string-from-array>
<q-item-side icon="whatshot" color primary />
<q-item-main>
<q-item-tile label>Startup Master Template</q-item-tile>
<q-item-tile sublabel>The template which is loaded on service start</q-item-tile>
<q-item-tile>
<div class="row no-wrap">
<div class="fit">
<q-input v-model="MasterTemplateName" color="primary" inverted readonly clearable></q-input>
</div>
<div><q-btn icon="more" color="primary" @click="ShowTemplateSelect=true" flat /></div>
</div>
</q-item-tile>
</q-item-main>
</q-item>
</div> </div>
</q-card-main> </q-card-main>
@@ -291,7 +325,7 @@ const compMasterTemplate = `
<!-- {{ $data }} --> <!-- {{ $data }} -->
<q-card-main> <q-card-main>
<select-string-from-array :values="$store.state.StoredMasterTemplateList" v-model="showLoadModal" title="Load USB Master Template" @load="load($event)" @delete="deleteStored($event)" with-delete></select-string-from-array> <select-string-from-array :values="$store.state.StoredMasterTemplateList" v-model="showLoadModal" title="Load stored Master Template" @load="load($event)" @delete="deleteStored($event)" with-delete></select-string-from-array>
<select-string-from-array :values="$store.state.StoredMasterTemplateList" v-model="showDeployStoredModal" title="Deploy stored Master Template" @load="deployStored($event)" @delete="deleteStored($event)" with-delete></select-string-from-array> <select-string-from-array :values="$store.state.StoredMasterTemplateList" v-model="showDeployStoredModal" title="Deploy stored Master Template" @load="deployStored($event)" @delete="deleteStored($event)" with-delete></select-string-from-array>
<modal-string-input v-model="showStoreModal" title="Store current Master Template" @save="store($event)"></modal-string-input> <modal-string-input v-model="showStoreModal" title="Store current Master Template" @save="store($event)"></modal-string-input>

View File

@@ -151,11 +151,12 @@ func generateSelectOptionsTemplateTypes() *js.Object {
return tts return tts
} }
/*
type TriggerActionCompData struct { type TriggerActionCompData struct {
*js.Object *js.Object
EditMode bool `js:"EditMode"` Edit bool `js:"Edit"`
} }
*/
func InitComponentsTriggerActions() { func InitComponentsTriggerActions() {
@@ -176,9 +177,23 @@ func InitComponentsTriggerActions() {
data.TemplateName = "" data.TemplateName = ""
return &data return &data
}), }),
hvue.Method("editTa",
func(vm *hvue.VM, taID *js.Object) {
vm.Get("$refs").Index(taID.Int()).Index(0).Call("setEditMode", true)
}),
hvue.Method("addTA", hvue.Method("addTA",
func(vm *hvue.VM) { func(vm *hvue.VM) {
vm.Get("$store").Call("dispatch", VUEX_ACTION_ADD_NEW_TRIGGER_ACTION) promise := vm.Get("$store").Call("dispatch", VUEX_ACTION_ADD_NEW_TRIGGER_ACTION)
promise.Call("then",
func(value *js.Object) {
// set the trigger action into edit mode
vm.Call("editTa", value)
},
func(reason *js.Object) {
println("add TriggerAction failed", reason)
},
)
}), }),
hvue.Method("storeTAS", hvue.Method("storeTAS",
func(vm *hvue.VM, name *js.Object) { func(vm *hvue.VM, name *js.Object) {
@@ -219,6 +234,9 @@ func InitComponentsTriggerActions() {
hvue.Mounted(func(vm *hvue.VM) { hvue.Mounted(func(vm *hvue.VM) {
vm.Store.Call("dispatch", VUEX_ACTION_UPDATE_CURRENT_TRIGGER_ACTIONS_FROM_SERVER) vm.Store.Call("dispatch", VUEX_ACTION_UPDATE_CURRENT_TRIGGER_ACTIONS_FROM_SERVER)
vm.Store.Call("dispatch", VUEX_ACTION_UPDATE_GPIO_NAMES_LIST) vm.Store.Call("dispatch", VUEX_ACTION_UPDATE_GPIO_NAMES_LIST)
js.Global.Set("tam",vm)
}), }),
) )
@@ -227,13 +245,64 @@ func InitComponentsTriggerActions() {
hvue.NewComponent( hvue.NewComponent(
"TriggerAction", "TriggerAction",
hvue.Template(templateTriggerAction), hvue.Template(templateTriggerAction),
hvue.DataFunc(func(vm *hvue.VM) interface{} {
data := &struct {
*js.Object
Edit bool `js:"Edit"`
}{Object:O()}
data.Edit = false
return data
}),
hvue.PropObj("ta"), hvue.PropObj("ta"),
hvue.PropObj("edit",
hvue.Types(hvue.PBoolean),
),
hvue.Method("setEditMode",
func(vm *hvue.VM, enabled bool) {
vm.Data.Set("Edit", enabled)
}),
hvue.Mounted(func(vm *hvue.VM) {
vm.Set("Edit", vm.Get("edit"))
}),
) )
hvue.NewComponent( hvue.NewComponent(
"TriggerActionOverview", "TriggerActionOverview",
hvue.Template(templateTriggerActionOverview), hvue.Template(templateTriggerActionOverview),
hvue.PropObj("ta"), hvue.PropObj("ta"),
hvue.PropObj("edit",
hvue.Types(hvue.PBoolean),
),
/*
hvue.Mounted(func(vm *hvue.VM) {
data := TriggerActionCompData{Object: vm.Data}
data.Edit = vm.Get("edit").Bool()
}),
*/
/*
hvue.DataFunc(func(vm *hvue.VM) interface{} {
data := &TriggerActionCompData{Object: O()}
data.Edit = false
return data
}),
*/
hvue.ComputedWithGetSet("EditMode",
func(vm *hvue.VM) interface{} {
/*
data := TriggerActionCompData{Object: vm.Data}
return data.Edit
*/
return vm.Get("edit")
},
func(vm *hvue.VM, newValue *js.Object) {
/*
data := TriggerActionCompData{Object: vm.Data}
data.Edit = newValue.Bool()
*/
// Emit event for editmode change
vm.Emit("edit", newValue)
}),
hvue.Computed("computedColor", func(vm *hvue.VM) interface{} { hvue.Computed("computedColor", func(vm *hvue.VM) interface{} {
ta := &jsTriggerAction{Object: vm.Get("ta")} ta := &jsTriggerAction{Object: vm.Get("ta")}
switch { switch {
@@ -329,22 +398,7 @@ func InitComponentsTriggerActions() {
} }
return strAction return strAction
}), }),
hvue.Mounted(func(vm *hvue.VM) {
data := TriggerActionCompData{Object: vm.Data}
data.EditMode = vm.Get("overview").Bool()
}),
hvue.DataFunc(func(vm *hvue.VM) interface{} {
data := &TriggerActionCompData{Object: O()}
data.EditMode = false
return data
}),
hvue.Method(
"enableEditMode",
func(vm *hvue.VM) {
data := TriggerActionCompData{Object: vm.Data}
data.EditMode = true
}),
hvue.Method( hvue.Method(
"updateTA", "updateTA",
func(vm *hvue.VM) { func(vm *hvue.VM) {
@@ -603,7 +657,7 @@ func InitComponentsTriggerActions() {
const templateTriggerAction = ` const templateTriggerAction = `
<div> <div>
<!-- {{ ta }} --> <!-- {{ ta }} -->
<TriggerActionOverview :ta="ta"></TriggerActionOverview> <TriggerActionOverview :ta="ta" :edit="Edit" @edit="Edit=$event"></TriggerActionOverview>
</div> </div>
` `
const templateTriggerActionOverview = ` const templateTriggerActionOverview = `
@@ -632,7 +686,7 @@ const templateTriggerActionOverview = `
</span> </span>
<div slot="right" v-if="!ta.Immutable"> <div slot="right" v-if="!ta.Immutable">
<q-btn color="primary" icon="edit" @click="enableEditMode" flat></q-btn> <q-btn color="primary" icon="edit" @click="EditMode=true" flat></q-btn>
<q-btn color="negative" icon="delete" @click="deleteTA" flat></q-btn> <q-btn color="negative" icon="delete" @click="deleteTA" flat></q-btn>
</div> </div>
</q-card-title> </q-card-title>
@@ -710,7 +764,7 @@ const templateTrigger = `
<q-item-tile label>Value</q-item-tile> <q-item-tile label>Value</q-item-tile>
<q-item-tile sublabel>The numeric value which has to be received to activate the trigger</q-item-tile> <q-item-tile sublabel>The numeric value which has to be received to activate the trigger</q-item-tile>
<q-item-tile> <q-item-tile>
<q-input v-model="ta.TriggerData.Value" type="number" decimals="0" inverted :disable="!ta.IsActive"></q-input> <q-input v-model="ta.TriggerData.Value" type="number" inverted :disable="!ta.IsActive"></q-input>
</q-item-tile> </q-item-tile>
</q-item-main> </q-item-main>
</q-item> </q-item>
@@ -778,7 +832,7 @@ const templateTrigger = `
<q-item-tile label>Debounce duration</q-item-tile> <q-item-tile label>Debounce duration</q-item-tile>
<q-item-tile sublabel>Successive edge events in this duration are ignored</q-item-tile> <q-item-tile sublabel>Successive edge events in this duration are ignored</q-item-tile>
<q-item-tile> <q-item-tile>
<q-input v-model="ta.TriggerData.DebounceMillis" type="number" suffix="ms" decimals="0" inverted :disable="!ta.IsActive"></q-input> <q-input v-model="ta.TriggerData.DebounceMillis" type="number" suffix="ms" inverted :disable="!ta.IsActive"></q-input>
</q-item-tile> </q-item-tile>
</q-item-main> </q-item-main>
</q-item> </q-item>
@@ -857,7 +911,7 @@ const templateAction = `
<q-item-tile label>Value</q-item-tile> <q-item-tile label>Value</q-item-tile>
<q-item-tile sublabel>The numeric value which is sent to the group channel</q-item-tile> <q-item-tile sublabel>The numeric value which is sent to the group channel</q-item-tile>
<q-item-tile> <q-item-tile>
<q-input v-model="ta.ActionData.Value" color="secondary" type="number" decimals="0" inverted :disable="!ta.IsActive"></q-input> <q-input v-model="ta.ActionData.Value" color="secondary" type="number" inverted :disable="!ta.IsActive"></q-input>
</q-item-tile> </q-item-tile>
</q-item-main> </q-item-main>
</q-item> </q-item>
@@ -919,7 +973,7 @@ const templateTriggerActionManager = `
</div> </div>
<div class="col-12 col-lg-6" v-for="ta in $store.getters.triggerActions"> <div class="col-12 col-lg-6" v-for="ta in $store.getters.triggerActions">
<TriggerAction :key="ta.Id" :ta="ta" overview></TriggerAction> <TriggerAction :ref="ta.Id" :key="ta.Id" :ta="ta" :edit="false"></TriggerAction>
</div> </div>
</div> </div>
</q-page> </q-page>

View File

@@ -1136,7 +1136,8 @@ func actionUpdateStoredTriggerActionSetsList(store *mvuex.Store, context *mvuex.
return return
} }
func actionUpdateCurrentTriggerActionsFromServer(store *mvuex.Store, context *mvuex.ActionContext, state *GlobalState) { func actionUpdateCurrentTriggerActionsFromServer(store *mvuex.Store, context *mvuex.ActionContext, state *GlobalState) *js.Object{
/*
go func() { go func() {
println("Trying to fetch current TriggerActions from server") println("Trying to fetch current TriggerActions from server")
tastate, err := RpcClient.GetDeployedTriggerActionSet(defaultTimeout) tastate, err := RpcClient.GetDeployedTriggerActionSet(defaultTimeout)
@@ -1157,18 +1158,59 @@ func actionUpdateCurrentTriggerActionsFromServer(store *mvuex.Store, context *mv
}() }()
return return
*/
return NewPromise(func() (res interface{}, err error) {
println("Trying to fetch current TriggerActions from server")
tastate, err := RpcClient.GetDeployedTriggerActionSet(defaultTimeout)
if err != nil {
QuasarNotifyError("Error fetching deployed TriggerActions", err.Error(), QUASAR_NOTIFICATION_POSITION_TOP)
return false,err
}
// ToDo: Clear list berfore adding back elements
state.TriggerActionList.Flush()
for _, ta := range tastate.TriggerActions {
jsTA := NewTriggerAction()
jsTA.fromGo(ta)
state.TriggerActionList.UpdateEntry(jsTA)
}
return true,err
}).Object
} }
func actionAddNewTriggerAction(store *mvuex.Store, context *mvuex.ActionContext, state *GlobalState) { func actionAddNewTriggerAction(store *mvuex.Store, context *mvuex.ActionContext, state *GlobalState) interface{} {
go func() { return NewPromise(func() (res interface{}, err error) {
newTA := NewTriggerAction() newTA := NewTriggerAction()
newTA.IsActive = false // don't activate by default newTA.IsActive = false // don't activate by default
RpcClient.DeployTriggerActionsSetAdd(defaultTimeout, &pb.TriggerActionSet{TriggerActions: []*pb.TriggerAction{newTA.toGo()}}) added,_ := RpcClient.DeployTriggerActionsSetAdd(defaultTimeout, &pb.TriggerActionSet{TriggerActions: []*pb.TriggerAction{newTA.toGo()}})
if added != nil && (len(added.TriggerActions) == 1) {
res = added.TriggerActions[0].Id
println("TriggerAction with ID", res, "added")
} else {
err = errors.New("couldn't add TriggerAction")
}
return
}).Call("then",
func(resAddPromise *js.Object) interface{} {
// set the trigger action into edit mode
updatePromise := actionUpdateCurrentTriggerActionsFromServer(store, context, state)
return updatePromise.Call("then",
func(resUpdatePromise *js.Object) interface{} {
// set the trigger action into edit mode
return resAddPromise
},
)
},
)
actionUpdateCurrentTriggerActionsFromServer(store, context, state)
}()
return
} }
func actionUpdateTriggerActions(store *mvuex.Store, context *mvuex.ActionContext, state *GlobalState, jsTas *jsTriggerActionSet) { func actionUpdateTriggerActions(store *mvuex.Store, context *mvuex.ActionContext, state *GlobalState, jsTas *jsTriggerActionSet) {

View File

@@ -49,4 +49,4 @@ func NewPromise(pf PromiseFunc) (p *Promise) {
Object: jsP, Object: jsP,
} }
return return
} }