From: Mike Frysinger Date: Sun, 12 Mar 2017 08:51:25 +0000 (-0800) Subject: add support for saving configs X-Git-Tag: v0.2.0~1 X-Git-Url: https://git.wh0rd.org/?a=commitdiff_plain;h=0e1cff999afaae555abf07f0ccd5e72887c3aade;p=chrome-ext%2Fwake-on-lan.git add support for saving configs Change the settings from a single entry to an array of computers. With a lot of help from Gary Clark! --- diff --git a/Makefile b/Makefile index 5e88047..7ffc43d 100644 --- a/Makefile +++ b/Makefile @@ -1,4 +1,4 @@ -CLOSURE = closure-compiler --language_in ECMASCRIPT5 +CLOSURE = closure-compiler --language_in ECMASCRIPT6 YUICOMPRESSOR = yuicompressor all: diff --git a/js/main.js b/js/main.js index bfe3530..b74b59d 100644 --- a/js/main.js +++ b/js/main.js @@ -5,6 +5,17 @@ function status(msg) { $$('[name=status]').innerText = msg; } +function popup_msg(ele, msg) { + var popup = $$('[name=popup_msg]'); + var pos = ele.getBoundingClientRect(); + popup.innerText = msg; + // Might want to add some generalized "center in element" logic. + popup.style.top = 5 + pos.top + 'px'; + popup.style.left = pos.left + 'px'; + popup.style.display = ''; + setTimeout(() => { popup.style.display = 'none'; }, 3000); +} + // Create a packet following the spec: // https://en.wikipedia.org/wiki/Wake-on-LAN#Magic_packet function magicpacket(mac, pass) { @@ -194,59 +205,241 @@ function paste_pass() { /* * Storage logic. */ + +var computers = []; + var settings_keys = [ + 'computers', + 'last_selected', + 'theme', +]; +var old_settings_keys = [ 'host', 'mac', 'pass', 'port', - 'theme', ]; var default_theme = 'dark'; +var default_name = 'Default'; var default_host = '192.168.0.255'; var default_port = '40000'; var default_mac = '20:00:00:00:00:00'; var default_pass = '00:00:00:00:00:00'; -function load_settings() { - var storage = chrome.storage.local; +/* + * Set form data based on selected computer settings. + * Uses defaults if not available. + */ +function load_computer(idx) { + var computer = computers[idx] || {}; + chrome.storage.local.set({'last_selected': idx}); + var form = $$('form[name=settings]'); + + form.computer.value = computer['name'] || default_name; + form.host.value = computer['host'] || default_host; + form.port.value = computer['port'] || default_port; + // We assume we only get called during init. + paste_mac(); + form.mac.value = computer['mac'] || default_mac; + paste_mac(); + paste_pass(); + form.pass.value = computer['pass'] || default_pass; + paste_pass(); +} + +function load_settings() { chrome.storage.local.get(settings_keys, function(settings) { set_theme(settings['theme'] || default_theme); - var form = $$('form[name=settings]'); - form.host.value = settings['host'] || default_host; - form.port.value = settings['port'] || default_port; - // We assume we only get called during init. - paste_mac(); - form.mac.value = settings['mac'] || default_mac; - paste_mac(); - paste_pass(); - form.pass.value = settings['pass'] || default_pass; - paste_pass(); + if ('computers' in settings) { + computers = settings['computers'] || []; + populate_computers(); + load_computer(settings['last_selected'] || 0); + } else { + // Migrate old settings. + chrome.storage.local.get(old_settings_keys, function(settings) { + computers[0] = settings; + populate_computers(); + load_computer(0); + store_settings(); + chrome.storage.local.remove(old_settings_keys); + }); + } }); } +/* + * Update the currently selected computer then write out the whole thing. + */ function store_settings() { - var form = $$('form[name=settings]'); sync_mac(); sync_pass(); - var settings = { + + var form = $$('form[name=settings]'); + var select = $$('select[name=computer]'); + var idx = select.selectedIndex; + computers[idx] = { + 'name': form.computer.value, 'host': form.host.value, 'mac': form.mac.value, 'pass': form.pass.value, 'port': form.port.value, - 'theme': curr_theme, }; - chrome.storage.local.set(settings); + + chrome.storage.local.set({ + 'computers': computers, + }); +} + +/* + * If they try deleting all entries, make sure we re-add the default. + */ +function check_empty_computers(select) { + if (select.length == 0) { + var option = document.createElement('option'); + option.text = 'Default'; + select.add(option, 0); + load_computer(0); + } +} + +/* + * Fill out the computer drop down with existing config options. + */ +function populate_computers() { + var select = $$('select[name=computer]'); + select.length = 0; + + for (var i = 0; i < computers.length; i++) { + var option = document.createElement('option'); + var computer = computers[i] || {}; + option.text = computer['name'] || default_name; + select.add(option, i); + } + + check_empty_computers(select); +} + +/* + * When a computer config is selected, load the corresponding settings. + */ +function select_computer() { + load_computer($$('select[name=computer]').selectedIndex); +} + +/* + * Toggle between the computer drop down & new name input field. + */ +function toggle_add_fields(hide_obj, show_obj) { + hide_obj.disabled = true; + hide_obj.style.display = 'none'; + show_obj.disabled = false; + show_obj.style.display = 'inline'; + show_obj.focus(); +} + +/* + * Del curent slected computer + */ +function del_computer() { + var select = $$('select[name=computer]'); + + var idx = select.selectedIndex; + // Delete the currently selected index. + computers.splice(idx, 1); + select.remove(idx); + + // Make sure the list isn't entirely empty now. + check_empty_computers(select); + + // Load/select the next entry in the list. + if (idx == select.length && idx > 0) + --idx; + load_computer(idx); + + store_settings(); +} + + +/* + * Shows an input box to enter new computer name. + */ +function add_computer_start() { + var select = $$('select[name=computer]'); + var text = $$('input[name=computer_name]'); + + // If the box isn't visible, show it. Otherwise, they want to + // actually add the current settings so create a new entry. + if (select.style.display == 'none') + add_computer(); + else + toggle_add_fields(select, text); +} + +/* + * Wait for the enter key in the add text field. + */ +function add_computer_check(e) { + if (e.key == 'Enter') { + add_computer(); + e.preventDefault(); + } +} + +/* + * Try to actually create a new computer entry. + */ +function add_computer() { + var select = $$('select[name=computer]'); + var form = $$('form[name=settings]'); + var text = $$('input[name=computer_name]'); + + var name = text.value.trim(); + // Make sure they've added a valid name first. + // Options fields don't allow leading/trailing whitespace. + if (name == '') { + text.value = ''; + toggle_add_fields(text, select); + return; + } + + // Make sure they don't try to add a duplicate name. + for (var i = 0; i < select.length; ++i) { + if (select.options[i].value == name) { + popup_msg(text, 'ERROR: computer name already exists!'); + return; + } + } + text.value = ''; + + var option = document.createElement('option'); + option.text = name; + select.add(option, -1); + + // Let the load_computer logic fill out the default values for us. + var idx = select.length - 1; + computers[idx] = { + 'name': name, + }; + load_computer(select.length - 1); + + toggle_add_fields(text, select); + + store_settings(); } /* * Startup. */ window.onload = function() { - $$('form[name=settings]').onsubmit = send; + $$('input[name=send]').onclick = send; + $$('select[name=computer]').onchange = select_computer; $$('a[name=mac-paste]').onclick = paste_mac; $$('a[name=pass-paste]').onclick = paste_pass; + $$('input[name=del_computer]').onclick = del_computer; + $$('input[name=add_computer]').onclick = add_computer_start; + $$('input[name=computer_name]').onkeypress = add_computer_check; $$('input[name=theme]').onclick = toggle_theme; load_settings(); diff --git a/main.html b/main.html index 4d35eb2..278be36 100644 --- a/main.html +++ b/main.html @@ -20,6 +20,14 @@ input.mac { text-align: center; } +select[name=computer] { + width: 275px; +} + +input[name=computer_name] { + width: 270px; +} + input[name=port] { text-align: center; } @@ -39,6 +47,14 @@ a { font-weight: bold; border: 1px dashed; } + +span[name=popup_msg] { + text-align: center; + font-weight: bold; + position: absolute; + background-color: yellow; + border: 1px solid; +} @@ -51,58 +67,73 @@ a {

+ +
+ + + + - + - +
+ Target Computer: + + + + + +
IP / Hostname:
MAC address: - - - - - - + + + + + + - Paste + Paste
Port:
SecureOn: - - - - - - + + + + + + - Paste + Paste
- +