Add the Ability to remove websites

mozilla-extensions · Aug 21, 2024 · 21c9725 · 21c9725
1 parent 771ed42
commit 21c9725
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 4 deletions.
diff --git a/src/assets/img/delete-gray.svg b/src/assets/img/delete-gray.svg
diff --git a/src/ui/settingsPage/settingsPage.js b/src/ui/settingsPage/settingsPage.js
@@ -80,10 +80,16 @@ export class SettingsPage extends LitElement {
         <mz-context-table
           .contexts=${filteredList}
           .serverList=${this.serverList}
+          .onRemoveOrigin=${this.removeOrigin.bind(this)}
         ></mz-context-table>
       </main>
     `;
   }
+  removeOrigin(origin){
+    this.proxyHandler.then(handler => {
+        handler.removeContextForOrigin(origin);
+    })
+  }
 
   static styles = css`
     ${fontSizing}

diff --git a/src/ui/settingsPage/tableElement.js b/src/ui/settingsPage/tableElement.js
@@ -22,13 +22,15 @@ export class ContextTable extends LitElement {
     contexts: { type: Array },
     sortingKey: { type: String },
     sortingAcending: { type: Boolean },
+    onRemoveOrigin: {type: Function}
   };
   constructor() {
     super();
     this.serverList = [];
     this.contexts = [];
     this.sortingKey = "origin";
     this.sortingAcending = true;
+    this.onRemoveOrigin = ()=>{};
   }
   sorters = {
     origin: (a, b) => a.origin.localeCompare(b.origin),
@@ -59,7 +61,7 @@ export class ContextTable extends LitElement {
             this.sortingAcending,
             this.#setSorting.bind(this)
           )}
-          ${sortedList.map((c) => tableRow(c, this.serverList))}
+          ${sortedList.map((c) => tableRow(c, this.serverList, this.onRemoveOrigin))}
         </table>
         ${noElementPlaceHolder(this.contexts)}
       </div>
@@ -239,12 +241,13 @@ export const tableHeading = (
           Location
         </button>
       </th>
+      <th></th>
     </tr>
   `;
 };
 
-export const noElementPlaceHolder = (contexts = new Map()) => {
-  if (contexts.size != 0) {
+export const noElementPlaceHolder = (contexts = []) => {
+  if (contexts.length != 0) {
     return null;
   }
   return html`
@@ -262,7 +265,7 @@ export const noElementPlaceHolder = (contexts = new Map()) => {
 /**
  * @param {SiteContext} ctx
  */
-export const tableRow = (ctx, serverList) => {
+export const tableRow = (ctx, serverList, removeOrigin) => {
   const name = ctx.excluded
     ? ""
     : Utils.nameFor(ctx.countryCode, ctx.cityCode, serverList);
@@ -275,6 +278,9 @@ export const tableRow = (ctx, serverList) => {
         ${ctx.excluded ? "OFF" : "ON"}
       </td>
       <td>${name}</td>
+      <td class="delete">
+        <button class="deleteBtn" @click=${()=>{removeOrigin(ctx.origin)}}>remove</button>
+      </td>
     </tr>
   `;
 };