|
|
|
@ -99,6 +99,28 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\ |
|
|
|
display: none;\ |
|
|
|
width: 100%%;\ |
|
|
|
}\ |
|
|
|
\ |
|
|
|
#SubTabContent.tab-content {\ |
|
|
|
display: flex;\ |
|
|
|
}\ |
|
|
|
\ |
|
|
|
#SubTabContent.tab-content > .tab-pane {\ |
|
|
|
display: block; /* undo \"display: none;\" */\ |
|
|
|
visibility: hidden;\ |
|
|
|
margin-right: -100%%;\ |
|
|
|
width: 100%%;\ |
|
|
|
}\ |
|
|
|
\ |
|
|
|
#SubTabContent.tab-content > .active {\ |
|
|
|
visibility: visible;\ |
|
|
|
}\ |
|
|
|
\ |
|
|
|
/* IOS display fix */\ |
|
|
|
select {\ |
|
|
|
-webkit-appearance: none;\ |
|
|
|
-moz-appearance: none;\ |
|
|
|
appearance: none;\ |
|
|
|
}\ |
|
|
|
</style>\ |
|
|
|
</head>\ |
|
|
|
<body>\ |
|
|
|
@ -161,11 +183,24 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\ |
|
|
|
</div>\ |
|
|
|
<div>\ |
|
|
|
<form id=\"explorerUploadForm\" method=\"POST\" enctype=\"multipart/form-data\" action=\"/explorer\">\ |
|
|
|
<input id=\"explorerUploadedFiles\" type=\"file\" class=\"form-control-file\" name=\"explorerUploadFiles\" multiple> <input type=\"submit\" class=\"btn btn-primary\" id=\"submit\" value=\"Hochladen\">\ |
|
|
|
<progress id=\"explorerUploadProgress\" value=\"0\" max=\"100\"></progress> <span id=\"explorerUploadPercent\"></span>\ |
|
|
|
<div class=\"input-group\">\ |
|
|
|
<span class=\"form-control\" id=\"uploaded_file_text\"></span>\ |
|
|
|
<span class=\"input-group-btn\">\ |
|
|
|
<span class=\"btn btn-secondary\" onclick=\"$(this).parent().find('input[type=file]').click();\">Browse</span>\ |
|
|
|
<span class=\"btn btn-primary\" onclick=\"$(this).parent().find('input[type=file]').submit();\">Upload</span>\ |
|
|
|
<input name=\"uploaded_file\" id =\"uploaded_file\" onchange=\"$(this).parent().parent().find('.form-control').html($(this).val().split(/[\\|/]/).pop());\" style=\"display: none;\" type=\"file\" multiple>\ |
|
|
|
</span>\ |
|
|
|
</div>\ |
|
|
|
\ |
|
|
|
</form>\ |
|
|
|
<br>\ |
|
|
|
<div class=\"progress\">\ |
|
|
|
<div id=\"explorerUploadProgress\" class=\"progress-bar\" role=\"progressbar\" style=\"width: 0\"></div>\ |
|
|
|
\ |
|
|
|
</div>\ |
|
|
|
</div>\ |
|
|
|
<br>\ |
|
|
|
</div>\ |
|
|
|
</fieldset>\ |
|
|
|
</div>\ |
|
|
|
<div class=\"container\" id=\"rfidMusicTags\">\ |
|
|
|
@ -176,8 +211,20 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\ |
|
|
|
<label for=\"rfidIdMusic\">RFID-Chip-Nummer (12-stellig)</label>\ |
|
|
|
<input type=\"text\" class=\"form-control\" id=\"rfidIdMusic\" maxlength=\"12\" pattern=\"[0-9]{12}\"\ |
|
|
|
placeholder=\"%RFID_TAG_ID%\" name=\"rfidIdMusic\" required>\ |
|
|
|
<br>\ |
|
|
|
<ul class=\"nav nav-tabs\" id=\"SubTab\" role=\"tablist\">\ |
|
|
|
<li class=\"nav-item\">\ |
|
|
|
<a class=\"nav-link active\" id=\"rfid-music-tab\" data-toggle=\"tab\" href=\"#rfidmusic\" role=\"tab\"><i class=\"fas fa-music\"></i> Musik</a>\ |
|
|
|
</li>\ |
|
|
|
<li class=\"nav-item\">\ |
|
|
|
<a class=\"nav-link\" id=\"rfid-mod-tab\" data-toggle=\"tab\" href=\"#rfidmod\" role=\"tab\"><i class=\"fas fa-cog\"></i> Modifikation</a>\ |
|
|
|
</li>\ |
|
|
|
</ul>\ |
|
|
|
<div class=\"tab-content\" id=\"SubTabContent\">\ |
|
|
|
<div class=\"tab-pane show active\" id=\"rfidmusic\" role=\"tabpanel\">\ |
|
|
|
<br>\ |
|
|
|
<label for=\"fileOrUrl\">Datei, Verzeichnis oder URL (^ und # als Zeichen nicht erlaubt)</label>\ |
|
|
|
<input type=\"text\" class=\"form-control\" id=\"fileOrUrl\" maxlength=\"255\" placeholder=\"z.B. /mp3/Hoerspiele/Yakari/Yakari_und_seine_Freunde.mp3\" name=\"fileOrUrl\" required>\ |
|
|
|
<input type=\"text\" class=\"form-control\" id=\"fileOrUrl\" maxlength=\"255\" placeholder=\"z.B. /mp3/Hoerspiele/Yakari/Yakari_und_seine_Freunde.mp3\" pattern=\"^[^\\^#]+$\" name=\"fileOrUrl\" required>\ |
|
|
|
<label for=\"playMode\">Abspielmodus</label>\ |
|
|
|
<select class=\"form-control\" id=\"playMode\" name=\"playMode\">\ |
|
|
|
<option class=\"option-file\" value=\"1\">Einzelner Titel</option>\ |
|
|
|
@ -191,29 +238,8 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\ |
|
|
|
<option class=\"option-stream\" value=\"8\">Webradio</option>\ |
|
|
|
</select>\ |
|
|
|
</div>\ |
|
|
|
<br>\ |
|
|
|
<div class=\"text-center\">\ |
|
|
|
<button type=\"reset\" class=\"btn btn-secondary\">Reset</button>\ |
|
|
|
<button type=\"submit\" class=\"btn btn-primary\">Absenden</button>\ |
|
|
|
</div>\ |
|
|
|
</form>\ |
|
|
|
</fieldset>\ |
|
|
|
</div>\ |
|
|
|
\ |
|
|
|
<br>\ |
|
|
|
<br>\ |
|
|
|
<div class=\"container\" id=\"rfidModTags\">\ |
|
|
|
<fieldset>\ |
|
|
|
<legend>RFID-Modifkationen</legend>\ |
|
|
|
<form class=\"needs-validation\" action=\"#rfidModTags\" method=\"POST\" onsubmit=\"rfidMods('rfidModTags'); return false\">\ |
|
|
|
<div class=\"form-group col-md-12\">\ |
|
|
|
<label for=\"rfidIdMod\">RFID-Chip-Nummer (12-stellig)</label>\ |
|
|
|
<input type=\"text\" class=\"form-control\" id=\"rfidIdMod\" maxlength=\"12\" pattern=\"[0-9]{12}\"\ |
|
|
|
placeholder=\"%RFID_TAG_ID%\" name=\"rfidIdMod\" required>\ |
|
|
|
<div class=\"invalid-feedback\">\ |
|
|
|
Bitte eine 12-stellige Zahl eingeben.\ |
|
|
|
</div>\ |
|
|
|
<label for=\"modId\">Konfiguration</label>\ |
|
|
|
<div class=\"tab-pane \" id=\"rfidmod\" role=\"tabpanel\">\ |
|
|
|
<label for=\"modId\"></label>\ |
|
|
|
<select class=\"form-control\" id=\"modId\" name=\"modId\">\ |
|
|
|
<option value=\"100\">Tastensperre</option>\ |
|
|
|
<option value=\"101\">Schlafen nach 15 Minuten</option>\ |
|
|
|
@ -231,6 +257,8 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\ |
|
|
|
<option value=\"150\">Aktiviere FTP</option>\ |
|
|
|
</select>\ |
|
|
|
</div>\ |
|
|
|
</div>\ |
|
|
|
</div>\ |
|
|
|
<br>\ |
|
|
|
<div class=\"text-center\">\ |
|
|
|
<button type=\"reset\" class=\"btn btn-secondary\">Reset</button>\ |
|
|
|
@ -319,7 +347,7 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\ |
|
|
|
</div>\ |
|
|
|
</fieldset>\ |
|
|
|
</div>\ |
|
|
|
<br>\ |
|
|
|
<br>\ |
|
|
|
<div class=\"form-group col-md-12\">\ |
|
|
|
<fieldset >\ |
|
|
|
<legend class=\"w-auto\">Neopixel (Helligkeit)</legend>\ |
|
|
|
@ -363,7 +391,7 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\ |
|
|
|
<label for=\"voltageIndicatorLow\">Eine LED leuchtet bei dieser Spannung\ |
|
|
|
</label>\ |
|
|
|
<div class=\"text-center\">\ |
|
|
|
<i class=\"fas fa-battery-quarter fa-2x .icon-pos\"></i> <input data-provide=\"slider\" min=\"2.0\" data-slider-step=\"0.1\" data-slider-min=\"2.0\" data-slider-max=\"5.0\" max=\"5.0\"type=\"text\" class=\"form-control\" id=\"voltageIndicatorLow\" name=\"voltageIndicatorLow\"\ |
|
|
|
<i class=\"fas fa-battery-quarter fa-2x .icon-pos\"></i> <input data-provide=\"slider\" min=\"2.0\" data-slider-step=\"0.1\" data-slider-min=\"2.0\" data-slider-max=\"5.0\" max=\"5.0\" type=\"text\" class=\"form-control\" id=\"voltageIndicatorLow\" name=\"voltageIndicatorLow\"\ |
|
|
|
data-slider-value=\"%VOLTAGE_INDICATOR_LOW%\" value=\"%VOLTAGE_INDICATOR_LOW%\" pattern=\"^\\d{1,2}(\\.\\d{1,3})?\" required> <i class=\"fas fa-battery-three-quarters fa-2x .icon-pos\" fa-2x .icon-pos></i>\ |
|
|
|
</div>\ |
|
|
|
<br>\ |
|
|
|
@ -417,7 +445,19 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\ |
|
|
|
<script type=\"text/javascript\">\ |
|
|
|
var DEBUG = false;\ |
|
|
|
var lastIdclicked = '';\ |
|
|
|
var ActiveSubTab = 'rfid-music-tab';\ |
|
|
|
var host = $(location).attr('hostname');\ |
|
|
|
\ |
|
|
|
/* show active / selected tab */\ |
|
|
|
$('#SubTab.nav-tabs a').on('shown.bs.tab', function (e) {\ |
|
|
|
ActiveSubTab = $(e.target).attr('id');\ |
|
|
|
console.log ( ActiveSubTab);\ |
|
|
|
if (ActiveSubTab == 'rfid-music-tab') {\ |
|
|
|
document.getElementById(\"fileOrUrl\").required = true;\ |
|
|
|
} else {\ |
|
|
|
document.getElementById(\"fileOrUrl\").required = false;\ |
|
|
|
}\ |
|
|
|
});\ |
|
|
|
\ |
|
|
|
if (DEBUG) {\ |
|
|
|
host = \"192.168.178.114\";\ |
|
|
|
@ -561,6 +601,7 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\ |
|
|
|
sel = ref.get_selected(),\ |
|
|
|
path = \"/\";\ |
|
|
|
if(!sel.length) { alert(\"Please select the upload location!\");return false; }\ |
|
|
|
if(!document.getElementById('uploaded_file').files.length > 0) { alert(\"Please select files to upload!\");return false; }\ |
|
|
|
sel = sel[0];\ |
|
|
|
selectedNode = ref.get_node(sel);\ |
|
|
|
if(selectedNode.data.directory){\ |
|
|
|
@ -586,13 +627,7 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\ |
|
|
|
var percentComplete = evt.loaded / evt.total;\ |
|
|
|
percentComplete = parseInt(percentComplete * 100);\ |
|
|
|
console.log(percentComplete);\ |
|
|
|
document.getElementById(\"explorerUploadProgress\").value = percentComplete;\ |
|
|
|
document.getElementById(\"explorerUploadPercent\").innerHTML = percentComplete + \"%\";\ |
|
|
|
\ |
|
|
|
if (percentComplete === 100) {\ |
|
|
|
\ |
|
|
|
}\ |
|
|
|
\ |
|
|
|
$(\"#explorerUploadProgress\").css(\"width\", percentComplete + \"%\").text(percentComplete);\ |
|
|
|
}\ |
|
|
|
}, false);\ |
|
|
|
\ |
|
|
|
@ -600,6 +635,9 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\ |
|
|
|
},\ |
|
|
|
success: function(data, textStatus, jqXHR) {\ |
|
|
|
console.log(\"Upload success!\");\ |
|
|
|
$(\"#explorerUploadProgress\").text(\"Upload success!\");\ |
|
|
|
document.getElementById('uploaded_file').value = '';\ |
|
|
|
document.getElementById('uploaded_file_text').innerHTML = '';\ |
|
|
|
\ |
|
|
|
getData(\"/explorer?path=\" + path, function(data) {\ |
|
|
|
/* We now have data! */\ |
|
|
|
@ -869,13 +907,9 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\ |
|
|
|
console.log(event.data);\ |
|
|
|
var socketMsg = JSON.parse(event.data);\ |
|
|
|
if (socketMsg.rfidId != null) {\ |
|
|
|
document.getElementById('rfidIdMod').value = socketMsg.rfidId;\ |
|
|
|
document.getElementById('rfidIdMusic').value = socketMsg.rfidId;\ |
|
|
|
toastr.info(\"RFID Tag mit \"+ socketMsg.rfidId + \" erkannt.\" );\ |
|
|
|
\ |
|
|
|
$(\"#rfidIdMusic\").effect(\"highlight\", {color:\"#abf5af\"}, 3000);\ |
|
|
|
$(\"#rfidIdMod\").effect(\"highlight\", {color:\"#abf5af\"}, 3000);\ |
|
|
|
\ |
|
|
|
} if (\"status\" in socketMsg) {\ |
|
|
|
if (socketMsg.status == \"ok\") {\ |
|
|
|
toastr.success(\"Aktion erfolgreich ausgeführt.\" );\ |
|
|
|
@ -956,18 +990,6 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\ |
|
|
|
var myJSON = JSON.stringify(myObj);\ |
|
|
|
socket.send(myJSON);\ |
|
|
|
}\ |
|
|
|
\ |
|
|
|
function rfidMods(clickedId) {\ |
|
|
|
lastIdclicked = clickedId;\ |
|
|
|
var myObj = {\ |
|
|
|
\"rfidMod\": {\ |
|
|
|
rfidIdMod: document.getElementById('rfidIdMod').value,\ |
|
|
|
modId: document.getElementById('modId').value\ |
|
|
|
}\ |
|
|
|
};\ |
|
|
|
var myJSON = JSON.stringify(myObj);\ |
|
|
|
socket.send(myJSON);\ |
|
|
|
}\ |
|
|
|
\ |
|
|
|
function removeTrSlash(str) {\ |
|
|
|
if (str.substr(-1) === '/') {\ |
|
|
|
@ -978,6 +1000,7 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\ |
|
|
|
\ |
|
|
|
function rfidAssign(clickedId) {\ |
|
|
|
lastIdclicked = clickedId;\ |
|
|
|
if (ActiveSubTab == 'rfid-music-tab') {\ |
|
|
|
var myObj = {\ |
|
|
|
\"rfidAssign\": {\ |
|
|
|
rfidIdMusic: document.getElementById('rfidIdMusic').value,\ |
|
|
|
@ -985,6 +1008,14 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\ |
|
|
|
playMode: document.getElementById('playMode').value\ |
|
|
|
}\ |
|
|
|
};\ |
|
|
|
} else {\ |
|
|
|
var myObj = {\ |
|
|
|
\"rfidMod\": {\ |
|
|
|
rfidIdMod: document.getElementById('rfidIdMusic').value,\ |
|
|
|
modId: document.getElementById('modId').value\ |
|
|
|
}\ |
|
|
|
};\ |
|
|
|
}\ |
|
|
|
var myJSON = JSON.stringify(myObj);\ |
|
|
|
socket.send(myJSON);\ |
|
|
|
}\ |
|
|
|
|
Chris
4 years ago
Torsten Stauder