change to only add if editing existing container, add initial logic f…

…or adding
kurahaupo · Aug 29, 2021 · 74365a5 · 74365a5
1 parent 3d2f716
commit 74365a5
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 4 deletions.
diff --git a/src/js/popup.js b/src/js/popup.js
@@ -1336,6 +1336,12 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
     Utils.addEnterHandler(document.querySelector("#create-container-ok-link"), () => {
       this._submitForm();
     });
+
+    // Add new site to current container
+    const siteLink = document.querySelector("#edit-container-site-link");
+    Logic.addEnterHandler(siteLink, () => {
+      this._addSite();
+    });
   },
 
   async _submitForm() {
@@ -1359,6 +1365,57 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
     }
   },
 
+  async _addSite() {
+    const formValues = new FormData(this._editForm);
+    console.log(formValues.get("container-id"));
+    console.log(formValues.get("site-name"));
+  },
+
+  showAssignedContainers(assignments) {
+    const assignmentPanel = document.getElementById("edit-sites-assigned");
+    const assignmentKeys = Object.keys(assignments);
+    assignmentPanel.hidden = !(assignmentKeys.length > 0);
+    if (assignments) {
+      const tableElement = assignmentPanel.querySelector(".assigned-sites-list");
+      /* Remove previous assignment list,
+         after removing one we rerender the list */
+      while (tableElement.firstChild) {
+        tableElement.firstChild.remove();
+      }
+
+      assignmentKeys.forEach((siteKey) => {
+        const site = assignments[siteKey];
+        const trElement = document.createElement("div");
+        /* As we don't have the full or correct path the best we can assume is the path is HTTPS and then replace with a broken icon later if it doesn't load.
+           This is pending a better solution for favicons from web extensions */
+        const assumedUrl = `https://${site.hostname}/favicon.ico`;
+        trElement.innerHTML = escaped`
+        <div class="favicon"></div>
+        <div title="${site.hostname}" class="truncate-text hostname">
+          ${site.hostname}
+        </div>
+        <img
+          class="pop-button-image delete-assignment"
+          src="/img/container-delete.svg"
+        />`;
+        trElement.getElementsByClassName("favicon")[0].appendChild(Utils.createFavIconElement(assumedUrl));
+        const deleteButton = trElement.querySelector(".delete-assignment");
+        const that = this;
+        Logic.addEnterHandler(deleteButton, async () => {
+          const userContextId = Logic.currentUserContextId();
+          // Lets show the message to the current tab
+          // TODO remove then when firefox supports arrow fn async
+          const currentTab = await Logic.currentTab();
+          Logic.setOrRemoveAssignment(currentTab.id, assumedUrl, userContextId, true);
+          delete assignments[siteKey];
+          that.showAssignedContainers(assignments);
+        });
+        trElement.classList.add("container-info-tab-row", "clickable");
+        tableElement.appendChild(trElement);
+      });
+    }
+  },
+
   initializeRadioButtons() {
     const colorRadioTemplate = (containerColor) => {
       return Utils.escaped`<input type="radio" value="${containerColor}" name="container-color" id="edit-container-panel-choose-color-${containerColor}" />
@@ -1404,6 +1461,8 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
     Utils.addEnterHandler(document.querySelector("#manage-assigned-sites-list"), () => {
       Logic.showPanel(P_CONTAINER_ASSIGNMENTS, identity);
     });
+    // Only show ability to add site if it's an existing container
+    document.querySelector("#edit-container-panel-add-site").hidden = !userContextId;
 
     document.querySelector("#edit-container-panel-name-input").value = identity.name || "";
     document.querySelector("#edit-container-panel-usercontext-input").value = userContextId || NEW_CONTAINER_ID;

diff --git a/src/popup.html b/src/popup.html
@@ -191,7 +191,7 @@ <h3 class="title">
     </div>
     <div class="bottom-btn keyboard-nav hover-highlight" id="manage-containers-link" tabindex="0">
       Manage Containers
-    </div> 
+    </div>
   </div>
 
 
@@ -247,7 +247,7 @@ <h3 class="title" id="container-info-title">
             <span class="menu-text truncate-text">www.mozillllllllllllllllllllllllllllllllllllla.org</span>
             <img class="trash-button" src="/img/container-close-tab.svg" />
           </td>
-        </tr>       
+        </tr>
       </table>
     </div>
     <div class="bottom-btn keyboard-nav hover-highlight" id="manage-container-link" tabindex="0">
@@ -299,8 +299,8 @@ <h3 class="title" id="container-edit-title">
         <fieldset id="edit-container-panel-choose-icon" class="radio-choice">
           <legend class="form-header">Icon</legend>
         </fieldset>
-        <fieldset id="edit-container-panel-add-site">
-          <legend class="form-header">Add site</legend>
+        <fieldset id="edit-container-panel-add-site" hidden>
+          <legend class="form-header">Assign site</legend>
           <input type="text" name="site-name" id="edit-container-panel-site-input"/>
           <a class="button secondary" id="edit-container-site-link">Add</a>
         </fieldset>