X-Git-Url: https://git.wh0rd.org/?p=chrome-ext%2Fwake-on-lan.git;a=blobdiff_plain;f=js%2Fmain.js;fp=js%2Fmain.js;h=b74b59da02807b8bfb4246e888251e4ef0c79481;hp=bfe3530bb3c144464b6b818ddb998404a92af6b4;hb=0e1cff999afaae555abf07f0ccd5e72887c3aade;hpb=e54503ce22e4745dcb7489fc1d83087c22986514 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();