From 15fa63405671fbc1ab2ef7fd46d65de2f3f8fb60 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christian=20Fra=C3=9F?= Date: Mon, 29 Apr 2024 00:15:48 +0200 Subject: [PATCH] [int] --- source/logic/backend.ts | 20 ++ source/pages/register/logic.ts | 341 ++++++++++++++++----------- source/pages/register/structure.html | 1 + source/pages/register/style.css | 37 ++- source/pages/view/logic.ts | 24 +- source/pages/view/style.css | 16 ++ 6 files changed, 295 insertions(+), 144 deletions(-) diff --git a/source/logic/backend.ts b/source/logic/backend.ts index c03d998..e6741a2 100644 --- a/source/logic/backend.ts +++ b/source/logic/backend.ts @@ -235,6 +235,26 @@ namespace _espe.backend } + /** + */ + export async function member_get2( + id : int + ) : Promise< + { + name_real : string; + name_login : string; + email_address_numerical_value : string; + email_address_namely_value : string; + } + > + { + return abstract_call( + "GET", + "/member/get/" + id.toFixed(0) + ); + } + + /** */ export async function member_add( diff --git a/source/pages/register/logic.ts b/source/pages/register/logic.ts index 51f1ad7..e8c730f 100644 --- a/source/pages/register/logic.ts +++ b/source/pages/register/logic.ts @@ -1,5 +1,3 @@ -var foobar; - lib_plankton.zoo_page.register( "register", async (parameters, target_element) => { @@ -16,128 +14,213 @@ lib_plankton.zoo_page.register( update_nav({"mode": null}); - const form = new lib_plankton.zoo_form.class_form( - x => x, - x => x, - new lib_plankton.zoo_input.class_input_group( + const member_data : { + name_real : string; + name_login : string; + email_address_numerical_value : string; + email_address_namely_value : string; + } = await _espe.backend.member_get2(id); + + if (false) + { + const form = new lib_plankton.zoo_form.class_form( + x => x, + x => x, + new lib_plankton.zoo_input.class_input_group( + [ + { + "name": "id", + "input": new lib_plankton.zoo_input.class_input_hidden(), + }, + { + "name": "verification", + "input": new lib_plankton.zoo_input.class_input_hidden(), + }, + { + "name": "email_mode", + "input": new lib_plankton.zoo_input.class_input_enumeration( + [ + {"value": "none", "label": "keine"}, + {"value": "number", "label": "nur numerische" + " " + ("(" + member_data.email_address_numerical_value + ")")}, + {"value": "number_and_name", "label": "numerische und namentliche" + " " + ("(" + member_data.email_address_namely_value + ")")}, + ] + ), + "label": "Partei-E-Mail-Adresse einrichten", + "help": "Die nummernbasierte Partei-E-Mail-Adresse hat folgenden schematischen Aufbau: \"mitglied-@dielinke-sachsen.de\", z.B. \"mitglied-11223344@dielinke-sachsen.de\".\n\nDie namensbasierte Partei-E-Mail-Adresse hat folgenden schematischen Aufbau: \"@dielinke-sachsen.de\". Beispiel: \"Karl Liebknecht\" würde die Adresse \"karl.liebknecht@dielinke-sachsen.de\" bekommen.\n\nDie Partei-E-Mail-Adressen können zum Empfangen von E-Mails verwendet werden. Falls es nötig werden sollte, dass du auch E-Mails mit über die Partei-Adresse verschicken kannst, wende dich bitte an den/die Mitgliederbeauftragte:n!" + }, + { + "name": "email_redirect", + "input": new lib_plankton.zoo_input.class_input_checkbox(), + "label": "eingehende E-Mails zu privater Adresse umleiten", + "help": "Um die bei der Partei-Adresse eingegangenen E-Mails zu lesen, gibt es zwei Wege: Entweder du hinterlegst das zugehörige Konto im E-Mail-Client-Programm deiner Wahl und kümmerst dich selbst darum die E-Mails regelmäßig abzurufen oder die E-Mails werden an deine private Adresse weitergeleitet, sodass sie bei deinen gewöhnlichen E-Mails mit auftauchen.\n\nWenn du dir unsicher bist, empfehlen wir dir die Umleitung anzuschalten.", + }, + { + "name": "name_display", + "input": new lib_plankton.zoo_input.class_input_text({"read_only": true}), + "label": "Anzeigename", + "help": "So wirst du bei Online-Diensten anderen angezeigt.", + }, + { + "name": "salutation", + "input": new lib_plankton.zoo_input.class_input_text(), + "label": "Anrede/Pronomen (z.B. 'er/ihn')", + }, + { + "name": "name_login", + "input": new lib_plankton.zoo_input.class_input_text( + { + "pattern": "^[0-9a-zA-Z_]+$", + "read_only": true, + } + ), + "label": "Anmeldename", + "help": "Dieser Wert ist der Nutzername für die Anmeldung bei den Online-Diensten. Hierfür solltest du etwas kurzes und prägnantes wählen. Diesen Namen bekommt für gewöhnlich niemand zu sehen. Bitte beachte, dass der Name noch verfügbar sein muss!", + }, + { + "name": "password", + "input": new lib_plankton.zoo_input.class_input_password(), + "label": "Passwort", + "help": "Das Passwort für die Anmeldung bei den Online-Diensten", + }, + { + "name": "password_confirmation", + "input": new lib_plankton.zoo_input.class_input_password(), + "label": "Passwort wiederholen", + }, + ] + ), [ { - "name": "id", - "input": new lib_plankton.zoo_input.class_input_hidden(), - }, - { - "name": "verification", - "input": new lib_plankton.zoo_input.class_input_hidden(), - }, - { - "name": "email_mode", - "input": new lib_plankton.zoo_input.class_input_enumeration( - [ - {"value": "none", "label": "keine"}, - {"value": "number", "label": "nur numerische"}, - {"value": "number_and_name", "label": "numerische und namensbasierte"}, - ] - ), - "label": "Partei-E-Mail-Adresse einrichten", - "help": "Die nummernbasierte Partei-E-Mail-Adresse hat folgenden schematischen Aufbau: \"mitglied-@dielinke-sachsen.de\", z.B. \"mitglied-11223344@dielinke-sachsen.de\".\n\nDie namensbasierte Partei-E-Mail-Adresse hat folgenden schematischen Aufbau: \"@dielinke-sachsen.de\". Beispiel: \"Karl Liebknecht\" würde die Adresse \"karl.liebknecht@dielinke-sachsen.de\" bekommen.\n\nDie Partei-E-Mail-Adressen können zum Empfangen von E-Mails verwendet werden. Falls es nötig werden sollte, dass du auch E-Mails mit über die Partei-Adresse verschicken kannst, wende dich bitte an den/die Mitgliederbeauftragte:n!" - }, - { - "name": "email_redirect", - "input": new lib_plankton.zoo_input.class_input_checkbox(), - "label": "eingehende E-Mails zu privater Adresse umleiten", - "help": "Um die bei der Partei-Adresse eingegangenen E-Mails zu lesen, gibt es zwei Wege: Entweder du hinterlegst das zugehörige Konto im E-Mail-Client-Programm deiner Wahl und kümmerst dich selbst darum die E-Mails regelmäßig abzurufen oder die E-Mails werden an deine private Adresse weitergeleitet, sodass sie bei deinen gewöhnlichen E-Mails mit auftauchen.\n\nWenn du dir unsicher bist, empfehlen wir dir die Umleitung anzuschalten.", - }, - { - "name": "name_display", - "input": new lib_plankton.zoo_input.class_input_text(), - "label": "Anzeigename", - "help": "So wirst du bei Online-Diensten anderen angezeigt.", - }, - { - "name": "salutation", - "input": new lib_plankton.zoo_input.class_input_text(), - "label": "Anrede/Pronomen (z.B. 'er/ihn')", - }, - { - "name": "name_login", - "input": new lib_plankton.zoo_input.class_input_text( - { - "pattern": "^[0-9a-zA-Z_]+$", - } - ), - "label": "Anmeldename", - "help": "Dieser Wert ist der Nutzername für die Anmeldung bei den Online-Diensten. Hierfür solltest du etwas kurzes und prägnantes wählen. Diesen Namen bekommt für gewöhnlich niemand zu sehen. Bitte beachte, dass der Name noch verfügbar sein muss!", - }, - { - "name": "password", - "input": new lib_plankton.zoo_input.class_input_password(), - "label": "Passwort", - "help": "Das Passwort für die Anmeldung bei den Online-Diensten", - }, - { - "name": "password_confirmation", - "input": new lib_plankton.zoo_input.class_input_password(), - "label": "Passwort wiederholen", - }, - ] - ), - [ - { - "label": "Senden", - "procedure": async (get_value, get_representation) => { - set_message("wird verarbeitet …"); - set_state("wait"); - - const value : any = await get_value(); - - if (value.password !== value.password_confirmation) { - set_message("Die Passwörter stimmen nicht überein."); - set_state("fill"); - } - else { - try { - await _espe.backend.member_register( - id, - verification, - value - ); - set_message("Danke!"); - set_state("done"); - } - catch (error) { - set_message("Da ist etwas schief gelaufen :/"); + "label": "Senden", + "procedure": async (get_value, get_representation) => { + set_message("wird verarbeitet …"); + set_state("wait"); + + const value : any = await get_value(); + + if (value.password !== value.password_confirmation) { + set_message("Die Passwörter stimmen nicht überein."); set_state("fill"); } - } + else { + try { + await _espe.backend.member_register( + id, + verification, + value + ); + set_message("Danke!"); + set_state("done"); + } + catch (error) { + set_message("Da ist etwas schief gelaufen :/"); + set_state("fill"); + } + } + }, }, - }, - ] - ); - - target_element.appendChild(template_request("register")); - - await form.setup(target_element.querySelector(".register-form") as HTMLElement); - await form.input_write( - { - "id": id, - "verification": verification, - "name_login": "", - "name_display": "", - "salutation": "", - "email_mode": "number_and_name", - "email_redirect": true, - "password": "", - "password_confirmation": "", - } - ); - set_state("fill"); - - // --- + ] + ); + + target_element.appendChild(template_request("register")); + + await form.setup(target_element.querySelector(".register-form") as HTMLElement); + await form.input_write( + { + "id": id, + "verification": verification, + "name_login": member_data.name_login, + "name_display": member_data.name_real, + "salutation": "", + "email_mode": "number_and_name", + "email_redirect": true, + "password": "", + "password_confirmation": "", + } + ); + set_state("fill"); + } { - let dom_service_data_container : HTMLElement = document.createElement("div"); + let dom_email_setting_container : HTMLElement = document.createElement("fieldset"); + dom_email_setting_container.classList.add("register-email_setting"); + { + let dom_legend : HTMLElement = document.createElement("legend"); + dom_legend.textContent = "E-Mail-Einstellungen"; + dom_email_setting_container.appendChild(dom_legend); + } + + async function update_email_setting() { + const value : boolean = (await input_email_use.read())["use"]; + dom_email_setting_container.classList.toggle("show", value); + } + + const input_email_use = new lib_plankton.zoo_input.class_input_group( + [ + { + "name": "use", + "input": new lib_plankton.zoo_input.class_input_checkbox( + { + "hooks_change": [ + (value) => {update_email_setting();} + ] + } + ), + "label": "Partei-E-Mail-Adresse einrichten", + } + ] + ); + const input_email_setting = new lib_plankton.zoo_input.class_input_group( + [ + { + "name": "numerical", + "input": new lib_plankton.zoo_input.class_input_checkbox( + ), + "label": ("numerisch" + " : " + ("" + member_data.email_address_numerical_value + "")), + }, + { + "name": "namely", + "input": new lib_plankton.zoo_input.class_input_checkbox( + ), + "label": ("namentlich" + " : " + ("" + member_data.email_address_namely_value + "")), + }, + ] + ); + await input_email_use.setup(target_element as HTMLElement); + target_element.appendChild(dom_email_setting_container); + await input_email_setting.setup(dom_email_setting_container); + await input_email_setting.write( + { + "numerical": true, + "namely": true, + } + ); + + await input_email_use.write({"use": true}); + update_email_setting(); + } + { + let dom_service_data_container : HTMLElement = document.createElement("fieldset"); + { + let dom_legend : HTMLElement = document.createElement("legend"); + dom_legend.textContent = "Angaben für Netzdienste"; + dom_service_data_container.appendChild(dom_legend); + } dom_service_data_container.classList.add("register-services_data"); + async function update_service_data() { + const value : boolean = (await input_service_use.read())["use"]; + dom_service_data_container.classList.toggle("show", value); + /* + if (value) { + dom_service_data_container.removeAttribute("disabled"); + } + else { + dom_service_data_container.setAttribute("disabled", "disabled"); + } + */ + } + const input_service_use = new lib_plankton.zoo_input.class_input_group( [ { @@ -145,7 +228,7 @@ lib_plankton.zoo_page.register( "input": new lib_plankton.zoo_input.class_input_checkbox( { "hooks_change": [ - (value) => {dom_service_data_container.classList.toggle("show", value);} + (value) => {update_service_data();} ] } ), @@ -192,23 +275,17 @@ lib_plankton.zoo_page.register( await input_service_use.setup(target_element as HTMLElement); target_element.appendChild(dom_service_data_container); await input_service_data.setup(dom_service_data_container); -foobar = input_service_use; + await input_service_data.write( + { + "name_display": member_data.name_real, + "name_login": member_data.name_login, + "password": "", + "password_confirmation": "", + } + ); - await input_service_use.write(true); - - /* - const element_use_services : HTMLInputElement = (target_element.querySelector(".register-field-use_services") as HTMLInputElement); - function update_service_data_visibility(show : (null | boolean) = null) : void - { -console.info({show}); - show = (show ?? element_use_services.checked); -console.info({show}); - target_element.querySelector(".register-services_data").classList.toggle("show", show); - } - element_use_services.addEventListener("change", (event) => {update_service_data_visibility(event.target["checked"]);}); - element_use_services.checked = true; - update_service_data_visibility(true); - */ + await input_service_use.write({"use": true}); + update_service_data(); } }, ); diff --git a/source/pages/register/structure.html b/source/pages/register/structure.html index 15b7aac..f080744 100644 --- a/source/pages/register/structure.html +++ b/source/pages/register/structure.html @@ -11,6 +11,7 @@
+ Netzdienste
diff --git a/source/pages/register/style.css b/source/pages/register/style.css index 7becee1..8c534d7 100644 --- a/source/pages/register/style.css +++ b/source/pages/register/style.css @@ -10,7 +10,42 @@ .register[rel="done"] .register-message {} .register[rel="done"] .register-form {display: none;} +.register-email_setting +{ + overflow: hidden; +} + +.register-email_setting.show +{ + max-height: 100vh; + + transition: max-height 1.0s ease; +} + +.register-email_setting:not(.show) +{ + max-height: 0; + + transition: max-height 0.25s ease; +} + +.register-services_data +{ + overflow: hidden; +} + +.register-services_data.show +{ + max-height: 100vh; + + transition: max-height 1.0s ease; +} + .register-services_data:not(.show) { - display: none; + max-height: 0; + + transition: max-height 0.25s ease; } +/* + */ diff --git a/source/pages/view/logic.ts b/source/pages/view/logic.ts index 2ac9f16..59389ea 100644 --- a/source/pages/view/logic.ts +++ b/source/pages/view/logic.ts @@ -95,17 +95,19 @@ lib_plankton.zoo_page.register( ); let dom_fragment : DocumentFragment = template_request("view"); - Promise.all( - [ - form.setup(dom_fragment.querySelector(".view-form") as HTMLElement), - _espe.backend.member_get(id), - ] - ) - .then( - ([_, member]) => { - form.input_write(member); - } - ) + ( + Promise.all( + [ + form.setup(dom_fragment.querySelector(".view-form") as HTMLElement), + _espe.backend.member_get(id), + ] + ) + .then( + ([_, member]) => { + form.input_write(member); + } + ) + ); target_element.appendChild(dom_fragment); }, diff --git a/source/pages/view/style.css b/source/pages/view/style.css index e69de29..888b8d3 100644 --- a/source/pages/view/style.css +++ b/source/pages/view/style.css @@ -0,0 +1,16 @@ +.view-form > .plankton_form +{ + display: flex; + flex-direction: row; + flex-wrap: wrap; +} + +.view-form > .plankton_form > .plankton_form_input +{ + flex: 1; +} + +.view-form > .plankton_form > .plankton_form_actions +{ + flex: 1; +}