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

reorg RFID page. nicer buttons

master
Chris 4 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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 129
      html/management.html
  2. 129
      src/HTMLmanagement.h

129
html/management.html
View File

@ -99,6 +99,28 @@
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,10 +183,23 @@
</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>
@ -176,8 +211,20 @@
<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 @@
<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 @@
<option value="150">Aktiviere FTP</option>
</select>
</div>
</div>
</div>
<br>
<div class="text-center">
<button type="reset" class="btn btn-secondary">Reset</button>
@ -417,8 +445,20 @@
<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 @@
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 @@
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 @@
},
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 @@
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." );
@ -957,18 +991,6 @@
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) === '/') {
return str.substr(0, str.length - 1);
@ -978,6 +1000,7 @@
function rfidAssign(clickedId) {
lastIdclicked = clickedId;
if (ActiveSubTab == 'rfid-music-tab') {
var myObj = {
"rfidAssign": {
rfidIdMusic: document.getElementById('rfidIdMusic').value,
@ -985,6 +1008,14 @@
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);
}

129
src/HTMLmanagement.h
View File

@ -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>\
@ -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);\
}\

Write Preview
Loading…
Cancel
Save