From 0f9e38473dcdd691193b3010980ce05e674720bc Mon Sep 17 00:00:00 2001 From: Caesar Kabalan Date: Wed, 24 May 2023 23:35:45 -0700 Subject: [PATCH] Add Export to URL Functionality --- dist/css/main.css | 12 ++++++ dist/index.html | 1 + dist/js/main.js | 94 ++++++++++++++++++++++++++++++++++++++++++++--- src/package.json | 2 +- 4 files changed, 102 insertions(+), 7 deletions(-) diff --git a/dist/css/main.css b/dist/css/main.css index 68e032b..b98b91e 100644 --- a/dist/css/main.css +++ b/dist/css/main.css @@ -47,12 +47,24 @@ border-bottom:1px black dotted; } +#copy_url { + cursor:pointer !important; + text-align: center; + width:11rem; +} + +#copy_url span { + width:11rem; + text-align: center; +} + #color_palette { min-width: 0rem; } #color_palette #colors_word_close { line-height: 2rem; + cursor:pointer; } #color_palette #colors_word_open { diff --git a/dist/index.html b/dist/index.html index 5e077ee..97747aa 100644 --- a/dist/index.html +++ b/dist/index.html @@ -110,6 +110,7 @@
« Colors
+
Copy Shareable URL
diff --git a/dist/js/main.js b/dist/js/main.js index e2fb0d0..9437a2f 100644 --- a/dist/js/main.js +++ b/dist/js/main.js @@ -44,7 +44,7 @@ $('#btn_go').on('click', function() { }) $('#importBtn').on('click', function() { - importConfig($('#importExportArea').val()) + importConfig(JSON.parse($('#importExportArea').val())) }) $('#bottom_nav #colors_word_open').on('click', function() { @@ -60,6 +60,17 @@ $('#bottom_nav #colors_word_close').on('click', function() { inflightColor = 'NONE' }) +$('#bottom_nav #copy_url').on('click', function() { + // TODO: Provide a warning here if the URL is longer than 2000 characters, probably using a modal. + let url = window.location.origin + getConfigUrl() + navigator.clipboard.writeText(url); + $('#bottom_nav #copy_url span').text('Copied!') + // Swap the text back after 3sec + setTimeout(function(){ + $('#bottom_nav #copy_url span').text('Copy Shareable URL') + }, 2000) +}) + $('#btn_import_export').on('click', function() { $('#importExportArea').val(JSON.stringify(exportConfig(), null, 2)) @@ -146,7 +157,6 @@ function addRow(network, netSize, colspan, note, notesWidth, color) { let styleTag = '' if (color !== '') { styleTag = ' style="background-color: ' + color + '"' - console.log(styleTag) } let newRow = ' \n' + @@ -354,10 +364,8 @@ function mutate_subnet_map(verb, network, subnetTree, propValue = '') { } } else if (verb === 'note') { subnetTree[mapKey]['_note'] = propValue - console.log('Note Verb - ' + propValue) } else if (verb === 'color') { subnetTree[mapKey]['_color'] = propValue - console.log('Color Verb - ' + propValue) } else { // How did you get here? } @@ -373,7 +381,10 @@ function show_warning_modal(message) { } $( document ).ready(function() { - reset(); + let autoConfigResult = processConfigUrl(); + if (!autoConfigResult) { + reset(); + } //importConfig('{"config_version":"1","subnets":{"10.0.0.0/16":{"10.0.0.0/17":{"10.0.0.0/18":{},"10.0.64.0/18":{}},"10.0.128.0/17":{"10.0.128.0/18":{"10.0.128.0/19":{},"10.0.160.0/19":{"10.0.160.0/20":{"10.0.160.0/21":{"10.0.160.0/22":{},"10.0.164.0/22":{}},"10.0.168.0/21":{}},"10.0.176.0/20":{"10.0.176.0/21":{"10.0.176.0/22":{"10.0.176.0/23":{},"10.0.178.0/23":{}},"10.0.180.0/22":{}},"10.0.184.0/21":{}}}},"10.0.192.0/18":{"10.0.192.0/19":{},"10.0.224.0/19":{}}}}},"notes":{}}') //importConfig('{"config_version":"1","subnets":{"10.0.0.0/16":{"10.0.0.0/17":{"10.0.0.0/18":{"_note":"Note 1"},"10.0.64.0/18":{"_note":"Note 2"}},"10.0.128.0/17":{"10.0.128.0/18":{"10.0.128.0/19":{"_note":"Note 3"},"10.0.160.0/19":{"10.0.160.0/20":{"10.0.160.0/21":{"10.0.160.0/22":{"_note":"Note 4"},"10.0.164.0/22":{"_note":"Note 5"}},"10.0.168.0/21":{"_note":"Note 6"}},"10.0.176.0/20":{"10.0.176.0/21":{"10.0.176.0/22":{"10.0.176.0/23":{"_note":"Note 7"},"10.0.178.0/23":{"_note":"Note 8"}},"10.0.180.0/22":{"_note":"Note 9"}},"10.0.184.0/21":{"_note":"Note 10"}}}},"10.0.192.0/18":{"10.0.192.0/19":{"_note":"Note 11"},"10.0.224.0/19":{"_note":"Note 12"}}}}},"notes":{}}') }); @@ -385,9 +396,80 @@ function exportConfig() { } } +function getConfigUrl() { + let defaultExport = JSON.parse(JSON.stringify(exportConfig())); + renameKey(defaultExport, 'config_version', 'v') + renameKey(defaultExport, 'subnets', 's') + shortenKeys(defaultExport['s']) + return '/index.html?c=' + LZString.compressToEncodedURIComponent(JSON.stringify(defaultExport)) +} + +function processConfigUrl() { + const params = new Proxy(new URLSearchParams(window.location.search), { + get: (searchParams, prop) => searchParams.get(prop), + }); + if (params['c'] !== null) { + let urlConfig = JSON.parse(LZString.decompressFromEncodedURIComponent(params['c'])) + renameKey(urlConfig, 'v', 'config_version') + renameKey(urlConfig, 's', 'subnets') + expandKeys(urlConfig['subnets']) + let subnet_split = Object.keys(urlConfig['subnets'])[0].split('/') + $('#network').val(subnet_split[0]) + $('#netsize').val(subnet_split[1]) + importConfig(urlConfig) + return true + } +} + +function shortenKeys(subnetTree) { + for (let mapKey in subnetTree) { + if (mapKey.startsWith('_')) { + continue; + } + if (has_network_sub_keys(subnetTree[mapKey])) { + shortenKeys(subnetTree[mapKey]) + } else { + if (subnetTree[mapKey].hasOwnProperty('_note')) { + renameKey(subnetTree[mapKey], '_note', '_n') + } + if (subnetTree[mapKey].hasOwnProperty('_color')) { + renameKey(subnetTree[mapKey], '_color', '_c') + } + + } + } +} + +function expandKeys(subnetTree) { + for (let mapKey in subnetTree) { + if (mapKey.startsWith('_')) { + continue; + } + if (has_network_sub_keys(subnetTree[mapKey])) { + expandKeys(subnetTree[mapKey]) + } else { + if (subnetTree[mapKey].hasOwnProperty('_n')) { + renameKey(subnetTree[mapKey], '_n', '_note') + } + if (subnetTree[mapKey].hasOwnProperty('_c')) { + renameKey(subnetTree[mapKey], '_c', '_color') + } + + } + } +} + + +function renameKey(obj, oldKey, newKey) { + if (oldKey !== newKey) { + Object.defineProperty(obj, newKey, + Object.getOwnPropertyDescriptor(obj, oldKey)); + delete obj[oldKey]; + } +} + function importConfig(text) { // TODO: Probably need error checking here - text = JSON.parse(text) if (text['config_version'] === '1') { subnetMap = text['subnets']; renderTable() diff --git a/src/package.json b/src/package.json index aeca501..0982b2d 100644 --- a/src/package.json +++ b/src/package.json @@ -7,6 +7,6 @@ "scripts": { "postinstall": "npm install -g sass", "build": "sass --style compressed scss/custom.scss:../dist/css/bootstrap.min.css && cp node_modules/lz-string/libs/lz-string.min.js ../dist/js/lz-string.min.js", - "start": "node node_modules/http-server/bin/http-server ../dist" + "start": "node node_modules/http-server/bin/http-server ../dist -c-1" } }