59 lines
1.8 KiB
HTML
59 lines
1.8 KiB
HTML
|
{% extends "base.html" %}
|
||
|
|
|
||
|
|
{% block title %}
|
||
|
|
Create service
|
||
|
|
{% endblock title %}
|
||
|
|
|
||
|
|
{% block content %}
|
||
|
|
<div class="mb-10">
|
||
|
|
<form hx-post="/services" hx-ext="submitjson">
|
||
|
|
<h1>Create new service</h1>
|
||
|
|
<div class="mb-5">
|
||
|
|
<div>
|
||
|
|
<label>name</label>
|
||
|
|
<br />
|
||
|
|
<input id="name" name="name" type="text" value="" required/>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label>description</label>
|
||
|
|
<br />
|
||
|
|
<textarea id="description" name="description" type="text" value="" rows="10" cols="50"></textarea>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label>configuration</label>
|
||
|
|
<br />
|
||
|
|
<textarea id="configuration" name="configuration" type="text" value="" rows="10" cols="50"></textarea>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<button class=" text-xs py-3 px-6 rounded-lg bg-gray-900 text-white" type="submit">Submit</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</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);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
{% endblock js %}
|