phschoen
/
ESPuino
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

reorg RFID page. nicer buttons

master
Chris 5 years ago
committed by Torsten Stauder
parent
eb9c572786
commit
d266054791
2 changed files with 242 additions and 180 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 211
      html/management.html
  2. 211
      src/HTMLmanagement.h

211
html/management.html
View File

@ -99,6 +99,28 @@
display: none; display: none;
width: 100%; 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> </style>
</head> </head>
<body> <body>
@ -161,10 +183,23 @@
</div> </div>
<div> <div>
<form id="explorerUploadForm" method="POST" enctype="multipart/form-data" action="/explorer"> <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>
</form>
<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> </div>
</fieldset> </fieldset>
</div> </div>
@ -176,60 +211,53 @@
<label for="rfidIdMusic">RFID-Chip-Nummer (12-stellig)</label> <label for="rfidIdMusic">RFID-Chip-Nummer (12-stellig)</label>
<input type="text" class="form-control" id="rfidIdMusic" maxlength="12" pattern="[0-9]{12}" <input type="text" class="form-control" id="rfidIdMusic" maxlength="12" pattern="[0-9]{12}"
placeholder="%RFID_TAG_ID%" name="rfidIdMusic" required> placeholder="%RFID_TAG_ID%" name="rfidIdMusic" required>
<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>
<label for="playMode">Abspielmodus</label>
<select class="form-control" id="playMode" name="playMode">
<option class="option-file" value="1">Einzelner Titel</option>
<option class="option-file" value="2">Einzelner Titel (Endlosschleife)</option>
<option class="option-file-and-folder" value="3">Hörbuch</option>
<option class="option-file-and-folder" value="4">Hörbuch (Endlosschleife)</option>
<option class="option-folder" value="5">Alle Titel eines Verzeichnis (sortiert)</option>
<option class="option-folder" value="6">Alle Titel eines Verzeichnis (zufällig)</option>
<option class="option-folder" value="7">Alle Titel eines Verzeichnis (sortiert, Endlosschleife)</option>
<option class="option-folder" value="9">Alle Titel eines Verzeichnis (zufällig, Endlosschleife)</option>
<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.
<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" 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>
<option class="option-file" value="2">Einzelner Titel (Endlosschleife)</option>
<option class="option-file-and-folder" value="3">Hörbuch</option>
<option class="option-file-and-folder" value="4">Hörbuch (Endlosschleife)</option>
<option class="option-folder" value="5">Alle Titel eines Verzeichnis (sortiert)</option>
<option class="option-folder" value="6">Alle Titel eines Verzeichnis (zufällig)</option>
<option class="option-folder" value="7">Alle Titel eines Verzeichnis (sortiert, Endlosschleife)</option>
<option class="option-folder" value="9">Alle Titel eines Verzeichnis (zufällig, Endlosschleife)</option>
<option class="option-stream" value="8">Webradio</option>
</select>
</div>
<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>
<option value="102">Schlafen nach 30 Minuten</option>
<option value="103">Schlafen nach 1 Stunde</option>
<option value="104">Schlafen nach 2 Stunden</option>
<option value="105">Schlafen nach Ende des Titels</option>
<option value="106">Schlafen nach Ende der Playlist</option>
<option value="107">Schlafen nach fünf Titeln</option>
<option value="110">Wiederhole Playlist (endlos)</option>
<option value="111">Wiederhole Titel (endlos)</option>
<option value="120">Dimme LEDs (Nachtmodus)</option>
<option value="130">Aktiviere/deaktive WLAN</option>
<option value="140">Aktiviere/deaktiviere Bluetooth</option>
<option value="150">Aktiviere FTP</option>
</select>
</div>
</div> </div>
<label for="modId">Konfiguration</label>
<select class="form-control" id="modId" name="modId">
<option value="100">Tastensperre</option>
<option value="101">Schlafen nach 15 Minuten</option>
<option value="102">Schlafen nach 30 Minuten</option>
<option value="103">Schlafen nach 1 Stunde</option>
<option value="104">Schlafen nach 2 Stunden</option>
<option value="105">Schlafen nach Ende des Titels</option>
<option value="106">Schlafen nach Ende der Playlist</option>
<option value="107">Schlafen nach fünf Titeln</option>
<option value="110">Wiederhole Playlist (endlos)</option>
<option value="111">Wiederhole Titel (endlos)</option>
<option value="120">Dimme LEDs (Nachtmodus)</option>
<option value="130">Aktiviere/deaktive WLAN</option>
<option value="140">Aktiviere/deaktiviere Bluetooth</option>
<option value="150">Aktiviere FTP</option>
</select>
</div> </div>
<br> <br>
<div class="text-center"> <div class="text-center">
@ -319,7 +347,7 @@
</div> </div>
</fieldset> </fieldset>
</div> </div>
<br>
<br>
<div class="form-group col-md-12"> <div class="form-group col-md-12">
<fieldset > <fieldset >
<legend class="w-auto">Neopixel (Helligkeit)</legend> <legend class="w-auto">Neopixel (Helligkeit)</legend>
@ -363,7 +391,7 @@
<label for="voltageIndicatorLow">Eine LED leuchtet bei dieser Spannung <label for="voltageIndicatorLow">Eine LED leuchtet bei dieser Spannung
</label> </label>
<div class="text-center"> <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> 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> </div>
<br> <br>
@ -417,8 +445,20 @@
<script type="text/javascript"> <script type="text/javascript">
var DEBUG = false; var DEBUG = false;
var lastIdclicked = ''; var lastIdclicked = '';
var ActiveSubTab = 'rfid-music-tab';
var host = $(location).attr('hostname'); 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) { if (DEBUG) {
host = "192.168.178.114"; host = "192.168.178.114";
} }
@ -560,7 +600,8 @@
var ref = $('#explorerTree').jstree(true), var ref = $('#explorerTree').jstree(true),
sel = ref.get_selected(), sel = ref.get_selected(),
path = "/"; path = "/";
if(!sel.length) { alert("Please select the upload location!");return false; }
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]; sel = sel[0];
selectedNode = ref.get_node(sel); selectedNode = ref.get_node(sel);
if(selectedNode.data.directory){ if(selectedNode.data.directory){
@ -586,20 +627,17 @@
var percentComplete = evt.loaded / evt.total; var percentComplete = evt.loaded / evt.total;
percentComplete = parseInt(percentComplete * 100); percentComplete = parseInt(percentComplete * 100);
console.log(percentComplete); console.log(percentComplete);
document.getElementById("explorerUploadProgress").value = percentComplete;
document.getElementById("explorerUploadPercent").innerHTML = percentComplete + "%";
if (percentComplete === 100) {
}
$("#explorerUploadProgress").css("width", percentComplete + "%").text(percentComplete);
} }
}, false); }, false);
return xhr; return xhr;
}, },
success: function(data, textStatus, jqXHR) { success: function(data, textStatus, jqXHR) {
console.log("Upload success!");
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) { getData("/explorer?path=" + path, function(data) {
/* We now have data! */ /* We now have data! */
@ -869,13 +907,9 @@
console.log(event.data); console.log(event.data);
var socketMsg = JSON.parse(event.data); var socketMsg = JSON.parse(event.data);
if (socketMsg.rfidId != null) { if (socketMsg.rfidId != null) {
document.getElementById('rfidIdMod').value = socketMsg.rfidId;
document.getElementById('rfidIdMusic').value = socketMsg.rfidId; document.getElementById('rfidIdMusic').value = socketMsg.rfidId;
toastr.info("RFID Tag mit "+ socketMsg.rfidId + " erkannt." ); toastr.info("RFID Tag mit "+ socketMsg.rfidId + " erkannt." );
$("#rfidIdMusic").effect("highlight", {color:"#abf5af"}, 3000); $("#rfidIdMusic").effect("highlight", {color:"#abf5af"}, 3000);
$("#rfidIdMod").effect("highlight", {color:"#abf5af"}, 3000);
} if ("status" in socketMsg) { } if ("status" in socketMsg) {
if (socketMsg.status == "ok") { if (socketMsg.status == "ok") {
toastr.success("Aktion erfolgreich ausgeführt." ); toastr.success("Aktion erfolgreich ausgeführt." );
@ -957,18 +991,6 @@
socket.send(myJSON); 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) { function removeTrSlash(str) {
if (str.substr(-1) === '/') { if (str.substr(-1) === '/') {
return str.substr(0, str.length - 1); return str.substr(0, str.length - 1);
@ -978,13 +1000,22 @@
function rfidAssign(clickedId) { function rfidAssign(clickedId) {
lastIdclicked = clickedId; lastIdclicked = clickedId;
var myObj = {
"rfidAssign": {
rfidIdMusic: document.getElementById('rfidIdMusic').value,
fileOrUrl: removeTrSlash(document.getElementById('fileOrUrl').value),
playMode: document.getElementById('playMode').value
}
};
if (ActiveSubTab == 'rfid-music-tab') {
var myObj = {
"rfidAssign": {
rfidIdMusic: document.getElementById('rfidIdMusic').value,
fileOrUrl: removeTrSlash(document.getElementById('fileOrUrl').value),
playMode: document.getElementById('playMode').value
}
};
} else {
var myObj = {
"rfidMod": {
rfidIdMod: document.getElementById('rfidIdMusic').value,
modId: document.getElementById('modId').value
}
};
}
var myJSON = JSON.stringify(myObj); var myJSON = JSON.stringify(myObj);
socket.send(myJSON); socket.send(myJSON);
} }

211
src/HTMLmanagement.h
View File

@ -99,6 +99,28 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
display: none;\ display: none;\
width: 100%%;\ 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>\ </style>\
</head>\ </head>\
<body>\ <body>\
@ -161,10 +183,23 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
</div>\ </div>\
<div>\ <div>\
<form id=\"explorerUploadForm\" method=\"POST\" enctype=\"multipart/form-data\" action=\"/explorer\">\ <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>\
</form>\
<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>\ </div>\
</fieldset>\ </fieldset>\
</div>\ </div>\
@ -176,60 +211,53 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
<label for=\"rfidIdMusic\">RFID-Chip-Nummer (12-stellig)</label>\ <label for=\"rfidIdMusic\">RFID-Chip-Nummer (12-stellig)</label>\
<input type=\"text\" class=\"form-control\" id=\"rfidIdMusic\" maxlength=\"12\" pattern=\"[0-9]{12}\"\ <input type=\"text\" class=\"form-control\" id=\"rfidIdMusic\" maxlength=\"12\" pattern=\"[0-9]{12}\"\
placeholder=\"%RFID_TAG_ID%\" name=\"rfidIdMusic\" required>\ placeholder=\"%RFID_TAG_ID%\" name=\"rfidIdMusic\" required>\
<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>\
<label for=\"playMode\">Abspielmodus</label>\
<select class=\"form-control\" id=\"playMode\" name=\"playMode\">\
<option class=\"option-file\" value=\"1\">Einzelner Titel</option>\
<option class=\"option-file\" value=\"2\">Einzelner Titel (Endlosschleife)</option>\
<option class=\"option-file-and-folder\" value=\"3\">Hörbuch</option>\
<option class=\"option-file-and-folder\" value=\"4\">Hörbuch (Endlosschleife)</option>\
<option class=\"option-folder\" value=\"5\">Alle Titel eines Verzeichnis (sortiert)</option>\
<option class=\"option-folder\" value=\"6\">Alle Titel eines Verzeichnis (zufällig)</option>\
<option class=\"option-folder\" value=\"7\">Alle Titel eines Verzeichnis (sortiert, Endlosschleife)</option>\
<option class=\"option-folder\" value=\"9\">Alle Titel eines Verzeichnis (zufällig, Endlosschleife)</option>\
<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.\
<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\" 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>\
<option class=\"option-file\" value=\"2\">Einzelner Titel (Endlosschleife)</option>\
<option class=\"option-file-and-folder\" value=\"3\">Hörbuch</option>\
<option class=\"option-file-and-folder\" value=\"4\">Hörbuch (Endlosschleife)</option>\
<option class=\"option-folder\" value=\"5\">Alle Titel eines Verzeichnis (sortiert)</option>\
<option class=\"option-folder\" value=\"6\">Alle Titel eines Verzeichnis (zufällig)</option>\
<option class=\"option-folder\" value=\"7\">Alle Titel eines Verzeichnis (sortiert, Endlosschleife)</option>\
<option class=\"option-folder\" value=\"9\">Alle Titel eines Verzeichnis (zufällig, Endlosschleife)</option>\
<option class=\"option-stream\" value=\"8\">Webradio</option>\
</select>\
</div>\
<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>\
<option value=\"102\">Schlafen nach 30 Minuten</option>\
<option value=\"103\">Schlafen nach 1 Stunde</option>\
<option value=\"104\">Schlafen nach 2 Stunden</option>\
<option value=\"105\">Schlafen nach Ende des Titels</option>\
<option value=\"106\">Schlafen nach Ende der Playlist</option>\
<option value=\"107\">Schlafen nach fünf Titeln</option>\
<option value=\"110\">Wiederhole Playlist (endlos)</option>\
<option value=\"111\">Wiederhole Titel (endlos)</option>\
<option value=\"120\">Dimme LEDs (Nachtmodus)</option>\
<option value=\"130\">Aktiviere/deaktive WLAN</option>\
<option value=\"140\">Aktiviere/deaktiviere Bluetooth</option>\
<option value=\"150\">Aktiviere FTP</option>\
</select>\
</div>\
</div>\ </div>\
<label for=\"modId\">Konfiguration</label>\
<select class=\"form-control\" id=\"modId\" name=\"modId\">\
<option value=\"100\">Tastensperre</option>\
<option value=\"101\">Schlafen nach 15 Minuten</option>\
<option value=\"102\">Schlafen nach 30 Minuten</option>\
<option value=\"103\">Schlafen nach 1 Stunde</option>\
<option value=\"104\">Schlafen nach 2 Stunden</option>\
<option value=\"105\">Schlafen nach Ende des Titels</option>\
<option value=\"106\">Schlafen nach Ende der Playlist</option>\
<option value=\"107\">Schlafen nach fünf Titeln</option>\
<option value=\"110\">Wiederhole Playlist (endlos)</option>\
<option value=\"111\">Wiederhole Titel (endlos)</option>\
<option value=\"120\">Dimme LEDs (Nachtmodus)</option>\
<option value=\"130\">Aktiviere/deaktive WLAN</option>\
<option value=\"140\">Aktiviere/deaktiviere Bluetooth</option>\
<option value=\"150\">Aktiviere FTP</option>\
</select>\
</div>\ </div>\
<br>\ <br>\
<div class=\"text-center\">\ <div class=\"text-center\">\
@ -319,7 +347,7 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
</div>\ </div>\
</fieldset>\ </fieldset>\
</div>\ </div>\
<br>\
<br>\
<div class=\"form-group col-md-12\">\ <div class=\"form-group col-md-12\">\
<fieldset >\ <fieldset >\
<legend class=\"w-auto\">Neopixel (Helligkeit)</legend>\ <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 for=\"voltageIndicatorLow\">Eine LED leuchtet bei dieser Spannung\
</label>\ </label>\
<div class=\"text-center\">\ <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>\ 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>\ </div>\
<br>\ <br>\
@ -417,7 +445,19 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
<script type=\"text/javascript\">\ <script type=\"text/javascript\">\
var DEBUG = false;\ var DEBUG = false;\
var lastIdclicked = '';\ var lastIdclicked = '';\
var ActiveSubTab = 'rfid-music-tab';\
var host = $(location).attr('hostname');\ 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) {\ if (DEBUG) {\
host = \"192.168.178.114\";\ host = \"192.168.178.114\";\
@ -560,7 +600,8 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
var ref = $('#explorerTree').jstree(true),\ var ref = $('#explorerTree').jstree(true),\
sel = ref.get_selected(),\ sel = ref.get_selected(),\
path = \"/\";\ path = \"/\";\
if(!sel.length) { alert(\"Please select the upload location!\");return false; }\
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];\ sel = sel[0];\
selectedNode = ref.get_node(sel);\ selectedNode = ref.get_node(sel);\
if(selectedNode.data.directory){\ if(selectedNode.data.directory){\
@ -586,20 +627,17 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
var percentComplete = evt.loaded / evt.total;\ var percentComplete = evt.loaded / evt.total;\
percentComplete = parseInt(percentComplete * 100);\ percentComplete = parseInt(percentComplete * 100);\
console.log(percentComplete);\ console.log(percentComplete);\
document.getElementById(\"explorerUploadProgress\").value = percentComplete;\
document.getElementById(\"explorerUploadPercent\").innerHTML = percentComplete + \"%\";\
\
if (percentComplete === 100) {\
\
}\
\
$(\"#explorerUploadProgress\").css(\"width\", percentComplete + \"%\").text(percentComplete);\
}\ }\
}, false);\ }, false);\
\ \
return xhr;\ return xhr;\
},\ },\
success: function(data, textStatus, jqXHR) {\ success: function(data, textStatus, jqXHR) {\
console.log(\"Upload success!\");\
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) {\ getData(\"/explorer?path=\" + path, function(data) {\
/* We now have data! */\ /* We now have data! */\
@ -869,13 +907,9 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
console.log(event.data);\ console.log(event.data);\
var socketMsg = JSON.parse(event.data);\ var socketMsg = JSON.parse(event.data);\
if (socketMsg.rfidId != null) {\ if (socketMsg.rfidId != null) {\
document.getElementById('rfidIdMod').value = socketMsg.rfidId;\
document.getElementById('rfidIdMusic').value = socketMsg.rfidId;\ document.getElementById('rfidIdMusic').value = socketMsg.rfidId;\
toastr.info(\"RFID Tag mit \"+ socketMsg.rfidId + \" erkannt.\" );\ toastr.info(\"RFID Tag mit \"+ socketMsg.rfidId + \" erkannt.\" );\
\
$(\"#rfidIdMusic\").effect(\"highlight\", {color:\"#abf5af\"}, 3000);\ $(\"#rfidIdMusic\").effect(\"highlight\", {color:\"#abf5af\"}, 3000);\
$(\"#rfidIdMod\").effect(\"highlight\", {color:\"#abf5af\"}, 3000);\
\
} if (\"status\" in socketMsg) {\ } if (\"status\" in socketMsg) {\
if (socketMsg.status == \"ok\") {\ if (socketMsg.status == \"ok\") {\
toastr.success(\"Aktion erfolgreich ausgeführt.\" );\ toastr.success(\"Aktion erfolgreich ausgeführt.\" );\
@ -956,18 +990,6 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
var myJSON = JSON.stringify(myObj);\ var myJSON = JSON.stringify(myObj);\
socket.send(myJSON);\ 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) {\ function removeTrSlash(str) {\
if (str.substr(-1) === '/') {\ if (str.substr(-1) === '/') {\
@ -978,13 +1000,22 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
\ \
function rfidAssign(clickedId) {\ function rfidAssign(clickedId) {\
lastIdclicked = clickedId;\ lastIdclicked = clickedId;\
var myObj = {\
\"rfidAssign\": {\
rfidIdMusic: document.getElementById('rfidIdMusic').value,\
fileOrUrl: removeTrSlash(document.getElementById('fileOrUrl').value),\
playMode: document.getElementById('playMode').value\
}\
};\
if (ActiveSubTab == 'rfid-music-tab') {\
var myObj = {\
\"rfidAssign\": {\
rfidIdMusic: document.getElementById('rfidIdMusic').value,\
fileOrUrl: removeTrSlash(document.getElementById('fileOrUrl').value),\
playMode: document.getElementById('playMode').value\
}\
};\
} else {\
var myObj = {\
\"rfidMod\": {\
rfidIdMod: document.getElementById('rfidIdMusic').value,\
modId: document.getElementById('modId').value\
}\
};\
}\
var myJSON = JSON.stringify(myObj);\ var myJSON = JSON.stringify(myObj);\
socket.send(myJSON);\ socket.send(myJSON);\
}\ }\

Write Preview
Loading…
Cancel
Save