espe/frontend-zackeneule
0
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

[int]

Browse source
This commit is contained in:
roydfalk 2024-04-29 00:15:48 +02:00
parent 1f549037b6
commit 15fa634056
6 changed files with 295 additions and 144 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
source/logic/backend.ts
View file

@ -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( export async function member_add(

333
source/pages/register/logic.ts
View file

@ -1,5 +1,3 @@
var foobar;
lib_plankton.zoo_page.register( lib_plankton.zoo_page.register(
"register", "register",
async (parameters, target_element) => { async (parameters, target_element) => {
@ -16,128 +14,213 @@ lib_plankton.zoo_page.register(
update_nav({"mode": null}); update_nav({"mode": null});
const form = new lib_plankton.zoo_form.class_form<any, any>( const member_data : {
x => x, name_real : string;
x => x, name_login : string;
new lib_plankton.zoo_input.class_input_group( 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<any, any>(
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-<mitglieds-nummer>@dielinke-sachsen.de\", z.B. \"mitglied-11223344@dielinke-sachsen.de\".\n\nDie namensbasierte Partei-E-Mail-Adresse hat folgenden schematischen Aufbau: \"<name-in-kleinbuchstaben-mit-punkten-getrennt>@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", "label": "Senden",
"input": new lib_plankton.zoo_input.class_input_hidden(), "procedure": async (get_value, get_representation) => {
}, set_message("wird verarbeitet …");
{ set_state("wait");
"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-<mitglieds-nummer>@dielinke-sachsen.de\", z.B. \"mitglied-11223344@dielinke-sachsen.de\".\n\nDie namensbasierte Partei-E-Mail-Adresse hat folgenden schematischen Aufbau: \"<name-in-kleinbuchstaben-mit-punkten-getrennt>@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(); const value : any = await get_value();
if (value.password !== value.password_confirmation) { if (value.password !== value.password_confirmation) {
set_message("Die Passwörter stimmen nicht überein."); 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"); 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")); target_element.appendChild(template_request("register"));
await form.setup(target_element.querySelector(".register-form") as HTMLElement); await form.setup(target_element.querySelector(".register-form") as HTMLElement);
await form.input_write( await form.input_write(
{ {
"id": id, "id": id,
"verification": verification, "verification": verification,
"name_login": "", "name_login": member_data.name_login,
"name_display": "", "name_display": member_data.name_real,
"salutation": "", "salutation": "",
"email_mode": "number_and_name", "email_mode": "number_and_name",
"email_redirect": true, "email_redirect": true,
"password": "", "password": "",
"password_confirmation": "", "password_confirmation": "",
} }
); );
set_state("fill"); 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"); 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( 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( "input": new lib_plankton.zoo_input.class_input_checkbox(
{ {
"hooks_change": [ "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); await input_service_use.setup(target_element as HTMLElement);
target_element.appendChild(dom_service_data_container); target_element.appendChild(dom_service_data_container);
await input_service_data.setup(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); await input_service_use.write({"use": true});
update_service_data();
/*
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);
*/
} }
}, },
); );

1
source/pages/register/structure.html
View file

@ -11,6 +11,7 @@
<input name="use_services" type="checkbox"/> <input name="use_services" type="checkbox"/>
</div> </div>
<fieldset class="register-services_data"> <fieldset class="register-services_data">
<legend>Netzdienste</legend>
<div class="register-field-display_name"> <div class="register-field-display_name">
<label>Anzeigename</label> <label>Anzeigename</label>
<input name="display_name" type="text"/> <input name="display_name" type="text"/>

37
source/pages/register/style.css
View file

@ -10,7 +10,42 @@
.register[rel="done"] .register-message {} .register[rel="done"] .register-message {}
.register[rel="done"] .register-form {display: none;} .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) .register-services_data:not(.show)
{ {
display: none; max-height: 0;
transition: max-height 0.25s ease;
} }
/*
*/

24
source/pages/view/logic.ts
View file

@ -95,17 +95,19 @@ lib_plankton.zoo_page.register(
); );
let dom_fragment : DocumentFragment = template_request("view"); let dom_fragment : DocumentFragment = template_request("view");
Promise.all( (
[ Promise.all(
form.setup(dom_fragment.querySelector(".view-form") as HTMLElement), [
_espe.backend.member_get(id), form.setup(dom_fragment.querySelector(".view-form") as HTMLElement),
] _espe.backend.member_get(id),
) ]
.then( )
([_, member]) => { .then(
form.input_write(member); ([_, member]) => {
} form.input_write(member);
) }
)
);
target_element.appendChild(dom_fragment); target_element.appendChild(dom_fragment);
}, },

16
source/pages/view/style.css
View file

@ -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;
}