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.

262 lines
12 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>DWD Module 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>DWD Module 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="regions">Regions</v-tab>
<v-tab key="notificationConfig" v-show="EXPERTMODE">Notification Configuration</v-tab>
</v-tabs>
<v-tabs-items v-model="configTab">
<v-tab-item key="regions">
<v-container>
<v-row>
<v-checkbox label="use German POCSAG" v-model="configData.germanUmlautSupport"></v-checkbox>
</v-row>
<v-row>
<h3>Regions:</h3>
</v-row>
<v-row>
<v-btn color="primary" fab dark small icon @click="addRegionCMD()">
<v-icon>mdi-plus</v-icon>
</v-btn>
</v-row>
<v-row v-for="(region, index) in configData.regions" :key="region._id" >
<v-col cols="4">
<v-checkbox label="Active" v-model="region.active"></v-checkbox>
<v-text-field v-model="region.name" label="Name"></v-text-field>
<v-text-field v-model="region.dwdID" label="DWD ID"></v-text-field>
<v-autocomplete
v-model="region.preset"
:items="presetSearchItems"
:loading="!presetSearchItems.length > 0"
color="white"
hide-no-data
dense
label="Profile"
placeholder="Start typing to Search"
prepend-icon="mdi-database-search"
></v-autocomplete>
</v-col>
<v-col cols="3">
<v-row v-for="(dwdType) of dwdTypes1">
<v-select v-model="region.levels[ dwdType.u ]" :label="dwdType.k" :items="dwdType.i" ></v-checkbox>
</v-row>
</v-col>
<v-col cols="3">
<v-row v-for="(dwdType) of dwdTypes2">
<v-select v-model="region.levels[ dwdType.u ]" :label="dwdType.k" :items="dwdType.i" ></v-checkbox>
</v-row>
</v-col>
<v-col cols="2">
<v-btn color="error" @click="configData.regions.splice(index, 1)" fab icon><v-icon>mdi-delete</v-icon></v-btn>
</v-col>
</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-card class="mx-auto" max-width="344">
<v-card-text>
<div>Hilfe (de)</div>
<div class="text--primary">
DWD ID auf <a href="https://wettwarn.de/wettwarn_wetterwarnungen/warnregion_waehlen/index.html">WettWarn</a> generieren und 3 stelligen Code einfügen
<a href="https://wettwarn.de/ueber_wetterwarnungen/warnkriterien/index.html">Warnstufen</a>
</div>
</v-card-text>
</v-card>
</v-content>
</v-app>
</div>
<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() {
return {
EXPERTMODE: false,
configTab: null,
configData: {
"pager": {
"url": "",
"params": {
"type": "",
"routing": {
"device": "",
"connectors": []
}
}
},
"germanUmlautSupport": false,
"regions": []
},
presetSearchItems: [],
dwdTypes1: [
{ n: 4, k: 'Wind / Sturm / Orkan', u: 'wind_storm',
i: [
{ text: 'ignore', value: 666 },
{ text: 'Level 1 or higher', value: 1 },
{ text: 'Level 2 or higher', value: 2 },
{ text: 'Level 3 or higher', value: 3 },
{ text: 'Level 4', value: 4 },
]
},
{ n: 4, k: 'Gewitter', u: 'thunderstorm',
i: [
{ text: 'ignore', value: 666 },
{ text: 'Level 1 or higher', value: 1 },
{ text: 'Level 2 or higher', value: 2 },
{ text: 'Level 3 or higher', value: 3 },
{ text: 'Level 4', value: 4 },
]
},
{ n: 4, k: 'Starkregen', u: 'rain1',
i: [
{ text: 'ignore', value: 666 },
{ text: 'Level 2 or higher', value: 2 },
{ text: 'Level 3 or higher', value: 3 },
{ text: 'Level 4', value: 4 },
]
},
{ n: 4, k: 'Dauerregen', u: 'rain2',
i: [
{ text: 'ignore', value: 666 },
{ text: 'Level 2 or higher', value: 2 },
{ text: 'Level 3 or higher', value: 3 },
{ text: 'Level 4', value: 4 },
]
},
],
dwdTypes2: [
{ n: 4, k: 'Schneefall/-verwehungen', u: 'snow',
i: [
{ text: 'ignore', value: 666 },
{ text: 'Level 1 or higher', value: 1 },
{ text: 'Level 2 or higher', value: 2 },
{ text: 'Level 3 or higher', value: 3 },
{ text: 'Level 4', value: 4 },
]
},
{ n: 4, k: 'Glaette', u: 'ice',
i: [
{ text: 'ignore', value: 666 },
{ text: 'Level 1 or higher', value: 1 },
{ text: 'Level 2 or higher', value: 2 },
{ text: 'Level 3 or higher', value: 3 },
{ text: 'Level 4', value: 4 },
]
},
{ n: 2, k: 'Frost', u: 'frost',
i: [
{ text: 'ignore', value: 666 },
{ text: 'Level 1 or higher', value: 1 },
{ text: 'Level 2', value: 2 },
]
},
{ n: 1, k: 'Nebel', u: 'fog',
i: [
{ text: 'ignore', value: 666 },
{ text: 'Level 1', value: 1 },
]
},
{ n: 1, k: 'Andere Warnmeldungen', u: 'other',
i: [
{ text: 'ignore', value: 666 },
{ text: 'allow', value: 0 },
]
},
],
}
},
created() {
this.loadPresets()
this.loadConfig()
},
methods: {
loadPresets() {
this.$http.get('api/deliveryPresets')
.then(response => {
this.presetSearchItems = response.body.map(x => { return {
text: x.name,
value: x.key,
}})
}, response => {
})
},
loadConfig() {
this.$http.get('config').then(response => {
const newConfig = response.body
newConfig.regions = newConfig.regions.map((x) => {
x._id = btoa(JSON.stringify(x))
return x
})
this.configData = newConfig
}, response => {
})
},
storeConfig() {
const storeConfig = JSON.parse(JSON.stringify(this.configData))
storeConfig.regions = storeConfig.regions.map((x) => {
delete x._id
return x
})
this.$http.post('config', storeConfig).then(response => {
})
.then(this.$http.post('restart'))
.then(() => {
document.body.style = 'display:none'
setTimeout(() => window.location.reload(), 1e3)
})
},
addDeliveryTarget() {
this.configData.pager.params.routing.connectors.push(["connectorName","connectorParam"])
},
addRegionCMD() {
this.configData.regions.push({
name: "",
active: true,
levels: [],
dwdID: "",
})
},
}
})
</script>
</body>
</html>