iobroker.meteoalarm
Version:
905 lines (777 loc) • 38.8 kB
HTML
<html>
<link rel="stylesheet" type="text/css" href="../../css/adapter.css"/>
<link rel="stylesheet" type="text/css" href="../../lib/css/materialize.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
<script type="text/javascript" src="../../lib/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../../socket.io/socket.io.js"></script>
<script type="text/javascript" src="../../js/translate.js"></script>
<script type="text/javascript" src="../../lib/js/materialize.js"></script>
<script type="text/javascript" src="../../js/adapter-settings.js"></script>
<script type="text/javascript" src="words.js"></script>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src='https://unpkg.com/@turf/turf@6/turf.min.js'></script>
<script>
var bbox = turf.bbox(features);
</script>
<style>
.table_header {
background-color: blue;
color: white;
}
.ip {
width: 150px;
text-align: right;
}
</style>
<!-- you have to define 2 functions in the global scope: -->
<script type="text/javascript">
var mymap
var mmr
var locationArray = []
// the function loadSettings has to exist ...
function load(settings, onChange) {
// example: select elements with id=key and class=value and insert value
if (!settings) return;
$('#loadLocationCode').on('click', function () {
onChange();
});
$('#loadSetup').on('click', function () {
onChange();
});
$('.value').each(function () {
var $key = $(this);
var id = $key.attr('id');
var value = $key.attr('val');
if ($key.attr('type') === 'checkbox') {
showSettings(settings);
$key.prop('checked', settings[id]).on('change', function () {
onChange();
});
} else {
// do not call onChange direct, because onChange could expect some arguments
const val = settings[id];
$key.val(val).change(function () {
if ($(this).attr('id') !== 'notificationsType')
onChange();
}).keyup(function () {
onChange();
});
}
});
// reinitialize all the Materialize labels on the page if you are dynamically adding inputs:
if (M) M.updateTextFields();
loadMap()
showSettings(settings);
$('#notificationsType').on('change', function () {
showSettings(settings);
}).trigger('change');
onChange(false);
var $newlat = $('#lat').on('change', updateMapFromInput);
var $newlong = $('#long').on('change', updateMapFromInput);
//updateMap($("#lat").val(),$("#long").val())
$('#loadSetup').click(loadSetup);
$('#loadLocationCode').click(findGeoCode);
console.log('Settings loaded')
//console.log('Val country: ' + $("#geocodeCountry").val())
}
function updateMapFromInput(){
updateMap($("#lat").val(),$("#long").val())
}
function getAdapterInstances(_adapter, callback) {
if (typeof _adapter === 'function') {
callback = _adapter;
_adapter = null;
}
socket.emit('getObjectView', 'system', 'instance', { startkey: 'system.adapter.' + (_adapter || adapter), endkey: 'system.adapter.' + (_adapter || adapter) + '.\u9999' }, function (err, doc) {
if (err) {
callback && callback([]);
} else {
if (doc.rows.length === 0) {
callback && callback([]);
} else {
var res = [];
for (var i = 0; i < doc.rows.length; i++) {
res.push(doc.rows[i].value);
}
callback && callback(res);
}
}
});
}
function findGeoCode(){
console.log('Start import geocode')
document.getElementById("loader").style.display = "block";
$.getJSON('geocodes.json', function(data) {
let jsonString = JSON.stringify(data)
let crs = JSON.parse(jsonString).features;
locationArray = []
var geocodeNameArray = []
var country = ''
for(let i = 0; i < crs.length; i++) {
var loccode = crs[i].properties.code
let polygon = JSON.stringify(crs[i].geometry.coordinates)
let type = JSON.stringify(crs[i].properties.type)
let geocodeLocation = crs[i].properties.name
let countryFound = crs[i].properties.country
if (checkIfInPoly(polygon)){
locationArray.push(loccode)
if (geocodeNameArray.length == 0){
geocodeNameArray.push(geocodeLocation)
}
else{
geocodeNameArray.push(' ' + geocodeLocation)
}
country = countryFound
console.log('Country: ' + country)
}
//console.log('Code: ' + loccode)
};
//$('#loader1').addClass('seenot');
document.getElementById("loader").style.display = "none";
if (!locationArray.length == 0){
console.log('Geocode found')
// geocode gefunden
$("#geocode").val(locationArray);
$("#geocodeLocation").val(geocodeNameArray);
$("#geocodeCountry").val(country);
}
else{
console.log('Geocode not found')
showToast(_('Geocode could not be determined. As this is mandatory to run the adapter, please first check if your location is shown on the map. If yes, create an issue in the meteoalarm adapter and add your location data!'));
}
}
)
}
function checkIfInPoly(polyData){
var polyObject = JSON.parse(polyData)
var myLoc = {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [$("#long").val(), $("#lat").val()]
}
};
var poly = {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates":
polyObject
}
};
var isInside = turf.booleanPointInPolygon(myLoc, poly);
return isInside
}
function loadMap(){
// Define latitude, longitude and zoom level
//https://www.codexworld.com/embed-open-street-map-with-marker-in-html-using-javascript/
var latitude = ""
var longitude = ""
var initialValue = 0
var zoom = 0
if (!($("#lat").val() =="")){
latitude = $("#lat").val()
initialValue += 1
}
else{
latitude = 47.2 ;
}
if (!$("#long").val() ==""){
longitude = $("#long").val()
initialValue += 1
}
else{
longitude = 9.8
}
console.log('Lat: ' + latitude + ' , Long: ' + longitude)
if (initialValue = 2){
// not initial value, therefore zoom further away
zoom = 9;
}
else{
zoom = 13;
}
// Set DIV element to embed map
mymap = L.map('mapWrap');
mmr = L.marker([0,0]);
// Add initial marker & popup window
mmr.addTo(mymap);
// Add copyright attribution
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', {
foo: 'bar',
attribution:'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'}
).addTo(mymap);
// Set lat lng position and zoom level of map
mmr.setLatLng(L.latLng(latitude, longitude));
mymap.setView([latitude, longitude], zoom);
}
function updateMap(lat,long){
// Set lat lng position and zoom level of map
const zoom = 13;
mmr.setLatLng(L.latLng(lat, long));
mymap.setView([lat, long], zoom);
console.log('Map updated with ' + lat+ ', ' + long)
}
// Marker click event handler
function openPopupWindow(e) {
mmr.setPopupContent('Latitude: '+e.latlng.lat+' <br /> Longitude: '+e.latlng.lng).openPopup();
}
function showSettings(settings){
if ($("#notificationsType").children("option:selected").val() === 'Telegram') {
getAdapterInstances('telegram', function (instances) {
fillInstances('telegramInstanz', instances, settings['telegramInstanz'], 'telegram');
});
$('.Mail').hide();
$('.Pushover').hide();
$('.Signal').hide();
$('.Telegram').show();
$('.SynoChat').hide();
} else if ($("#notificationsType").children("option:selected").val() ==='Mail') {
getAdapterInstances('email', function (instances) {
fillInstances('mailInstanz', instances, settings['mailInstanz'], 'email');
});
$('.Telegram').hide();
$('.Pushover').hide();
$('.Signal').hide();
$('.Mail').show();
$('.SynoChat').hide();
} else if ($("#notificationsType").children("option:selected").val() === 'Pushover') {
getAdapterInstances('pushover', function (instances) {
fillInstances('pushInstanz', instances, settings['pushInstanz'], 'pushover');
});
$('.Telegram').hide();
$('.Mail').hide();
$('.Signal').hide();
$('.Pushover').show();
$('.SynoChat').hide();
} else if ($("#notificationsType").children("option:selected").val() === 'Signal') {
getAdapterInstances('signal-cmb', function (instances) {
fillInstances('signalInstanz', instances, settings['signalInstanz'], 'signal-cmb');
});
$('.Telegram').hide();
$('.Mail').hide();
$('.Pushover').hide();
$('.Signal').show();
$('.SynoChat').hide();
} else if ($("#notificationsType").children("option:selected").val() === 'None') {
$('.Telegram').hide();
$('.Mail').hide();
$('.Pushover').hide();
$('.Signal').hide();
$('.SynoChat').hide();
} else if ($("#notificationsType").children("option:selected").val() === 'SynoChat') {
getAdapterInstances('synochat', function (instances) {
fillInstances('synoInstanz', instances, settings['synoInstanz'], 'synochat');
});
$('.Telegram').hide();
$('.Mail').hide();
$('.Pushover').hide();
$('.Signal').hide();
$('.SynoChat').show();
}
}
function fillInstances(id, arr, val, name) {
var $sel = $('#' + id);
$sel.html('<option value="">' + _('none') + '</option>');
for (var i = 0; i < arr.length; i++) {
var _id = arr[i]._id.replace('system.adapter.', '');
$sel.append('<option value="' + _id + '"' + (_id === val ? ' selected' : '') + '>' + _id + '</option>');
}
$sel.select();
}
function loadSetup() {
var longSetup = ''
var latSetup = ''
socket.emit('getObject', 'system.config', function (err, obj) {
latSetup = parseFloat(obj.common.latitude)
longSetup = parseFloat(obj.common.longitude)
var roundedLat= Math.round(latSetup * 100) / 100
var roundedLong = Math.round(longSetup * 100) / 100
$("#lat").val(roundedLat);
$("#long").val(roundedLong);
updateMap(roundedLat,roundedLong)
})
}
function isNumber(str) {
if (typeof str != "string") return false // we only process strings!
return !isNaN(str) && // use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)...
!isNaN(parseFloat(str)) // ...and ensure strings of whitespace fail
}
function checksetup(){
var errorFound = false
if ($('#country').children("option:selected").val() == ""){
showToast(_('Please choose a country name!'));
errorFound = true
}
if ($("#lat").val() == ""){
showToast(_('Please enter a value in "Lattitude'));
errorFound = true
}
if (!isNumber($("#lat").val())) {
showToast(_('Please enter a numeric in "Lattitude'));
errorFound = true
}
if ($("#long").val() == ""){
showToast(_('Please enter a value in "Longitude"'));
errorFound = true
}
if (!isNumber($("#long").val())) {
showToast(_('Please enter a numeric in "Longitude'));
errorFound = true
}
if ($("#geocode").val() == ""){
showToast(_('Please run "Load Geocode"'));
errorFound = true
}
return errorFound
}
// This will be called by the admin adapter when the user presses the save button
function save(callback) {
// example: select elements with class=value and build settings object
console.log('saving country ' + $('#geocodeCountry').val())
if (!checksetup()){
console.log('No errors found')
var obj = {};
$('.value').each(function () {
var $this = $(this);
if ($this.attr('type') === 'checkbox') {
obj[$this.attr('id')] = $this.prop('checked');
} else if ($this.attr('type') === 'number') {
obj[$this.attr('id')] = parseFloat($this.val());
} else if ($this.hasClass("isNumeric")){
obj[$this.attr('id')] = parseInt($this.val());
} else if ($this.attr('type') === 'radio'){
obj['provider'] = parseInt($("input:radio[name ='provider']:checked").val());
} else {
obj[$this.attr('id')] = $this.val();
}
});
//obj.regionName = $('#region').children("option:selected").text()
callback(obj);
}
else{
//wait till errors are fixed
console.log('Errors found')
}
}
</script>
<style>
.wrapper {
display: flex;
flex-direction: column;
justify-content: space-evenly;
width: 50%;
padding-right: 0.75rem;
padding-left: 0.75rem;
}
.headline {
font-weight: bold;
}
#loader {
position: absolute;
display: none;
left: 50%;
top: 50%;
z-index: 4;
width: 120px;
height: 120px;
margin: -76px 0 0 -76px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#mapWrap {
width: 50%;
height: 400px;
margin-right: 1rem;
z-index: 2;
}
.column {
float: left;
width: 40%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="m adapter-container">
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s2"><a href="#tab-settings" class="translate active">alarmLocation</a></li>
<li class="tab col s2"><a href="#tab-htmlwidget" class="translate">widget_style</a></li>
<li class="tab col s2"><a href="#tab-alarmtypes" class="translate">alarmtypes</a></li>
<li class="tab col s2"><a href="#tab-notification" class="translate">notifications</a></li>
<li class="tab col s2"><a href="#tab-notificationsettings" class="translate">notificationfilter</a></li>
</ul>
</div>
<div id="tab-settings" class="col s12 page">
<div class="col s12">
<h6 class="title translate" data-lang="regionsetup">chooseAlarmLocation</h6>
</div>
<div class="row" style="display: flex;">
<div class="wrapper" >
<div class="input-field col headLine" >
<div class="translate">SetPosition1</div>
</div>
<div>
<div class="column col ">
<input type="text" id="lat" class="value" />
<label for="lat" class="translate">lattitude</label>
</div>
<div class="col">
<input type="text" id="long" class="value" />
<label for="long" class="translate">longitude</label>
</div>
</div>
<div style="margin-top: 0.75rem; " class="col">
<a id="loadSetup" class="waves-effect waves-light btn"><i class="material-icons left">sync</i><span class="translate">loadSetup</span></a>
</div>
<div class="input-field col headLine">
<div class="translate">InstructionGeoCode</div>
</div>
<div class="col">
<a id="loadLocationCode" class="waves-effect waves-light btn"><i class="material-icons left">map</i><span class="translate">LoadGeocode</span></a>
</div>
<div class="col" style="width:80%">
<input type="text" id="geocodeLocation" class="value" readonly/>
</div>
<div class="col" style="width:20%" hidden>
<input type="text" id="geocode" class="value" readonly/>
</div>
<div class="col" style="width:20%" hidden>
<input type="text" id="geocodeCountry" class="value" readonly/>
</div>
</div>
<div id="mapWrap"></div>
</div>
<div id="loader"></div>
</div>
<div id="tab-htmlwidget" class="col s12 page">
<div>
<div class="col s12">
<h6 class="title translate" data-lang="adjuststyleinfo">adjuststyleinfo</h6>
</div>
<div>
<div class="input-field col">
<input type="checkbox" id="noBackgroundColor" class="value" />
<label for="noBackgroundColor" class="translate">noBackgroundColor</label>
</div>
<div class="input-field col">
<input type="checkbox" id="whiteIcons" class="value" />
<label for="whiteIcons" class="translate">whiteIcons</label>
</div>
</div>
<div>
<div class="input-field col">
<input type="checkbox" id="noIcons" class="value" />
<label for="noIcons" class="translate">noIcons</label>
</div>
<div class="input-field col">
<input type="checkbox" id="dayInWords" class="value" />
<label for="dayInWords" class="translate">dayInWords</label>
</div>
</div>
<div>
<div class="input-field col s3">
<select class="value select-image-size" id="imageSize">
<option value="0" class="translate">small</option>
<option value="1" class="translate">medium</option>
<option value="2" class="translate">large</option>
</select>
<label for="imageSize" class="translate">selectImageSize</label>
</div>
</div>
<div>
<div class="input-field col s12">
<div class="translate">ColorDefinition</div>
</div>
</div>
<div>
<div class="input-field col">
<input type="text" id="warningColorLevel1" class="value" />
<label for="warningColorLevel1" class="translate">TextwarningColorLevel1</label>
</div>
<div class="input-field col">
<input type="text" id="warningColorLevel2" class="value" />
<label for="warningColorLevel2" class="translate">TextwarningColorLevel2</label>
</div>
</div>
<div>
<div class="input-field col">
<input type="text" id="warningColorLevel3" class="value" />
<label for="warningColorLevel3" class="translate">TextwarningColorLevel3</label>
</div>
<div class="input-field col">
<input type="text" id="warningColorLevel4" class="value" />
<label for="warningColorLevel4" class="translate">TextwarningColorLevel4</label>
</div>
</div>
</div>
</div>
<div id="tab-alarmtypes" class="col s12 page">
<div>
<div class="col s12">
<h6 class="title translate" data-lang="alarmlevelsetup">alarmlevelsetup</h6>
</div>
<div class="input-field col">
<select class="value select-image-size" id="warningLevelSetupGeneral">
<option value="0" class="translate">LevelSetup1</option>
<option value="1" class="translate">LevelSetup2</option>
<option value="2" class="translate">LevelSetup3</option>
</select>
<label for="warningLevelSetupGeneral" class="translate">warningLevelSetupGeneral</label>
</div>
</div>
<div class="col s12">
<h6 class="title translate" data-lang="alarmtypeGeneralsetup">alarmtypeGeneralsetup</h6>
</div>
<div>
<div class="input-field col s3">
<img width="20" height="20" src="icons/black/t1.png"/>
<input type="checkbox" id="warningType1" class="value" />
<label for="warningType1" class="translate">warningType1</label>
</div>
<div class="input-field col s3">
<img width="20" height="20" src="icons/black/t2.png"/>
<input type="checkbox" id="warningType2" class="value" />
<label for="warningType2" class="translate">warningType2</label>
</div>
<div class="input-field col s3">
<img width="20" height="20" src="icons/black/t3.png"/>
<input type="checkbox" id="warningType3" class="value" />
<label for="warningType3" class="translate">warningType3</label>
</div>
<div class="input-field col s3">
<img width="20" height="20" src="icons/black/t4.png"/>
<input type="checkbox" id="warningType4" class="value" />
<label for="warningType4" class="translate">warningType4</label>
</div>
</div>
<div>
<div class="input-field col s3">
<img width="20" height="20" src="icons/black/t5.png"/>
<input type="checkbox" id="warningType5" class="value" />
<label for="warningType5" class="translate">warningType5</label>
</div>
<div class="input-field col s3">
<img width="20" height="20" src="icons/black/t6.png"/>
<input type="checkbox" id="warningType6" class="value" />
<label for="warningType6" class="translate">warningType6</label>
</div>
<div class="input-field col s3">
<img width="20" height="20" src="icons/black/t7.png"/>
<input type="checkbox" id="warningType7" class="value" />
<label for="warningType7" class="translate">warningType7</label>
</div>
<div class="input-field col s3">
<img width="20" height="20" src="icons/black/t8.png"/>
<input type="checkbox" id="warningType8" class="value" />
<label for="warningType8" class="translate">warningType8</label>
</div>
</div>
<div>
<div class="input-field col s3">
<img width="20" height="20" src="icons/black/t9.png"/>
<input type="checkbox" id="warningType9" class="value" />
<label for="warningType9" class="translate">warningType9</label>
</div>
<div class="input-field col s3">
<img width="20" height="20" src="icons/black/t10.png"/>
<input type="checkbox" id="warningType10" class="value" />
<label for="warningType10" class="translate">warningType10</label>
</div>
<div class="input-field col s3">
<img width="20" height="20" src="icons/black/t12.png"/>
<input type="checkbox" id="warningType12" class="value" />
<label for="warningType12" class="translate">warningType12</label>
</div>
<div class="input-field col s3">
<img width="20" height="20" src="icons/black/t13.png"/>
<input type="checkbox" id="warningType13" class="value" />
<label for="warningType13" class="translate">warningType13</label>
</div>
</div>
</div>
<div id="tab-notification" class="col s12 page">
<div>
<div class="col s12">
<h6 class="title translate" data-lang="notifications type">notifications type</h6>
</div>
<div>
<div class="input-field col s11 m2">
<select class="value" id="notificationsType">
<option value="None" class="translate">none</option>
<option value="Telegram" class="translate">Telegram</option>
<option value="Mail" class="translate">E-Mail</option>
<option value="Pushover" class="translate">Pushover</option>
<option value="Signal" class="translate">Signal</option>
<option value="SynoChat" class="translate">SynoChat</option>
</select>
<label for="notificationsType" class="translate">notifications type</label>
</div>
<div class="input-field col s4 m2 Telegram">
<select id="telegramInstanz" class="value"></select>
<label class="translate" for="telegramInstanz">chooseTelegramInstance</label>
</div>
<div class="input-field col s4 m2 Mail">
<select id="mailInstanz" class="value"></select>
<label class="translate" for="mailInstanz">chooseMailInstance</label>
</div>
<div class="input-field col s3 Mail">
<input type="text" id="mailAddress" class="value" />
<label for="mailAddress" class="translate">addMailAddress</label>
</div>
<div class="input-field col s4 m2 Pushover">
<select id="pushInstanz" class="value"></select>
<label class="translate" for="pushInstanz">choosePushOverInstance</label>
</div>
<div class="input-field col s4 m2 Signal">
<select id="signalInstanz" class="value"></select>
<label class="translate" for="signalInstanz">chooseSignalInstance</label>
</div>
<div class="input-field col s4 m2 SynoChat">
<select id="synoInstanz" class="value"></select>
<label class="translate" for="synoInstanz">chooseSynoChatInstance</label>
</div>
<div class="input-field col s3 SynoChat">
<input type="text" id="SynoChannel" class="value" />
<label for="SynoChannel" class="translate">synoChatChannel</label>
</div>
</div>
<div class="col s12">
<h6 class="title translate" data-lang="notification settings">notification settings</h6>
</div>
<div>
<div class="input-field col s3">
<input type="checkbox" id="showLocation" class="value" />
<label for="showLocation" class="translate">showLocation</label>
</div>
<div class="input-field col s3">
<input type="checkbox" id="levelInWords" class="value" />
<label for="levelInWords" class="translate">warningLevelInWords</label>
</div>
<div class="input-field col s3">
<input type="checkbox" id="noDetails" class="value" />
<label for="noDetails" class="translate">noDetails</label>
</div>
<div class="input-field col s3">
<input type="checkbox" id="noWarningsNotification" class="value" />
<label for="noWarningsNotification" class="translate">noWarnings</label>
</div>
</div>
<div>
<div class="input-field col s11 m2">
<select class="value" id="levelType">
<option value="None" class="translate">none</option>
<option value="Rufezeichen" class="translate">❗❗❗</option>
<option value="Kreise" class="translate">🟢 🟡 🟠 🔴</option>
</select>
<label for="levelType" class="translate">alarmlevelType</label>
</div>
</div>
</div>
</div>
<div id="tab-notificationsettings" class="col s12 page">
<div>
<div class="col s12">
<h6 class="title translate" data-lang="alarmlevelsetupNotification">alarmlevelsetupNotification</h6>
</div>
<div class="input-field col s3">
<select class="value select-image-size" id="warningLevelSetupNotification">
<option value="0" class="translate">LevelSetup1</option>
<option value="1" class="translate">LevelSetup2</option>
<option value="2" class="translate">LevelSetup3</option>
</select>
<label for="warningLevelSetupNotification" class="translate">warningLevelSetupNotification</label>
</div>
</div>
<div class="col s12">
<h6 class="title translate" data-lang="alarmtypeNotificationsetup">alarmtypeNotificationsetup</h6>
</div>
<div>
<div class="input-field col s3">
<img width="20" height="20" src="icons/black/t1.png"/>
<input type="checkbox" id="warningType1Notification" class="value" />
<label for="warningType1Notification" class="translate">warningType1</label>
</div>
<div class="input-field col s3">
<img width="20" height="20" src="icons/black/t2.png"/>
<input type="checkbox" id="warningType2Notification" class="value" />
<label for="warningType2Notification" class="translate">warningType2</label>
</div>
<div class="input-field col s3">
<img width="20" height="20" src="icons/black/t3.png"/>
<input type="checkbox" id="warningType3Notification" class="value" />
<label for="warningType3Notification" class="translate">warningType3</label>
</div>
<div class="input-field col s3">
<img width="20" height="20" src="icons/black/t4.png"/>
<input type="checkbox" id="warningType4Notification" class="value" />
<label for="warningType4Notification" class="translate">warningType4</label>
</div>
</div>
<div>
<div class="input-field col s3">
<img width="20" height="20" src="icons/black/t5.png"/>
<input type="checkbox" id="warningType5Notification" class="value" />
<label for="warningType5Notification" class="translate">warningType5</label>
</div>
<div class="input-field col s3">
<img width="20" height="20" src="icons/black/t6.png"/>
<input type="checkbox" id="warningType6Notification" class="value" />
<label for="warningType6Notification" class="translate">warningType6</label>
</div>
<div class="input-field col s3">
<img width="20" height="20" src="icons/black/t7.png"/>
<input type="checkbox" id="warningType7Notification" class="value" />
<label for="warningType7Notification" class="translate">warningType7</label>
</div>
<div class="input-field col s3">
<img width="20" height="20" src="icons/black/t8.png"/>
<input type="checkbox" id="warningType8Notification" class="value" />
<label for="warningType8Notification" class="translate">warningType8</label>
</div>
</div>
<div>
<div class="input-field col s3">
<img width="20" height="20" src="icons/black/t9.png"/>
<input type="checkbox" id="warningType9Notification" class="value" />
<label for="warningType9Notification" class="translate">warningType9</label>
</div>
<div class="input-field col s3">
<img width="20" height="20" src="icons/black/t10.png"/>
<input type="checkbox" id="warningType10Notification" class="value" />
<label for="warningType10Notification" class="translate">warningType10</label>
</div>
<div class="input-field col s3">
<img width="20" height="20" src="icons/black/t12.png"/>
<input type="checkbox" id="warningType12Notification" class="value" />
<label for="warningType12Notification" class="translate">warningType12</label>
</div>
<div class="input-field col s3">
<img width="20" height="20" src="icons/black/t13.png"/>
<input type="checkbox" id="warningType13Notification" class="value" />
<label for="warningType13Notification" class="translate">warningType13</label>
</div>
</div>
</div>
</div>
</body>
</html>