Skip to content

Commit

Permalink
templates: Add option to edit mgr instance stored in localstorage (#38)
Browse files Browse the repository at this point in the history 
* templates: Add option to edit mgr instance stored in localstorage
* add edit icon

Updates: #37
Signed-off-by: Shree Vatsa N <[email protected]>
  • Loading branch information
@vatsa287
vatsa287 authored Jan 1, 2023
1 parent 266b689 commit da9be99
Show file tree
Hide file tree
Showing 2 changed files with 78 additions and 0 deletions.
2 changes: 2 additions & 0 deletions static/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 icon is-small"> <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125" /></svg>';

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) {
Expand Down
76 changes: 76 additions & 0 deletions templates/instances.html.j2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -82,6 +114,8 @@
<div class="dropdown-content">
<a class="dropdown-item" @click="deleteInstance(sm.name)" x-html="`<span class='has-text-danger'>${SVG_DELETE}</span> Delete`">
</a>
<a class="dropdown-item" @click="editInstance(sm)" x-html="`<span class='has-text-waring'>${SVG_EDIT}</span> Edit`">
</a>
</div>
</div>
</div>
Expand Down Expand Up @@ -117,17 +151,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) {
Expand Down Expand Up @@ -224,6 +264,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;
Expand Down

0 comments on commit da9be99

Please sign in to comment.