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 5e8804718f2a4b3f8c0a036ace8699620c29083e..7ffc43d02a989079402c70826fd1fefa473b6baf 100644 (file)
--- 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 bfe3530bb3c144464b6b818ddb998404a92af6b4..b74b59da02807b8bfb4246e888251e4ef0c79481 100644 (file)
--- 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 4d35eb260ca9838a93b3d9d7a57653bbff34552b..278be36d1d7a289d922071de97062082ef6434ee 100644 (file)
--- 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;
+}
 </style>
 </head>
 
@@ -51,58 +67,73 @@ a {
  <input type='button' name='theme' value='&#9788;'>
 </p>
 
+<span style='display: none' name='popup_msg'></span>
+
 <div class='settings'>
  <form name='settings'>
  <table width='100%'>
+  <tr>
+    <td>
+      Target Computer:
+    </td>
+    <td colspan=3>
+      <select tabindex='1' name='computer'>
+        <option selected value='Default'>Default</option>
+      </select>
+      <input name='computer_name' style='display: none;' placeholder='Enter name &amp; hit Add when done'>
+      <input tabindex='2' type='button' name='add_computer' value='Add'>
+      <input tabindex='3' type='button' name='del_computer' value='Del'>
+    </td>
+  </tr>
   <tr>
    <td>
     <a href='https://en.wikipedia.org/wiki/IP_address' target='_blank'>IP</a>
     /
     <a href='https://en.wikipedia.org/wiki/Hostname' target='_blank'>Hostname</a>:
    </td>
-   <td><input tabindex='1' name='host' value='255.255.255.255' size='40' autofocus></td>
+   <td><input tabindex='4' name='host' value='255.255.255.255' size='40' autofocus></td>
   </tr>
   <tr>
    <td><a href='https://en.wikipedia.org/wiki/MAC_address' target='_blank'>MAC address</a>:</td>
    <td>
     <span name='mac-many'>
-     <input tabindex='2' class='mac' name='mac0' value='20' size='1' maxlength='2'>
-     <input tabindex='3' class='mac' name='mac1' value='00' size='1' maxlength='2'>
-     <input tabindex='4' class='mac' name='mac2' value='00' size='1' maxlength='2'>
-     <input tabindex='5' class='mac' name='mac3' value='00' size='1' maxlength='2'>
-     <input tabindex='6' class='mac' name='mac4' value='00' size='1' maxlength='2'>
-     <input tabindex='7' class='mac' name='mac5' value='00' size='1' maxlength='2'>
+     <input tabindex='5' class='mac' name='mac0' value='20' size='1' maxlength='2'>
+     <input tabindex='6' class='mac' name='mac1' value='00' size='1' maxlength='2'>
+     <input tabindex='7' class='mac' name='mac2' value='00' size='1' maxlength='2'>
+     <input tabindex='8' class='mac' name='mac3' value='00' size='1' maxlength='2'>
+     <input tabindex='9' class='mac' name='mac4' value='00' size='1' maxlength='2'>
+     <input tabindex='10' class='mac' name='mac5' value='00' size='1' maxlength='2'>
     </span>
     <span name='mac-one' hidden>
-     <input tabindex='8' class='mac' name='mac' size='39' maxlength='20'>
+     <input tabindex='11' class='mac' name='mac' size='39' maxlength='20'>
     </span>
-    <a tabindex='9' name='mac-paste' href=''>Paste</a>
+    <a tabindex='12' name='mac-paste' href=''>Paste</a>
    </td>
   </tr>
   <tr>
    <td><a href='https://en.wikipedia.org/wiki/Port_(computer_networking)' target='_blank'>Port</a>:</td>
-   <td><input tabindex='10' type='number' name='port' min='1' max='65535' step='1' value='9'></td>
+   <td><input tabindex='13' type='number' name='port' min='1' max='65535' step='1' value='9'></td>
   </tr>
   <tr>
    <td><a href='https://en.wikipedia.org/wiki/Wake-on-LAN#Security_considerations' target='_blank'>SecureOn</a>:</td>
    <td>
     <span name='pass-many'>
-     <input tabindex='11' class='mac' name='pass0' value='00' size='1' maxlength='2'>
-     <input tabindex='12' class='mac' name='pass1' value='00' size='1' maxlength='2'>
-     <input tabindex='13' class='mac' name='pass2' value='00' size='1' maxlength='2'>
-     <input tabindex='14' class='mac' name='pass3' value='00' size='1' maxlength='2'>
-     <input tabindex='15' class='mac' name='pass4' value='00' size='1' maxlength='2'>
-     <input tabindex='16' class='mac' name='pass5' value='00' size='1' maxlength='2'>
+     <input tabindex='14' class='mac' name='pass0' value='00' size='1' maxlength='2'>
+     <input tabindex='15' class='mac' name='pass1' value='00' size='1' maxlength='2'>
+     <input tabindex='16' class='mac' name='pass2' value='00' size='1' maxlength='2'>
+     <input tabindex='17' class='mac' name='pass3' value='00' size='1' maxlength='2'>
+     <input tabindex='18' class='mac' name='pass4' value='00' size='1' maxlength='2'>
+     <input tabindex='19' class='mac' name='pass5' value='00' size='1' maxlength='2'>
     </span>
     <span name='pass-one' hidden>
-     <input tabindex='17' class='mac' name='pass' size='39' maxlength='20'>
+     <input tabindex='20' class='mac' name='pass' size='39' maxlength='20'>
     </span>
-    <a tabindex='18' name='pass-paste' href=''>Paste</a>
+    <a tabindex='21' name='pass-paste' href=''>Paste</a>
    </td>
   </tr>
   <tr>
    <td colspan=2 align='middle'>
-    <input tabindex='19' type='submit' name='send' value='Send'>
+    <input tabindex='20' type='submit' name='send' value='Send'>
    </td>
   </tr>
  </table>