UI - services backend started

ui/templates/services-delete.html

@@ -1,16 +1,19 @@
-<div class="modal fade" id="modal-delete-id-{{ service["SERVER_NAME"].replace(".", "-") }}" tabindex="-1" aria-labelledby="modal-delete-label-{{ service["SERVER_NAME"].replace(".", "-") }}" aria-hidden="true">
+<div class="modal fade" id="modal-delete-id-{{ id_server_name }}" tabindex="-1" aria-labelledby="modal-delete-label-{{ id_server_name }}" aria-hidden="true">
 	<div class="modal-dialog">
 		<div class="modal-content">
 			<div class="modal-header">
-				<h5 class="modal-title" id="modal-delete-label-{{ service["SERVER_NAME"].replace(".", "-") }}">Delete {{ service["SERVER_NAME"] }} configuration</h5>
+				<h5 class="modal-title" id="modal-delete-label-{{ id_server_name }}">Delete {{ service["SERVER_NAME"] }} configuration</h5>
 				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 			</div>
 			<div class="modal-body">
 				Are you sure you want to delete the configuration of {{ service["SERVER_NAME"] }} ?
+				<form id="form-delete-{{ id_server_name }}">
+					<input type="hidden" value="{{ service["SERVER_NAME"] }}" name="SERVER_NAME">
+				</form>
 			</div>
 			<div class="modal-footer">
 				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-				<button type="button" class="btn btn-danger">Delete</button>
+				<button type="button" class="btn btn-danger" onClick="postDelete('{{ id_server_name }}');">Delete</button>
 			</div>
 		</div>
 	</div>

ui/templates/services-edit.html

@@ -1,5 +1,3 @@
-{% set id_server_name = service["SERVER_NAME"].replace(".", "-") %}
-
 <div class="modal fade" id="modal-edit-id-{{ id_server_name }}" tabindex="-1" aria-labelledby="modal-edit-label-{{ id_server_name }}" aria-hidden="true">
 	<div class="modal-dialog modal-lg">
 		<div class="modal-content">
@@ -8,7 +6,7 @@
 				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 			</div>
 			<div class="modal-body">
-				<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
+				<ul class="nav nav-pills mb-3" id="pills-tab-edit" role="tablist">
 {% set check = {"active": "active", "selected": "true"} %}
 {% for k, v in config["CONFIG"].items() %}
 					<li class="nav-item" role="presentation">
@@ -18,22 +16,25 @@
 	{% endif %}
 {% endfor %}
 				</ul>
-				<div class="tab-content" id="edit-content-{{ id_server_name }}">
+				<form id="form-edit-{{ id_server_name }}">
+					<input type="hidden" value="{{ service["SERVER_NAME"] }}" name="OLD_SERVER_NAME">
+					<div class="tab-content" id="edit-content-{{ id_server_name }}">
 {% set check = {"class": "show active"} %}
 {% for k, v in config["CONFIG"].items() %}
-					<div class="tab-pane fade {{ check.class }}" id="edit-{{ v["id"] }}-{{ id_server_name }}" role="tabpanel" aria-labelledby="edit-{{ v["id"] }}-{{ id_server_name }}-tab">
+						<div class="tab-pane fade {{ check.class }}" id="edit-{{ v["id"] }}-{{ id_server_name }}" role="tabpanel" aria-labelledby="edit-{{ v["id"] }}-{{ id_server_name }}-tab">
 	{% for param in v["params"] %}
-						{{ form_service_gen("edit", id_server_name, param["id"], param["label"], param["type"], service[param["env"]])|safe }}
+							{{ form_service_gen("edit", id_server_name, param["id"], param["label"], param["type"], service[param["env"]], param["env"])|safe }}
 	{% endfor %}
-					</div>
+						</div>
 	{% if check.update({"class": ""}) %}
 	{% endif %}
 {% endfor %}
-				</div>
+					</div>
+				</form>
 			</div>
 			<div class="modal-footer">
 				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-				<button type="button" class="btn btn-primary">Save</button>
+				<button type="button" class="btn btn-primary" onClick="postEdit('{{ id_server_name }}');">Save</button>
 			</div>
 		</div>
 	</div>

ui/templates/services-new.html

@@ -0,0 +1,40 @@
+<div class="modal fade" id="modal-new" tabindex="-1" aria-labelledby="modal-new-label" aria-hidden="true">
+	<div class="modal-dialog modal-lg">
+		<div class="modal-content">
+			<div class="modal-header">
+				<h5 class="modal-title" id="modal-new-label">New configuration</h5>
+				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+			</div>
+			<div class="modal-body">
+				<ul class="nav nav-pills mb-3" id="pills-tab-new" role="tablist">
+{% set check = {"active": "active", "selected": "true"} %}
+{% for k, v in config["CONFIG"].items() %}
+					<li class="nav-item" role="presentation">
+						<a class="nav-link {{ check.active }}" id="new-{{ v["id"] }}-tab" data-bs-toggle="pill" href="#new-{{ v["id"] }}" role="tab" aria-controls="new-{{ v["id"] }}" aria-selected="{{ check.selected }}">{{ k }}</a>
+					</li>
+	{% if check.update({"active": "", "selected": "false"}) %}
+	{% endif %}
+{% endfor %}
+				</ul>
+				<form id="form-new">
+					<div class="tab-content" id="new-content">
+{% set check = {"class": "show active"} %}
+{% for k, v in config["CONFIG"].items() %}
+						<div class="tab-pane fade {{ check.class }}" id="new-{{ v["id"] }}" role="tabpanel" aria-labelledby="new-{{ v["id"] }}-tab">
+	{% for param in v["params"] %}
+							{{ form_service_gen("new", "", param["id"], param["label"], param["type"], "default", param["env"])|safe }}
+	{% endfor %}
+						</div>
+	{% if check.update({"class": ""}) %}
+	{% endif %}
+{% endfor %}
+					</div>
+				</form>
+			</div>
+			<div class="modal-footer">
+				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+				<button type="button" class="btn btn-primary" onClick="postNew();">Save</button>
+			</div>
+		</div>
+	</div>
+</div>

ui/templates/services.html

@@ -2,16 +2,34 @@
 
 {% block content %}
 
+{% if operation != "" %}
+<div class="row justify-content-center">
+	<div class="col col-4 mb-3 text-center">
+		<div class="alert alert-primary alert-dismissible fade show" role="alert">
+			{{ operation }}
+			<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+		</div>
+	</div>
+</div>
+{% endif %}
+
+
 <div class="row justify-content-center">
 
+	<div class="col col-12 mb-3 text-center">
+		<button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modal-new"><i class="fas fa-plus"></i> New</button>
+	</div>
+
 	{% for service in services %}
 
+		{% set id_server_name = service["SERVER_NAME"].replace(".", "-") %}
+
 	<div class="col col-12 col-lg-4">
 		<div class="card border-primary mb-3" style="max-width: 80rem;">
 			<div class="card-header border-primary bg-primary text-white">
 				{{ service["SERVER_NAME"] }}
-				<button class="btn btn-sm ms-2 float-end btn-light" data-bs-toggle="modal" data-bs-target="#modal-delete-id-{{ service["SERVER_NAME"].replace(".", "-") }}"><i class="fas fa-trash-alt"></i></button>
-				<button class="btn btn-sm mx-2 float-end btn-light" data-bs-toggle="modal" data-bs-target="#modal-edit-id-{{ service["SERVER_NAME"].replace(".", "-") }}"><i class="fas fa-edit"></i></button>
+				<button class="btn btn-sm ms-2 float-end btn-light" data-bs-toggle="modal" data-bs-target="#modal-delete-id-{{ id_server_name }}"><i class="fas fa-trash-alt"></i></button>
+				<button class="btn btn-sm mx-2 float-end btn-light" data-bs-toggle="modal" data-bs-target="#modal-edit-id-{{ id_server_name }}"><i class="fas fa-edit"></i></button>
 				<a class="btn btn-sm mx-2 float-end btn-light" href="http://{{ service["SERVER_NAME"] }}" target="_blank"><i class="fas fa-eye"></i></a>
 			</div>
 			<div class="card-body text-dark">
@@ -40,8 +58,8 @@
 		</div>
 	</div>
 
+		{% include "services-new.html" %}
 		{% include "services-edit.html" %}
-
 		{% include "services-delete.html" %}
 
 	{% endfor %}