<!DOCTYPE html>
<html>
<head>
<title>Testalarm Configuration</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-app-bar app>
<v-toolbar-title>Testalarm Configuration</v-toolbar-title>
<v-spacer></v-spacer>
<v-checkbox label="Expert Mode" v-model="EXPERTMODE"></v-checkbox>
</v-app-bar>
<v-content>
<v-form>
<v-tabs v-model="configTab" next-icon="mdi-arrow-right-bold-box-outline"
prev-icon="mdi-arrow-left-bold-box-outline" show-arrows>
<v-tabs-slider></v-tabs-slider>
<v-tab key="testAlarms">Testalarms</v-tab>
<v-tab v-show="EXPERTMODE" key="notificationConfig">Notification Configuration</v-tab>
</v-tabs>
<v-tabs-items v-model="configTab">
<v-tab-item key="testAlarms">
<v-container>
<p>Targets:</p>
<v-row>
<v-btn color="success" @click="addAlarm()">Add</v-btn>
</v-row>
<v-row v-for="(alarmConfig, index) in configData.alarms" :key="alarmConfig._id"
style="border-bottom: 2px solid black;">
<v-col cols="12" sm="12" md="12">
<v-btn color="error" @click="configData.alarms.splice(index, 1)" icon>
<v-icon>mdi-delete</v-icon>
</v-btn>
</v-col>
<v-col cols="12" sm="12" md="12">
<v-col>
<v-row>
<v-select :items="alarmSchedulingMode" v-model="alarmConfig.alarmSchedulingMode"
item-text="k" item-value="v" label="Scheduling Mode"></v-select>
</v-row>
<v-row>
<v-time-picker format="24hr" v-model="alarmConfig.alarmTime"></v-time-picker>
</v-row>
<v-row cols="3" sm="3" md="3" v-show="alarmConfig.alarmSchedulingMode == 'weekly'">
<v-checkbox v-for="(WN, index) of weekDays" v-model="alarmConfig.weekDay[ index ]" :label="WN"></v-checkbox>
</v-row>
<v-row cols="3" sm="3" md="3" v-show="alarmConfig.alarmSchedulingMode == 'monthlyFirstOccWeekday'">
<v-select :items="weekDaysSelect" v-model="alarmConfig.firstOccWeekday" label="First Occurance of this Weekday"></v-select>
</v-row>
<v-row cols="3" sm="3" md="3" v-show="alarmConfig.alarmSchedulingMode == 'monthlyAtSpecificDate'">
<v-text-field v-model="alarmConfig.specificWeekday" label="Specific Date (xx-MM-YYYY)"></v-text-field>
</v-row>
</v-col>
<hr/>
</v-col>
<v-col cols="6" sm="6" md="4">
<v-text-field v-model="alarmConfig.name" label="Name"></v-text-field>
<v-textarea v-model="alarmConfig.payload" label="Message"></v-textarea>
</v-col>
<v-col>
<v-col cols="12" sm="12" md="6">
<v-select :items="pagerTypes" v-model="alarmConfig.params.type"
item-text="k" item-value="v" label="Delivery Type"></v-select>
</v-col>
<v-row>
<v-col cols="12" sm="12" md="6">
<v-select :items="deviceType"
v-model="alarmConfig.params.routing.device" item-text="k"
item-value="v" label="Device"></v-select>
</v-col>
</v-row>
<b>Delivery Targets:</b>
<v-btn color="success" @click="addDeliveryTarget(index)">Add</v-btn>
<v-row v-for="(connector, index) in alarmConfig.params.routing.connectors"
:key="index">
<v-col cols="6" sm="4" md="4">
<v-select :items="connectorTypes" v-model="connector[0]" item-text="k"
item-value="v" label="Gateway"></v-select>
</v-col>
<v-col cols="6" sm="4" md="4">
<v-text-field v-model="connector[1]" label="Call ID"></v-text-field>
</v-col>
<v-col cols="6" sm="4" md="4">
<v-btn color="error"
@click="alarmConfig.params.routing.connectors.splice(index, 1)"
icon>
<v-icon>mdi-delete</v-icon>
</v-btn>
</v-col>
</v-row>
</v-col>
</v-row>
<v-row>
<v-btn color="success" @click="storeConfig()">Store & Restart</v-btn>
</v-row>
</v-container>
</v-tab-item>
<v-tab-item key="notificationConfig">
<v-container>
<b>Routing Paramters:</b>
<v-row>
<v-col cols="12" sm="12" md="6">
<v-text-field label="Daemon Endpoint URL" v-model="configData.pager.url">
</v-text-field>
</v-col>
<v-row>
<v-btn color="success" @click="storeConfig()">Store & Restart</v-btn>
</v-row>
</v-container>
</v-tab-item>
</v-tabs-items>
</v-form>
</v-content>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
http: { root: '/' },
data() {
const weekDays = [
'Monday','Tuesday','Wednesday','Thursday','Friday','Saturday', 'Sunday'
]
return {
EXPERTMODE: false,
configTab: null,
pagerTypes: [
{ k: 'Simple', v: 'simple' },
{ k: 'Duplex', v: 'duplex' },
],
deviceType: [
{ k: 'Generic', v: 'generic' },
{ k: 'Birdy Slim (IoT)', v: 'birdyslim' },
],
connectorTypes: [
{ k: 'Dummy', v: 'dummy' },
{ k: 'POCSAG GW', v: 'pocsag' },
{ k: 'DAPNET', v: 'dapnet' },
{ k: 'e*Cityruf inetgw', v: 'ecityruf' },
{ k: 'e*Cityruf Puppeteer', v: 'em-p-cityruf' },
{ k: 'e*Cityruf alertManager', v: 'em-a-cityruf' },
{ k: 'e*2wayS Puppeteer', v: 'em-p-twoways' },
{ k: 'e*2wayS alertManager', v: 'em-a-twoways' },
{ k: 'LoRaWAN TTNv3', v: 'lorawan' },
],
alarmSchedulingMode: [
{ k: 'Weekly', v: 'weekly' },
{ k: 'Monthly at first occurance of a specific weekday', v: 'monthlyFirstOccWeekday' },
{ k: 'Monthly at specific date', v: 'monthlyAtSpecificDate' },
],
weekDays,
weekDaysSelect: weekDays.map((val,ind) => { return { value: ind, text: val } }),
configData: {
"bottoken": "",
"pager": {
"url": "",
},
"menuSupport": false,
"deliveryModes": []
},
}
},
created() {
this.loadConfig()
},
methods: {
loadConfig() {
this.$http.get('/config').then(response => {
const newConfig = response.body
newConfig.alarms = newConfig.alarms.map((x) => {
x._id = btoa(JSON.stringify(x))
return x
})
this.configData = newConfig
}, response => {
})
},
storeConfig() {
const storeConfig = JSON.parse(JSON.stringify(this.configData))
storeConfig.alarms = storeConfig.alarms.map(a=> {
delete a._id
return a
})
this.$http.post('/config', storeConfig).then(response => {
})
.then(this.$http.post('/restart'))
.then(() => {
document.body.style = 'display:none'
setTimeout(() => window.location.reload(), 1e3)
})
},
addDeliveryTarget(index) {
this.configData.alarms[index].params.routing.connectors.push(["connectorName", "connectorParam"])
},
addAlarm() {
this.configData.alarms.push({
name: "Testalarm",
params: {
"type": "simple",
"routing": {
"device": "generic",
"connectors": []
},
"alarmSchedulingMode": "weekly",
"alarmTime": "13:37",
"payload": "Probealarm jeden Tag 1337",
"weekDay": {
"0": true,
"1": true,
"2": true,
"3": true,
"4": true,
"5": true,
"6": true
},
},
})
},
}
})
</script>
</body>
</html>