From 6697309f6c264755c413c1cc0401542df03aad59 Mon Sep 17 00:00:00 2001
From: Shree Vatsa N <vatsa@kadalu.tech>
Date: Fri, 30 Dec 2022 18:23:28 +0530
Subject: [PATCH] templates: Add option to edit mgr instance stored in
 localstorage

Updates: #37
Signed-off-by: Shree Vatsa N <vatsa@kadalu.tech>
---
 static/js/app.js            |  2 +
 templates/instances.html.j2 | 78 +++++++++++++++++++++++++++++++++++++
 2 files changed, 80 insertions(+)

diff --git a/static/js/app.js b/static/js/app.js
index d5d9131..874d0ff 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -265,6 +265,8 @@ SVG_STOP = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="cu
 SVG_PLAY = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6 icon is-small"><path fill-rule="evenodd" d="M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z" clip-rule="evenodd" /></svg>';
 SVG_DELETE = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6 icon is-small"><path fill-rule="evenodd" d="M16.5 4.478v.227a48.816 48.816 0 013.878.512.75.75 0 11-.256 1.478l-.209-.035-1.005 13.07a3 3 0 01-2.991 2.77H8.084a3 3 0 01-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 01-.256-1.478A48.567 48.567 0 017.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 013.369 0c1.603.051 2.815 1.387 2.815 2.951zm-6.136-1.452a51.196 51.196 0 013.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 00-6 0v-.113c0-.794.609-1.428 1.364-1.452zm-.355 5.945a.75.75 0 10-1.5.058l.347 9a.75.75 0 101.499-.058l-.346-9zm5.48.058a.75.75 0 10-1.498-.058l-.347 9a.75.75 0 001.5.058l.345-9z" clip-rule="evenodd" /></svg>';
 
+SVG_EDIT = '';
+
 SVG_ELLIPSIS = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6 icon is-medium"><path fill-rule="evenodd" d="M4.5 12a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm6 0a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm6 0a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z" clip-rule="evenodd" /></svg>';
 
 function volumeStartButton(volume, idx) {
diff --git a/templates/instances.html.j2 b/templates/instances.html.j2
index 89b2770..c05cb87 100644
--- a/templates/instances.html.j2
+++ b/templates/instances.html.j2
@@ -59,6 +59,38 @@
                 </div>
         </div>
 
+        <div class="modal" :class="showEditStorageManager ? 'is-active' : ''">
+            <div class="modal-background"></div>
+                <div class="modal-card">
+                    <header class="modal-card-head">
+                        <p class="modal-card-title">Edit existing storage manager instance</p>
+                        <button class="delete" @click="resetForm()" aria-label="close"></button>
+                    </header>
+                    <section class="modal-card-body">
+                        <article class="message is-danger" x-show="error != ''">
+                            <div class="message-body" x-text="error"></div>
+                        </article>
+                        <div class="field">
+                            <label class="label">Name</label>
+                            <div class="control">
+                                <input class="input" x-model="smEditName" type="sm.name">
+                            </div>
+                        </div>
+
+                        <div class="field">
+                            <label class="label">URL</label>
+                            <div class="control">
+                                <input class="input" x-model="smEditUrl" type="sm.url">
+                            </div>
+                        </div>
+                    </section>
+                    <footer class="modal-card-foot">
+                        <button class="button is-link" @click="saveEditInstance()">Edit</button>
+                        <button class="button is-link is-light" @click="resetForm()">Cancel</button>
+                    </footer>
+                </div>
+        </div>
+
         <h1 class="is-size-5 mb-4 px-2" x-show="storageManagers.length > 0">
             List of instances
             <button class="button is-primary is-clickable ml-2 is-small"
@@ -83,6 +115,10 @@
                                         <a class="dropdown-item" @click="deleteInstance(sm.name)" x-html="`<span class='has-text-danger'>${SVG_DELETE}</span> Delete`">
                                         </a>
                                     </div>
+                                    <div class="dropdown-content">
+                                        <a class="dropdown-item" @click="editInstance(sm)" x-html="`<span class='has-text-waring'>${SVG_EDIT}</span> Edit`">
+                                        </a>
+                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -117,17 +153,23 @@
              linkName: "storage_managers",
              showWelcome: false,
              showAddStorageManager: false,
+             showEditStorageManager: false,
              showAddButton: true,
              smName: "",
              smUrl: "",
+             smEditName: "",
+             smEditUrl: "",
              error: "",
              message: "",
              storageManagers: [],
              resetForm() {
                  this.showAddStorageManager = false;
+                 this.showEditStorageManager = false;
                  this.showWelcome = true;
                  this.smName = '';
                  this.smUrl = '';
+                 this.smEditName = '';
+                 this.smEditUrl = '';
                  this.error = '';
              },
              storageManagerUrl(sm) {
@@ -224,6 +266,42 @@
                  }
                  this.getStorageManagers();
              },
+             editInstance(sm) {
+                 var obj = this;
+                 obj.smEditName = sm.name;
+                 obj.smEditUrl = sm.url;
+                 obj.smName = sm.name;
+                 obj.smUrl = sm.url;
+                 obj.showEditStorageManager = true;
+             },
+             saveEditInstance() {
+                 var obj = this;
+                 var instances = window.localStorage.getItem("storage_managers");
+
+                 if (!instances) instances = "[]";
+                 var data = JSON.parse(instances);
+
+                 for (var i=0; i<data.length; i++) {
+                     if (data[i].name.toLowerCase() === obj.smName.toLowerCase()) {
+                        data[i].name = obj.smEditName;
+                        data[i].url = obj.smEditUrl;
+                     }
+                 }
+
+                 window.localStorage.setItem("storage_managers", JSON.stringify(data));
+
+                 obj.getStorageManagers();
+                 obj.smName = "";
+                 obj.smUrl = "";
+                 obj.smEditName = "";
+                 obj.smEditUrl = "";
+                 obj.showEditStorageManager = false;
+                 obj.message = "Storage Manager instance edited successfully!";
+                 obj.showAddButton = true;
+                 setTimeout(function() {
+                     obj.message = "";
+                 }, 5000);
+             },
              async handleRedirectToCreateOrLogin(sm) {
                  if (!sm.reachable) return;