From f9b9b9546f516b051c37074711c0d5e298d44dcc Mon Sep 17 00:00:00 2001 From: bunkerity Date: Sun, 27 Dec 2020 14:42:52 +0100 Subject: [PATCH] UI - introduced multiple config parameters (like reverse proxy) in frontend --- ui/config.json | 54 ++++++++++++++++++------------- ui/entrypoint.py | 4 +++ ui/static/js/custom.js | 43 +++++++++++++++++++++++- ui/templates/base.html | 2 ++ ui/templates/end.html | 3 ++ ui/templates/services-delete.html | 2 +- ui/templates/services-edit.html | 12 +++++-- ui/templates/services-new.html | 10 ++++-- ui/utils.py | 40 +++++++++++++++++------ 9 files changed, 132 insertions(+), 38 deletions(-) diff --git a/ui/config.json b/ui/config.json index b629eac..2f8fbc3 100644 --- a/ui/config.json +++ b/ui/config.json @@ -106,28 +106,38 @@ "default":"no" }, { - "type":"text", - "label":"Reverse proxy url", - "env":"REVERSE_PROXY_URL", - "regex":".*", - "id":"reverse-proxy-url", - "default":"" - }, - { - "type":"text", - "label":"Reverse proxy host", - "env":"REVERSE_PROXY_HOST", - "regex":".*", - "id":"reverse-proxy-host", - "default":"" - }, - { - "type":"checkbox", - "label":"Reverse proxy ws", - "env":"REVERSE_PROXY_WS", - "regex":"^(yes|no)$", - "id":"reverse-proxy-ws", - "default":"" + "type":"multiple", + "label":"Reverse proxy", + "id":"reverse-proxy-params", + "params":[ + { + "type":"text", + "label":"Reverse proxy url", + "env":"REVERSE_PROXY_URL", + "regex":".*", + "id":"reverse-proxy-url", + "multiple":"Reverse proxy", + "default":"" + }, + { + "type":"text", + "label":"Reverse proxy host", + "env":"REVERSE_PROXY_HOST", + "regex":".*", + "id":"reverse-proxy-host", + "multiple":"Reverse proxy", + "default":"" + }, + { + "type":"checkbox", + "label":"Reverse proxy ws", + "env":"REVERSE_PROXY_WS", + "regex":"^(yes|no)$", + "id":"reverse-proxy-ws", + "multiple":"Reverse proxy", + "default":"" + } + ] }, { "type":"checkbox", diff --git a/ui/entrypoint.py b/ui/entrypoint.py index 4c20f64..b1c132e 100644 --- a/ui/entrypoint.py +++ b/ui/entrypoint.py @@ -14,6 +14,8 @@ with open("/opt/entrypoint/config.json", "r") as f : app.config["CONFIG"] = json.loads(f.read()) app.jinja_env.globals.update(env_to_summary_class=utils.env_to_summary_class) app.jinja_env.globals.update(form_service_gen=utils.form_service_gen) +app.jinja_env.globals.update(form_service_gen_multiple=utils.form_service_gen_multiple) +app.jinja_env.globals.update(form_service_gen_multiple_values=utils.form_service_gen_multiple_values) @app.route('/') @app.route('/home') @@ -59,6 +61,8 @@ def services(): operation = "" if request.method == "POST" : + print(request.form, flush=True) + # Check operation if not "operation" in request.form or not request.form["operation"] in ["new", "edit", "delete"] : return render_template("error.html", title="Error", error="Missing operation parameter on /services.") diff --git a/ui/static/js/custom.js b/ui/static/js/custom.js index ce7abbe..a50b21c 100644 --- a/ui/static/js/custom.js +++ b/ui/static/js/custom.js @@ -29,7 +29,7 @@ function getData(id) { for (var i = 0; i < elements.length; i++) { element = elements[i]; if (element["type"] === "checkbox") { - if (element["value"] === "on") { + if (element["checked"]) { data[element["name"]] = "yes"; } else { @@ -78,3 +78,44 @@ function deleteInstance(id) { post("delete", "instances", getData('form-instance-' + id)); return false; } + +var multiples = {}; +function addMultiple(id, paramsEnc) { + var params = JSON.parse(paramsEnc); + var div = document.getElementById(id); + if (!multiples.hasOwnProperty(id)) { + multiples[id] = 0; + } + multiples[id]++; + for (var i = 0; i < params.length; i++) { + var input = ""; + var input_id = id + "-" + params[i]["id"] + "-" + multiples[id].toString(); + var input_name = params[i]["env"] + "_" + multiples[id].toString(); + var input_label = params[i]["label"] + " #" + multiples[id].toString(); + var input_value = params[i]["default"]; + var pt = ""; + if (params[i]["type"] == "text") { + input = ``; + } + else if (params[i]["type"] == "checkbox") { + if (input_value == "yes") { + input_value = "checked"; + } + input = `
`; + pt = "pt-0"; + } + div.insertAdjacentHTML('beforeend', `
${input}
`); + } +} + +function delMultiple(id, paramsEnc) { + if (multiples.hasOwnProperty(id) && multiples[id] > 0) { + var params = JSON.parse(paramsEnc); + for (var i = 0; i < params.length; i++) { + var input_id = id + "-" + params[i]["id"] + "-" + multiples[id].toString(); + document.getElementById("label-" + input_id).remove(); + document.getElementById("input-" + input_id).remove(); + } + multiples[id]--; + } +} diff --git a/ui/templates/base.html b/ui/templates/base.html index 69819e7..bf52d61 100644 --- a/ui/templates/base.html +++ b/ui/templates/base.html @@ -1,3 +1,5 @@ +{% set template_data = {"javascript": ""} %} + diff --git a/ui/templates/end.html b/ui/templates/end.html index 65f99c1..4861d88 100644 --- a/ui/templates/end.html +++ b/ui/templates/end.html @@ -1,2 +1,5 @@ + diff --git a/ui/templates/services-delete.html b/ui/templates/services-delete.html index dd89165..35f01b1 100644 --- a/ui/templates/services-delete.html +++ b/ui/templates/services-delete.html @@ -13,7 +13,7 @@
- +
diff --git a/ui/templates/services-edit.html b/ui/templates/services-edit.html index 22e7d63..c4d790b 100644 --- a/ui/templates/services-edit.html +++ b/ui/templates/services-edit.html @@ -23,7 +23,15 @@ {% for k, v in config["CONFIG"].items() %}
{% for param in v["params"] %} - {{ form_service_gen("edit", id_server_name, param["id"], param["label"], param["type"], service[param["env"]], param["env"])|safe }} +
+ {% if param["type"] != "multiple" %} + {{ form_service_gen("form-edit-" + id_server_name + "-" + param["id"], param["label"], param["type"], service[param["env"]], param["env"])|safe }} + {% else %} + {{ form_service_gen_multiple("form-edit-" + id_server_name + "-" + param["id"], param["label"], param["params"])|safe }} + {% if template_data.update({"javascript": template_data.javascript + form_service_gen_multiple_values("form-edit-" + id_server_name + "-" + param["id"], param["params"], service)}) %} + {% endif %} + {% endif %} +
{% endfor %}
{% if check.update({"class": ""}) %} @@ -34,7 +42,7 @@
- +
diff --git a/ui/templates/services-new.html b/ui/templates/services-new.html index defd05c..4730964 100644 --- a/ui/templates/services-new.html +++ b/ui/templates/services-new.html @@ -22,7 +22,13 @@ {% for k, v in config["CONFIG"].items() %}
{% for param in v["params"] %} - {{ form_service_gen("new", "", param["id"], param["label"], param["type"], param["default"], param["env"])|safe }} +
+ {% if param["type"] != "multiple" %} + {{ form_service_gen("form-new-" + param["id"], param["label"], param["type"], param["default"], param["env"])|safe }} + {% else %} + {{ form_service_gen_multiple("form-new-" + param["id"], param["label"], param["params"])|safe }} + {% endif %} +
{% endfor %}
{% if check.update({"class": ""}) %} @@ -33,7 +39,7 @@
- +
diff --git a/ui/utils.py b/ui/utils.py index f746372..d20761e 100644 --- a/ui/utils.py +++ b/ui/utils.py @@ -1,6 +1,6 @@ #!/usr/bin/python3 -import datetime, re +import datetime, re, json def log(event) : print("[" + str(datetime.datetime.now().replace(microsecond=0)) + "] " + event, flush=True) @@ -24,18 +24,38 @@ def env_to_summary_class(var, value) : return "check text-success" return "times text-danger" -def form_service_gen(form, server, id, label, type, value, name) : - if form == "edit" : - new_id = "form-edit-" + server + "-" + id - elif form == "new" : - new_id = "form-new-" + id +def form_service_gen(id, label, type, value, name) : + pt = "" if type == "text" : - input = '' % (type, new_id, value, name) - pt = "" + input = '' % (type, id, value, name) elif type == "checkbox" : checked = "" if value == "yes" : checked = "checked" - input = '
' % (type, new_id, name, checked) + input = '
' % (type, id, name, checked) pt = "pt-0" - return '
%s
' % (new_id, pt, label, input) + return '
%s
' % (id, pt, label, input) + +def form_service_gen_multiple(id, label, params) : + buttons = ' ' % (id, json.dumps(params).replace("\"", """), id, json.dumps(params).replace("\"", """)) + return '
%s
' % (id + "-btn", label, id + "-btn", buttons) + +def form_service_gen_multiple_values(id, params, service) : + values = [] + for env in service : + if env.startswith(params[0]["env"]) : + suffix = env.replace(params[0]["env"], "") + for param in params : + value = {} + value["id"] = param["id"] + value["env"] = param["env"] + value["label"] = param["label"] + value["type"] = param["type"] + if param["env"] + suffix in service : + value["default"] = service[param["env"] + suffix] + else : + value["default"] = param["default"] + values.append(value) + if len(values) > 0 : + return "addMultiple('%s', '%s'); " % (id, json.dumps(values)) + return ""