@copoko/space
Version:
CoPoKo Space
249 lines (246 loc) • 7.53 kB
HTML
<script>
function rendererProjects() {
Space.KV.Get("setting").then(function (response) {
console.log(response);
Space.Setting = JSON.parse(response.value);
if (response.sucess && !response.value) {
Space.KV.Put("setting", "{}")
Space.Setting = {};
}
CARD_HTML = "";
Object.keys(Space.Setting).forEach(e => {
CARD_HTML += getCard(e);
});
document.getElementById("card-set").innerHTML = CARD_HTML;
});
}
rendererProjects();
function getKVItem(it, key, value) {
return `<tr>
<td>
<p>${key}</p>
</td>
<td>
<p>${value}</p>
</td>
<td class="project-actions text-right">
<a id="edit-${it}-${key}" onclick="EditKVItem(this)" class="btn btn-info btn-sm">
<i class="fas fa-pencil-alt"> </i>
Edit
</a>
<a id="delete-${it}-${key}" onclick="DeleteKVItem(this)" class="btn btn-danger btn-sm">
<i class="fas fa-trash"> </i>
Delete
</a>
</td>
</tr>`;
}
function getCard(it) {
KVItem_HTML = ""
Object.keys(Space.Setting[it]).forEach(e => {
KVItem_HTML += getKVItem(it, e, Space.Setting[it][e]);
});
return `<div class="card collapsed-card">
<div class="card-header">
<h3 class="card-title">${it}</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
<i class="fas fa-plus"></i>
</button>
<button id="delete-project-${it}" type="button" class="btn btn-tool" title="Remove" onclick="ProjectDelete(this)">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="card-body p-0" style="display: none;">
<table class="table table-striped projects">
<thead>
<tr>
<th>Key</th>
<th>Value</th>
<th style="width: 20%"></th>
</tr>
</thead>
<tbody>
${KVItem_HTML}
</tbody>
</table>
<button id="add-kv-${it}" type="button" class="btn btn-block btn-primary btn-lg" onclick="ProjectAddKV(this)">Add KV</button>
</div>
</div>`
}
$("#add-project").click((e) => {
Swal.fire({
title: 'Type your project name',
input: 'text',
inputAttributes: {
autocapitalize: 'off'
},
showCancelButton: true,
confirmButtonText: 'Add',
showLoaderOnConfirm: true,
preConfirm: (key) => {
Space.Setting[key] = {}
return Space.KV.Put("setting", JSON.stringify(Space.Setting)).then(function (response) {
console.log(response);
return response;
})
.catch(error => {
Swal.showValidationMessage(
`Request failed: ${error}`
)
})
},
allowOutsideClick: () => !Swal.isLoading()
}).then((result) => {
console.log(result);
if (result.isConfirmed) {
if (result.value.sucess) {
rendererProjects();
Toast.fire({
icon: 'success',
title: `Add Project Successfully`
})
}
}
})
})
function ProjectAddKV(it) {
let project = it.id.split("-")[2];
Swal.fire({
title: 'Type your key Value',
html: '<input id="swal-input1" class="swal2-input" placeholder="Key"><br/>' +
'<input id="swal-input2" class="swal2-input" placeholder="Value">',
inputAttributes: {
autocapitalize: 'off'
},
showCancelButton: true,
confirmButtonText: 'Add',
showLoaderOnConfirm: true,
preConfirm: () => {
let key = document.getElementById('swal-input1').value;
let value = document.getElementById('swal-input2').value;
Space.Setting[project][key] = value;
console.log(Space.Setting);
return Space.KV.Put("setting", JSON.stringify(Space.Setting)).then(function (response) {
console.log(response);
return response;
})
.catch(error => {
Swal.showValidationMessage(
`Request failed: ${error}`
)
})
},
allowOutsideClick: () => !Swal.isLoading()
}).then((result) => {
console.log(result);
if (result.isConfirmed) {
if (result.value.sucess) {
rendererProjects();
Toast.fire({
icon: 'success',
title: `Add KV Successfully`
})
}
}
})
}
function ProjectDelete(it) {
let project = it.id.split("-")[2];
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.value) {
delete Space.Setting[project];
Space.KV.Put("setting", JSON.stringify(Space.Setting)).then(function (response) {
console.log(response);
if (response.sucess) {
rendererProjects();
Toast.fire({
icon: 'success',
title: `Deleted Project ${project}`
})
}
})
}
})
}
function EditKVItem(it) {
let project = it.id.split("-")[1];
let key = it.id.split("-")[2];
let value = Space.Setting[project][key];
Swal.fire({
title: 'Type your key Value',
html: '<input id="swal-input1" class="swal2-input" placeholder="Key" value="' + key + '"><br/>' +
'<input id="swal-input2" class="swal2-input" placeholder="Value" value="' + value + '">',
inputAttributes: {
autocapitalize: 'off'
},
showCancelButton: true,
confirmButtonText: 'Edit',
showLoaderOnConfirm: true,
preConfirm: () => {
delete Space.Setting[project][it.id.split("-")[2]];
let key = document.getElementById('swal-input1').value;
let value = document.getElementById('swal-input2').value;
Space.Setting[project][key] = value;
console.log(Space.Setting);
return Space.KV.Put("setting", JSON.stringify(Space.Setting)).then(function (response) {
console.log(response);
return response;
})
.catch(error => {
Swal.showValidationMessage(
`Request failed: ${error}`
)
})
},
allowOutsideClick: () => !Swal.isLoading()
}).then((result) => {
console.log(result);
if (result.isConfirmed) {
if (result.value.sucess) {
rendererProjects();
Toast.fire({
icon: 'success',
title: `Editd KV ${key}`
})
}
}
})
}
function DeleteKVItem(it) {
let project = it.id.split("-")[1];
let key = it.id.split("-")[2];
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.value) {
delete Space.Setting[project][key];
Space.KV.Put("setting", JSON.stringify(Space.Setting)).then(function (response) {
console.log(response);
if (response.sucess) {
rendererProjects();
Toast.fire({
icon: 'success',
title: `Deleted KV ${key}`
})
}
})
}
})
}
</script>