diff --git a/static/css/index.css b/static/css/index.css index f4f02c0..6957ab1 100644 --- a/static/css/index.css +++ b/static/css/index.css @@ -175,6 +175,13 @@ button { user-select: none; display: flex; + &.created { + * { + color: #44aa00 !important; + font-weight: bold; + } + } + .subdomains { display: none; } diff --git a/static/js/dns.mjs b/static/js/dns.mjs index c128d08..0e4a3b4 100644 --- a/static/js/dns.mjs +++ b/static/js/dns.mjs @@ -5,7 +5,7 @@ export class Application { window._mbus = new MessageBus() this.settings = new Settings() this.records = this.parseRecords(records) - this.topFolder = new Folder(this, 'root') + this.topFolder = new Folder(this, null, 'root') this.recordsTree = null this.settingsIcon = null @@ -53,7 +53,7 @@ export class Application { // to be able to update them when necessary. let folder = currFolder.subfolders.get(label) if (folder === undefined) { - folder = new Folder(this, accFolderName) + folder = new Folder(this, currFolder, accFolderName) currFolder.subfolders.set(label, folder) } currFolder = folder @@ -110,6 +110,8 @@ export class Application { document.body.appendChild(this.recordsTree) document.body.appendChild(this.settingsIcon) document.body.appendChild(this.createIcon) + + document.body.addEventListener('keydown', event => this.handlerKeys(event)) } // Top root folder doesn't have to be shown. @@ -125,6 +127,29 @@ export class Application { this.setBoxedFolders(this.settings.get('boxed_folders')) }// }}} + handlerKeys(event) {// {{{ + let handled = true + + // Every keyboard shortcut for the application wide handler is using Alt+Shift + // for consistency and that it works with a lot of browsers. + if (!event.altKey || !event.shiftKey || event.ctrlKey) { + return + } + + switch (event.key.toLowerCase()) { + case 'n': + new RecordDialog(new Record()).show() + break + + default: + handled = false + } + + if (handled) { + event.stopPropagation() + event.preventDefault() + } + }// }}} handlerTop(event) {// {{{ const topEl = event.target.closest('.top') @@ -154,7 +179,6 @@ export class Application { records = document.querySelectorAll(`[data-top="${topEl.dataset.self}"]`) types = document.querySelectorAll(`[data-top="${topEl.dataset.self}"] + .type`) values = document.querySelectorAll(`[data-top="${topEl.dataset.self}"] + .type + .value`) - console.log(records) } for (const r of records) { @@ -186,9 +210,10 @@ export class Application { } class Folder { - constructor(app, name) {// {{{ + constructor(app, parentFolder, name) {// {{{ this.application = app this.open = false + this.parentFolder = parentFolder this.folderName = name this.subfolders = new Map() this.records = [] @@ -205,11 +230,12 @@ class Folder { }// }}} addRecord(rec) {// {{{ this.records.push(rec) + rec.setFolder(this) }// }}} openFolder(recursive) {// {{{ this.open = true - this.div.classList.add('open') - this.div.classList.remove('closed') + this.div?.classList.add('open') + this.div?.classList.remove('closed') if (recursive) this.subfolders.forEach(folder => folder.openFolder(recursive)) @@ -280,6 +306,7 @@ class Record { constructor(data) {// {{{ this.data = data || {} + this.folder = null this.imgIcon = null this.divFQDN = null this.divType = null @@ -337,6 +364,9 @@ class Record { this.data[key] = value }// }}} + setFolder(folder) {// {{{ + this.folder = folder + }// }}} render() {// {{{ if (this.divFQDN === null) { this.imgIcon = document.createElement('img') @@ -405,14 +435,36 @@ class Record { // The data is read from the server/routeros device // since it could have manipulated the data. this.data = json.Record - if (created) + if (created) { _app.records.push(this) + } _app.cleanFolders() _app.renderFolders() _app.render() + + // renderFolders is setting the folder the record resides in. + // It can now be expanded to the parent folder. + if (created) { + this.openParentFolders() + this.divFQDN.classList.add('created') + setTimeout( + () => this.divFQDN.classList.remove('created'), + 1000, + ) + } }) }// }}} + + openParentFolders(folder) {// {{{ + if (folder === undefined) + folder = this.folder + + folder?.openFolder(false) + + if (folder?.parentFolder) + this.openParentFolders(folder.parentFolder) + }// }}} } class RecordDialog {