Skip to content

Commit

Permalink
feat: Replace confirm dialog with Vuetify dialog fix #202
Browse files Browse the repository at this point in the history
  • Loading branch information
@robertsLando
robertsLando committed Mar 4, 2020
1 parent f2e3084 commit a45900a
Show file tree
Hide file tree
Showing 3 changed files with 157 additions and 39 deletions.
98 changes: 98 additions & 0 deletions src/components/Confirm.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
<template>
<v-dialog
v-model="show"
:max-width="options.width"
:style="{ zIndex: options.zIndex }"
@keydown.esc="cancel"
>
<v-card>
<v-toolbar :color="options.color" dark dense flat>
<v-toolbar-title class="white--text">{{ title }}</v-toolbar-title>
</v-toolbar>
<v-card-text v-show="!!message" class="pa-4">{{ message }}</v-card-text>
<v-card-actions class="pt-0">
<v-spacer></v-spacer>
<v-btn @click.native="agree" flat :color="options.color">Yes</v-btn>
<v-btn @click.native="cancel" flat>Cancel</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>

<script>
/**
* Vuetify Confirm Dialog component
*
* Insert component where you want to use it:
* <confirm ref="confirm"></confirm>
*
* Call it:
* this.$refs.confirm.open('Delete', 'Are you sure?', { color: 'red' }).then((confirm) => {})
* Or use await:
* if (await this.$refs.confirm.open('Delete', 'Are you sure?', { color: 'red' })) {
* // yes
* }
* else {
* // cancel
* }
*
* Alternatively you can place it in main App component and access it globally via this.$root.$confirm
* <template>
* <v-app>
* ...
* <confirm ref="confirm"></confirm>
* </v-app>
* </template>
*
* mounted() {
* this.$root.$confirm = this.$refs.confirm.open
* }
*/
export default {
data: () => ({
dialog: false,
resolve: null,
reject: null,
message: null,
title: null,
options: {
color: 'primary',
width: 290,
zIndex: 200
}
}),
computed: {
show: {
get () {
return this.dialog
},
set (value) {
this.dialog = value
if (value === false) {
this.cancel()
}
}
}
},
methods: {
open (title, message, options) {
this.dialog = true
this.title = title
this.message = message
this.options = Object.assign(this.options, options)
return new Promise((resolve, reject) => {
this.resolve = resolve
this.reject = reject
})
},
agree () {
this.resolve(true)
this.dialog = false
},
cancel () {
this.resolve(false)
this.dialog = false
}
}
}
</script>
75 changes: 39 additions & 36 deletions src/components/ControlPanel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -449,13 +449,17 @@
</v-tabs-items>
</v-card-text>
</v-card>

<Confirm ref="confirm"></Confirm>

</v-container>
</template>

<script>
import ConfigApis from '@/apis/ConfigApis'
import ValueID from '@/components/ValueId'
import Confirm from '@/components/Confirm'
import { default as AnsiUp } from 'ansi_up'
Expand All @@ -474,7 +478,8 @@ export default {
},
components: {
ValueID,
DialogSceneValue
DialogSceneValue,
Confirm
},
computed: {
scenesWithId () {
Expand Down Expand Up @@ -723,6 +728,18 @@ export default {
showSnackbar (text) {
this.$emit('showSnackbar', text)
},
async confirm (title, text, level, options) {
options = options || {}
var levelMap = {
'warning': 'orange',
'alert': 'red'
}
options.color = levelMap[level] || 'primary'
return this.$refs.confirm.open(title, text, options)
},
validJSONdevice () {
var valid = true
try {
Expand All @@ -734,13 +751,9 @@ export default {
return valid || 'JSON test failed'
},
importConfiguration () {
async importConfiguration () {
var self = this
if (
confirm(
'Attention: This will override all existing nodes names and locations'
)
) {
if (await this.confirm('Attention', 'This will override all existing nodes names and locations', 'alert')) {
self.$emit('import', 'json', function (err, data) {
if (!err && data) {
ConfigApis.importConfig({ data: data })
Expand All @@ -767,13 +780,9 @@ export default {
console.log(error)
})
},
importScenes () {
async importScenes () {
var self = this
if (
confirm(
'Attention! This operation will override all current scenes and cannot be undone'
)
) {
if (await this.confirm('Attention', 'This operation will override all current scenes and cannot be undone', 'alert')) {
this.$emit('import', 'json', function (err, scenes) {
// TODO: add checks on file entries
if (scenes instanceof Array) {
Expand Down Expand Up @@ -814,8 +823,8 @@ export default {
this.newScene = ''
}
},
removeScene () {
if (this.selectedScene) {
async removeScene () {
if (this.selectedScene && await this.confirm('Attention', 'Are you sure you want to delete this scene?', 'alert')) {
this.apiRequest('_removeScene', [this.selectedScene])
this.selectedScene = null
this.refreshScenes()
Expand All @@ -841,8 +850,8 @@ export default {
}
this.dialogValue = true
},
deleteItem (value) {
if (confirm('Are you sure you want to delete this item?')) {
async deleteItem (value) {
if (await this.confirm('Attention', 'Are you sure you want to delete this item?', 'alert')) {
this.apiRequest('_removeSceneValue', [
this.selectedScene,
value.node_id,
Expand All @@ -853,34 +862,28 @@ export default {
this.refreshValues()
}
},
deleteDevice () {
async deleteDevice () {
var device = this.selectedDevice
if (device && confirm('Are you sure you want to delete selected device?')) {
if (device && await this.confirm('Attention', 'Are you sure you want to delete selected device?', 'alert')) {
this.socket.emit(this.socketActions.hass, {
apiName: 'delete',
device: device,
node_id: this.selectedNode.node_id
})
}
},
rediscoverNode () {
async rediscoverNode () {
var node = this.selectedNode
if (
node &&
confirm('Are you sure you want to re-discover all node values?')
) {
if (node && await this.confirm('Rediscover node', 'Are you sure you want to re-discover all node values?')) {
this.socket.emit(this.socketActions.hass, {
apiName: 'rediscoverNode',
node_id: this.selectedNode.node_id
})
}
},
rediscoverDevice () {
async rediscoverDevice () {
var device = this.selectedDevice
if (
device &&
confirm('Are you sure you want to re-discover selected device?')
) {
if (device && await this.confirm('Are you sure you want to re-discover selected device?')) {
this.socket.emit(this.socketActions.hass, {
apiName: 'discover',
device: device,
Expand Down Expand Up @@ -943,7 +946,7 @@ export default {
this.closeDialog()
},
sendCntAction () {
async sendCntAction () {
if (this.cnt_action) {
var args = []
var askId = this.node_actions.find(a => a.value === this.cnt_action)
Expand All @@ -958,10 +961,10 @@ export default {
}
if (this.cnt_action === 'addNode') {
var secure = confirm('Start inclusion in security mode?')
var secure = await this.$refs.confirm.open('Node inclusion', 'Start inclusion in security mode?')
args.push(secure)
} else if (this.cnt_action === 'hardReset') {
var ok = confirm('Your controller will be reset to factory and all paired devices will be removed')
var ok = await this.$refs.confirm.open('Hard Reset', 'Your controller will be reset to factory and all paired devices will be removed', {color: 'red'})
if (!ok) {
return
}
Expand Down Expand Up @@ -1151,7 +1154,7 @@ export default {
}
})
this.socket.on(this.socketEvents.api, data => {
this.socket.on(this.socketEvents.api, async data => {
if (data.success) {
switch (data.api) {
case 'getAssociations':
Expand All @@ -1169,13 +1172,13 @@ export default {
self.scene_values = data.result
break
case 'getNodeNeighbors':
confirm('Node neighbors \n' + self.jsonToList(data.result))
self.confirm('Node neightbors', self.jsonToList(data.result) || 'No Neightbors found')
break
case 'getDriverStatistics':
confirm('Driver statistics \n' + self.jsonToList(data.result))
self.confirm('Driver statistics', self.jsonToList(data.result))
break
case 'getNodeStatistics':
confirm('Node statistics \n' + self.jsonToList(data.result))
self.confirm('Node statistics', self.jsonToList(data.result))
break
default:
self.showSnackbar('Successfully call api ' + data.api)
Expand Down
23 changes: 20 additions & 3 deletions src/components/Settings.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -436,12 +436,16 @@
</v-btn>
</v-card-actions>
</v-card>

<Confirm ref="confirm"></Confirm>

</v-container>
</template>

<script>
import { mapGetters } from 'vuex'
import ConfigApis from '@/apis/ConfigApis'
import Confirm from '@/components/Confirm'
import fileInput from '@/components/custom/file-input.vue'
import url from 'url'
Expand All @@ -451,7 +455,8 @@ export default {
name: 'Settings',
components: {
DialogGatewayValue,
fileInput
fileInput,
Confirm
},
computed: {
secure () {
Expand Down Expand Up @@ -573,6 +578,18 @@ export default {
reader.onload = e => callback(e.target.result)
reader.readAsText(file)
},
async confirm (title, text, level, options) {
options = options || {}
var levelMap = {
'warning': 'orange',
'alert': 'red'
}
options.color = levelMap[level] || 'primary'
return this.$refs.confirm.open(title, text, options)
},
onFileSelect (data) {
var file = data.files[0]
var self = this
Expand Down Expand Up @@ -612,9 +629,9 @@ export default {
this.editedValue = Object.assign({}, item)
this.dialogValue = true
},
deleteItem (item) {
async deleteItem (item) {
const index = this.gateway.values.indexOf(item)
confirm('Are you sure you want to delete this item?') &&
await this.confirm('Attention', 'Are you sure you want to delete this item?', 'alert') &&
this.gateway.values.splice(index, 1)
},
closeDialog () {
Expand Down

0 comments on commit a45900a

Please sign in to comment.