diff options
Diffstat (limited to 'modules/sysconfignew/templates/module-editor.html')
-rw-r--r-- | modules/sysconfignew/templates/module-editor.html | 269 |
1 files changed, 269 insertions, 0 deletions
diff --git a/modules/sysconfignew/templates/module-editor.html b/modules/sysconfignew/templates/module-editor.html new file mode 100644 index 00000000..3ea28bf8 --- /dev/null +++ b/modules/sysconfignew/templates/module-editor.html @@ -0,0 +1,269 @@ + +<div class="container"> + <div class="row"> + <a href="?do=Sysconfig" style="display:inline-block;margin-bottom: 10px;">{{lang_back}}</a> + <div class="panel panel-default"> + <div class="panel-heading"> + {{module}} + </div> + <div class="panel-body"> + <div class="mod-nav" id="mod-nav"> + + </div> + <input class="form-control" disabled="disabled" id="editor-header"> + <textarea class="editor-box" id="mod-editor" onkeyup="changeContent(this);"></textarea> + </div> + <div class="panel-footer"> + <button id="new-item-button" type="button" class="btn btn-default" data-toggle="modal" data-target="#item-modal" onclick="cleanModal()" > + <span class="glyphicon glyphicon-file" aria-hidden="true"></span> + {{lang_new}} + </button> + <button type="button" class="btn btn-default" onclick="save();"> + <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span> + {{lang_save}} + </button> + </div> + </div> + </div> +</div> + +<!-- New item modal --> +<div class="modal fade" id="item-modal" tabindex="-1" role="dialog" aria-labelledby="item-modal-label" aria-hidden="true"> + <div class="modal-dialog"> + <div class="modal-content"> + <!-- Header --> + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> + <h4 class="modal-title" id="new-config-modal-label">{{lang_new}}</h4> + </div> + <!-- Body --> + <div class="modal-body" id="new-module-modal-body" style="overflow: auto;"> + <div class="mod-nav" style="height: 250px"> + <div class="item dir" onclick="clickDir(this)" data-target="#root" data-path="/"><div class="glyphicon glyphicon-folder-close dir-icon" aria-hidden="true" id="root-icon"></div> /</div> + <div class="folder" id="root"> + <div id="dir-nav"> + </div> + </div> + </div> + <div style="float:left"> + <input class="form-control" disabled="disabled" id="dir-path" style="width: 250px;margin-left: 20px;" value="/"> + <br> + <div class="btn-group-vertical" role="group" aria-label="..." style="width: 250px;margin-left: 20px;"> + <button type="button" class="btn btn-default" onclick="switchFileInput('file')">Arquivo de Texto</button> + <button type="button" class="btn btn-default" onclick="switchFileInput('upload')">Upload de Arquivo</button> + <button type="button" class="btn btn-default" onclick="switchFileInput('folder')">Pasta</button> + <button type="button" class="btn btn-default" onclick="switchFileInput('link')">Link</button> + </div> + <br> + <br> + <div id="new-file-input" style="width: 250px;margin-left: 20px;"> + <div class="form-group"> + <label for="name">Nome do Arquivo</label> + <input type="name" class="form-control" id="new-file-data"> + </div> + </div> + </div> + </div> + <!-- Footer --> + <div class="modal-footer" > + <button type="button" class="btn btn-primary" data-dismiss="modal">{{lang_cancel}}</button> + <button type="button" class="btn btn-default" data-dismiss="modal">{{lang_cancel}}</button> + </div> + </div> + </div> +</div> + +<script type="text/javascript"> + +// Global variables +var original; +var module; +var current; +var path; + +function cleanModal(){ + $('#dir-path').val("/"); +} + +function clickDir(element){ + var target = element.getAttribute("data-target"); + target = target.replace(/\./g,"\\."); + $(target + "-icon").attr('class',(($(target).css('display') == 'none') ? 'glyphicon glyphicon-folder-open dir-icon' : 'glyphicon glyphicon-folder-close dir-icon' )); + $(target).css('display', ($(target).css('display') == 'none') ? 'block' : 'none' ); + $('#dir-path').val(element.getAttribute("data-path")); +} + +function getFile(obj,file){ + var folder = file.split("/")[1]; + for (var property in obj) { + if (obj.hasOwnProperty(property)) { + if(property.substring(0, 4) == "dir_"){ + var pname = property.slice(4); + if(pname == folder){ + var ret = getFile(obj[property],file.replace("/" + folder,"")); + if(ret != "Invalid file") + return ret; + } + } + if(property.substring(0, 5) == "file_"){ + if(property.slice(5) == file.replace("/","")) + return obj[property]; + } + } + } + return 'Invalid file'; +} + +function changeFile(obj,file,data){ + var folder = file.split("/")[1]; + for (var property in obj) { + if (obj.hasOwnProperty(property)) { + if(property.substring(0, 4) == "dir_"){ + var pname = property.slice(4); + if(pname == folder){ + var ret = changeFile(obj[property],file.replace("/" + folder,""),data); + if(ret != "") + return ret; + } + } + if(property.substring(0, 5) == "file_"){ + if(property.slice(5) == file.replace("/","")){ + obj[property] = data; + } + } + } + } + return ""; +} + +function clickItem(element){ + var id = element.getAttribute("id"); + var target = id.split("/").pop(); + document.getElementById('mod-editor').value = getFile(module,id); + document.getElementById('editor-header').value = id; + current = id; +} + +function clickLock(element){ + var id = element.getAttribute("id"); + alert("{{lang_file}}: " + id + " {{lang_cannotOpen}}"); +} + +function clickLink(element){ + var data = element.getAttribute("data-value"); + var newLink = prompt("{{lang_changeLink}}:",data); + if(newLink){ + element.setAttribute("data-value",newLink); + } +} + +function changeContent(element){ + changeFile(module,current,element.value); +} + +function switchFileInput(type){ + var html = ""; + switch(type){ + case "file": + html = "<div class='form-group'><label for='name'>Nome do Arquivo</label><input type='name' class='form-control' id='new-file-data'></div>"; + break; + case 'upload': + html = "<div class='form-group'><label for='name'>Arquivo</label><input type='file' class='form-control' id='new-file-data'></div>"; + break; + case 'folder': + html = "<div class='form-group'><label for='name'>Nome da Pasta</label><input type='name' class='form-control' id='new-file-data'></div>"; + break; + case 'link': + html = "<div class='form-group'><label for='name'>Nome do Link</label><input type='name' class='form-control' id='new-file-data'></div>"; + break; + } + document.getElementById('new-file-input').innerHTML = html; +} + +function getContent(obj,path,dirOnly){ + var folders = ""; + var files = ""; + for (var property in obj) { + if (obj.hasOwnProperty(property)) { + if(property.substring(0, 4) == "dir_"){ + var pname = property.slice(4); + // Create file navigation tree + if(!dirOnly){ + folders += '<div class="item dir" onclick="clickDir(this)" data-target="#' + pname + '" data-path="' + path + pname + '/' + '"><div class="glyphicon glyphicon-folder-close dir-icon" aria-hidden="true" id="' + pname + '-icon"></div> ' + pname + '</div>'; + folders += '<div class="folder" id="' + pname + '">'; + folders += getContent(obj[property],path + pname + "/",dirOnly); + folders += '</div>'; + } + // Create directory chooser + else{ + folders += '<div class="item dir" onclick="clickDir(this)" data-target="#' + pname + '-dc" data-path="' + path + pname + '/' + '"><div class="glyphicon glyphicon-folder-close dir-icon" aria-hidden="true" id="' + pname + '-dc' + '-icon"></div> ' + pname + '</div>'; + folders += '<div class="folder" id="' + pname + '-dc' + '">'; + folders += getContent(obj[property],path + pname + "/",dirOnly); + folders += '</div>'; + } + } + if(!dirOnly){ + if(property.substring(0, 5) == "file_"){ + var pname = property.slice(5); + files += '<div class="item" id="' + path + pname + '" onclick="clickItem(this)">' + pname + '</div>'; + } + if(property.substring(0, 5) == "link_"){ + var pname = property.slice(5); + files += '<div class="item item-link" data-value="' + obj[property] + '" onclick="clickLink(this)">' + + '<span class="glyphicon glyphicon-link" aria-hidden="true"></span> ' + pname + '</div>'; + } + if(property.substring(0, 5) == "lock_"){ + var pname = property.slice(5); + files += '<div class="item item-lock" id="' + path + pname + '" onclick="clickLock(this)">' + + pname + '</div>'; + } + } + } + } + return folders+ files; +} + +function mountNav(dirOnly){ + document.getElementById((dirOnly) ? 'dir-nav' : 'mod-nav').innerHTML = getContent(module,"/",dirOnly); +} + +function init(){ + $.ajax({ + method: "GET", + url: "?do=SysConfig&async=true", + data: { request:"module-contents", module: "{{module}}" } + }).done(function( data ) { + if(data != ""){ + module = JSON.parse(data); + original = JSON.parse(data); + mountNav(false); + mountNav(true); + } + }); +} + +function save(){ + //send JSON to PHP + if(JSON.stringify(original) != JSON.stringify(module)){ + + } +} + +window.onbeforeunload = function (e) { + if(JSON.stringify(original) != JSON.stringify(module)){ + var message = "{{lang_leavingMessage}}", + e = e || window.event; + + // For IE and Firefox + if (e) { + e.returnValue = message; + } + + // For Safari + return message; + } + return; +}; + +init(); +</script>
\ No newline at end of file |