78 lines
2.6 KiB
HTML
78 lines
2.6 KiB
HTML
|
{% extends "base.html" %}
|
||
|
|
|
||
|
|
{% block title %}
|
||
|
|
Edit service: {{ item.id }}
|
||
|
|
{% endblock title %}
|
||
|
|
|
||
|
|
{% block content %}
|
||
|
|
<h1>Edit service: {{ item.id }}</h1>
|
||
|
|
<div class="mb-10">
|
||
|
|
<form hx-post="/services/{{ item.id }}" hx-ext="submitjson" hx-target="#success-message">
|
||
|
|
<div class="mb-5">
|
||
|
|
<div>
|
||
|
|
<label>name</label>
|
||
|
|
<br />
|
||
|
|
<input id="name" name="name" type="text" value="{{item.name}}" required></input>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label>description</label>
|
||
|
|
<br />
|
||
|
|
<textarea id="description" name="description" type="text">{{item.description}}</textarea>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label>configuration</label>
|
||
|
|
<br />
|
||
|
|
<textarea id="configuration" name="configuration" type="text">{{item.configuration}}</textarea>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="mt-5">
|
||
|
|
<button class=" text-xs py-3 px-6 rounded-lg bg-gray-900 text-white" type="submit">Submit</button>
|
||
|
|
<button class="text-xs py-3 px-6 rounded-lg bg-red-600 text-white"
|
||
|
|
onclick="confirmDelete(event)">Delete</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
<div id="success-message" class="mt-4"></div>
|
||
|
|
<br />
|
||
|
|
<a href="/services">Back to service</a>
|
||
|
|
</div>
|
||
|
|
{% endblock content %}
|
||
|
|
|
||
|
|
{% block js %}
|
||
|
|
<script>
|
||
|
|
htmx.defineExtension('submitjson', {
|
||
|
|
onEvent: function (name, evt) {
|
||
|
|
if (name === "htmx:configRequest") {
|
||
|
|
evt.detail.headers['Content-Type'] = "application/json"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
encodeParameters: function (xhr, parameters, elt) {
|
||
|
|
const json = {};
|
||
|
|
for (const [key, value] of Object.entries(parameters)) {
|
||
|
|
const inputType = elt.querySelector(`[name=${key}]`).type;
|
||
|
|
if (inputType === 'number') {
|
||
|
|
json[key] = parseFloat(value);
|
||
|
|
} else if (inputType === 'checkbox') {
|
||
|
|
json[key] = elt.querySelector(`[name=${key}]`).checked;
|
||
|
|
} else {
|
||
|
|
json[key] = value;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return JSON.stringify(json);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
function confirmDelete(event) {
|
||
|
|
event.preventDefault();
|
||
|
|
if (confirm("Are you sure you want to delete this item?")) {
|
||
|
|
var xhr = new XMLHttpRequest();
|
||
|
|
xhr.open("DELETE", "/services/{{ item.id }}", true);
|
||
|
|
xhr.onreadystatechange = function () {
|
||
|
|
if (xhr.readyState == 4 && xhr.status == 200) {
|
||
|
|
window.location.href = "/services";
|
||
|
|
}
|
||
|
|
};
|
||
|
|
xhr.send();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
{% endblock js %}
|