You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
276 lines
15 KiB
HTML
276 lines
15 KiB
HTML
2 years ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<title>Brandgefahren Configuration</title>
|
||
|
|
<!-- <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> -->
|
||
|
|
<link href="/css/materialdesignicons.min.css" rel="stylesheet">
|
||
|
|
<link href="/css/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>Brandgefahren Configuration</v-toolbar-title>
|
||
|
|
<v-spacer></v-spacer>
|
||
|
|
<v-btn color="success" @click="storeConfig()">Store & Restart</v-btn>
|
||
|
|
<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="bradgefahren">Brandgefahren</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="brandgefahren">
|
||
|
|
<v-container>
|
||
|
|
<v-row>
|
||
|
|
<v-btn color="primary" fab dark small icon @click="addAlarm()">
|
||
|
|
<v-icon>mdi-plus</v-icon>
|
||
|
|
</v-btn>
|
||
|
|
</v-row>
|
||
|
|
|
||
|
|
<v-row v-for="(alarmConfig, index) in configData.alarms" :key="alarmConfig._id">
|
||
|
|
<v-card>
|
||
|
|
<v-card-text>
|
||
|
|
<v-col cols="12">
|
||
|
|
<v-btn color="error" dark small fab @click="configData.alarms.splice(index, 1)" icon>
|
||
|
|
<v-icon>mdi-delete</v-icon>
|
||
|
|
</v-btn>
|
||
|
|
</v-col>
|
||
|
|
<v-col cols="12">
|
||
|
|
<v-row cols="6">
|
||
|
|
<v-select :items="alarmSchedulingMode" v-model="alarmConfig.alarmSchedulingMode"
|
||
|
|
item-text="k" item-value="v" label="Scheduling Mode"></v-select>
|
||
|
|
<v-text-field v-model="alarmConfig.alarmTime" type="time" label="Time"></v-text-field>
|
||
|
|
</v-row>
|
||
|
|
<v-row cols="6" 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="6" 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="6" v-show="alarmConfig.alarmSchedulingMode == 'monthlyAtSpecificDate'">
|
||
|
|
<v-text-field v-model="alarmConfig.specificWeekday" label="Specific Date (xx-MM-YYYY)" type="number"></v-text-field>
|
||
|
|
</v-row>
|
||
|
|
</v-col>
|
||
|
|
<v-row cols="12">
|
||
|
|
<v-text-field v-model="alarmConfig.name" label="Name"></v-text-field>
|
||
|
|
<v-autocomplete
|
||
|
|
v-model="alarmConfig.preset"
|
||
|
|
:items="presetSearchItems"
|
||
|
|
:loading="!presetSearchItems.length > 0"
|
||
|
|
color="white"
|
||
|
|
hide-no-data
|
||
|
|
label="Profile"
|
||
|
|
placeholder="Start typing to Search"
|
||
|
|
prepend-icon="mdi-database-search"
|
||
|
|
></v-autocomplete>
|
||
|
|
</v-row>
|
||
|
|
<v-row cols="12">
|
||
|
|
<v-checkbox v-model="alarmConfig.wbxEnabled" label="WBi"></v-checkbox>
|
||
|
|
<v-autocomplete
|
||
|
|
:readonly="!alarmConfig.wbxEnabled"
|
||
|
|
v-model="alarmConfig.wbxCounty"
|
||
|
|
:items="autocompleteData.wbx.countyNames"
|
||
|
|
:loading="!autocompleteData.wbx.countyNames.length > 0"
|
||
|
|
hide-no-data
|
||
|
|
label="County"
|
||
|
|
placeholder="WBi-Land"
|
||
|
|
prepend-icon="mdi-map"
|
||
|
|
></v-autocomplete>
|
||
|
|
<v-autocomplete
|
||
|
|
:readonly="!alarmConfig.wbxEnabled"
|
||
|
|
v-model="alarmConfig.wbxStation"
|
||
|
|
:items="acWBXStations(alarmConfig)"
|
||
|
|
:loading="!autocompleteData.wbx.countyNames.length > 0"
|
||
|
|
hide-no-data
|
||
|
|
label="Station"
|
||
|
|
placeholder="WBi-Station"
|
||
|
|
prepend-icon="mdi-city"
|
||
|
|
></v-autocomplete>
|
||
|
|
</v-row>
|
||
|
|
<v-row cols="12">
|
||
|
|
<v-checkbox v-model="alarmConfig.gbxEnabled" label="GBi"></v-checkbox>
|
||
|
|
<v-autocomplete
|
||
|
|
:readonly="!alarmConfig.gbxEnabled"
|
||
|
|
v-model="alarmConfig.gbxCounty"
|
||
|
|
:items="autocompleteData.gbx.countyNames"
|
||
|
|
:loading="!autocompleteData.gbx.countyNames.length > 0"
|
||
|
|
hide-no-data
|
||
|
|
label="County"
|
||
|
|
placeholder="GBi-Land"
|
||
|
|
prepend-icon="mdi-map"
|
||
|
|
></v-autocomplete>
|
||
|
|
<v-autocomplete
|
||
|
|
:readonly="!alarmConfig.gbxEnabled"
|
||
|
|
v-model="alarmConfig.gbxStation"
|
||
|
|
:items="acGBXStations(alarmConfig)"
|
||
|
|
:loading="!autocompleteData.gbx.countyNames.length > 0"
|
||
|
|
hide-no-data
|
||
|
|
label="Station"
|
||
|
|
placeholder="GBi-Station"
|
||
|
|
prepend-icon="mdi-city"
|
||
|
|
></v-autocomplete>
|
||
|
|
</v-row>
|
||
|
|
<v-text-field v-model="alarmConfig.forecastLength" label="Days of forecast" type="number"></v-text-field>
|
||
|
|
<v-btn color="warn" @click="testTrigger(index)">
|
||
|
|
TEST (only saved config)
|
||
|
|
</v-btn>
|
||
|
|
</v-card-text>
|
||
|
|
</v-card>
|
||
|
|
</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-container>
|
||
|
|
</v-tab-item>
|
||
|
|
</v-tabs-items>
|
||
|
|
</v-form>
|
||
|
|
</v-content>
|
||
|
|
</v-app>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="/js/moment-with-locales.min.js"></script>
|
||
|
|
<script src="/js/vue/vue.js"></script>
|
||
|
|
<script src="/js/vue/vuetify.js"></script>
|
||
|
|
<script src="/js/vue/vue-resource_1.5.1.js"></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,
|
||
|
|
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": []
|
||
|
|
},
|
||
|
|
autocompleteData: {
|
||
|
|
wbx: {counties: {}, countyNames: []},
|
||
|
|
gbx: {counties: {}, countyNames: []},
|
||
|
|
},
|
||
|
|
presetSearchItems: [],
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.loadPresets()
|
||
|
|
this.loadConfig()
|
||
|
|
this.loadAutocompletes()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
acWBXStations(alarmConfig) {
|
||
|
|
if (alarmConfig.wbxCounty && this.autocompleteData.wbx.countyNames.length > 0) {
|
||
|
|
if (!this.autocompleteData.wbx.counties[ alarmConfig.wbxCounty ]) return []
|
||
|
|
return this.autocompleteData.wbx.counties[ alarmConfig.wbxCounty ].stationNames
|
||
|
|
}
|
||
|
|
return []
|
||
|
|
},
|
||
|
|
acGBXStations(alarmConfig) {
|
||
|
|
if (alarmConfig.gbxCounty && this.autocompleteData.gbx.countyNames.length > 0) {
|
||
|
|
if (!this.autocompleteData.gbx.counties[ alarmConfig.gbxCounty ]) return []
|
||
|
|
return this.autocompleteData.gbx.counties[ alarmConfig.gbxCounty ].stationNames
|
||
|
|
}
|
||
|
|
return []
|
||
|
|
},
|
||
|
|
testTrigger(index) {
|
||
|
|
this.$http.get(window.location.pathname + 'api/trigger/' + index)
|
||
|
|
.then(response => {})
|
||
|
|
},
|
||
|
|
loadPresets() {
|
||
|
|
this.$http.get(window.location.pathname + 'api/deliveryPresets')
|
||
|
|
.then(response => {
|
||
|
|
this.presetSearchItems = response.body.map(x => { return {
|
||
|
|
text: x.name,
|
||
|
|
value: x.key,
|
||
|
|
}})
|
||
|
|
}, response => {
|
||
|
|
})
|
||
|
|
},
|
||
|
|
loadConfig() {
|
||
|
|
this.$http.get(window.location.pathname + '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 => {
|
||
|
|
})
|
||
|
|
},
|
||
|
|
loadAutocompletes() {
|
||
|
|
this.$http.get(window.location.pathname + 'wg/autocomplete').then(response => {
|
||
|
|
this.autocompleteData = response.body
|
||
|
|
}, response => {
|
||
|
|
})
|
||
|
|
},
|
||
|
|
storeConfig() {
|
||
|
|
const storeConfig = JSON.parse(JSON.stringify(this.configData))
|
||
|
|
storeConfig.alarms = storeConfig.alarms.map(a=> {
|
||
|
|
delete a._id
|
||
|
|
return a
|
||
|
|
})
|
||
|
|
this.$http.post(window.location.pathname + 'config', storeConfig)
|
||
|
|
.then(response => {})
|
||
|
|
.then(this.$http.post(window.location.pathname + 'restart'))
|
||
|
|
.then(() => {
|
||
|
|
document.body.style = 'display:none'
|
||
|
|
setTimeout(() => window.location.reload(), 1e3)
|
||
|
|
})
|
||
|
|
},
|
||
|
|
addAlarm() {
|
||
|
|
this.configData.alarms.push({
|
||
|
|
name: "Alarm 1",
|
||
|
|
preset: null,
|
||
|
|
alarmSchedulingMode: "weekly",
|
||
|
|
alarmTime: "13:37",
|
||
|
|
weekDay: {
|
||
|
|
"0": true,
|
||
|
|
"1": true,
|
||
|
|
"2": true,
|
||
|
|
"3": true,
|
||
|
|
"4": true,
|
||
|
|
"5": true,
|
||
|
|
"6": true
|
||
|
|
},
|
||
|
|
wbxEnabled: false,
|
||
|
|
gbxEnabled: false,
|
||
|
|
forecastLength: 3,
|
||
|
|
})
|
||
|
|
},
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|