From 8550d09e45eb5793453451a17fb211ce2371875e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wiesner=20Andr=C3=A1s?= Date: Thu, 7 Mar 2024 12:48:16 +0100 Subject: [PATCH] - quizmaster area UI enhancements --- game_manager_frame.php | 79 ++++++++++++++++++++++++++++----------- group_manager_frame.php | 37 +++++++++++++----- js/quizmaster_common.js | 17 +++++++++ js/spreadquiz.js | 20 +--------- js/usermgr.js | 75 +++++++++++++------------------------ style/quizmaster_area.css | 20 +++++++++- user_manager_frame.php | 52 ++++++++++++++++++-------- 7 files changed, 184 insertions(+), 116 deletions(-) create mode 100644 js/quizmaster_common.js diff --git a/game_manager_frame.php b/game_manager_frame.php index b6f1f2c..3381425 100644 --- a/game_manager_frame.php +++ b/game_manager_frame.php @@ -10,14 +10,15 @@ if (!get_autologin_state() || (($user_data["privilege"] !== PRIVILEGE_CREATOR) & ?> - + SpreadQuiz + + - @@ -46,28 +47,64 @@ if (!get_autologin_state() || (($user_data["privilege"] !== PRIVILEGE_CREATOR) &
- Név:
- Leírás:
- Tulajdonos:
+ + + + + + + + + + + + + +
- Szerkesztők:
- Kérdés-fájl: - - -
- Csoportok:
- - - - -
- - - - + + + + + + + + + + + + + + + + + + + + + +
+ + + + +
+ + +
+ + + +
- +
+ + +
diff --git a/group_manager_frame.php b/group_manager_frame.php index abab68d..d71650d 100644 --- a/group_manager_frame.php +++ b/group_manager_frame.php @@ -10,13 +10,14 @@ if (!get_autologin_state() || ($user_data["privilege"] !== PRIVILEGE_QUIZMASTER) ?> - + SpreadQuiz + - + @@ -42,14 +43,32 @@ if (!get_autologin_state() || ($user_data["privilege"] !== PRIVILEGE_QUIZMASTER)
-
- Név:
- Leírás:
- Tulajdonos:
- Szerkesztők:
- Tagok: + + + + + + + + + + + + + + + + + + + + + +
+
+ +
-
diff --git a/js/quizmaster_common.js b/js/quizmaster_common.js new file mode 100644 index 0000000..c844b41 --- /dev/null +++ b/js/quizmaster_common.js @@ -0,0 +1,17 @@ +function create_table_cell(content, styleClass = "") { + if (content.trim() === "") { + content = "(üres)"; + } + let td = document.createElement("td"); + td.innerHTML = content; + if (styleClass !== "") { + td.classList.add(styleClass); + } + return td; +} + +function highlight_row(nickname) { + let hl_on = document.getElementById("user_chk_" + nickname).checked; + let row = document.getElementById("row_" + nickname); + row.setAttribute("highlight", hl_on ? "true" : "false"); +} \ No newline at end of file diff --git a/js/spreadquiz.js b/js/spreadquiz.js index 7589a58..f0d9c18 100644 --- a/js/spreadquiz.js +++ b/js/spreadquiz.js @@ -31,22 +31,4 @@ function load_userdata() { load_userdata(); -function create_table_cell(content, styleClass = "") { - if (content.trim() === "") { - content = "(üres)"; - } - let td = document.createElement("td"); - td.innerHTML = content; - if (styleClass !== "") { - td.classList.add(styleClass); - } - return td; -} - -// --------------- - -function highlight_row(nickname) { - let hl_on = document.getElementById("user_chk_" + nickname).checked; - let row = document.getElementById("row_" + nickname); - row.setAttribute("highlight", hl_on ? "true" : "false"); -} \ No newline at end of file +// --------------- \ No newline at end of file diff --git a/js/usermgr.js b/js/usermgr.js index bab68da..6988268 100644 --- a/js/usermgr.js +++ b/js/usermgr.js @@ -23,7 +23,7 @@ function list_all_users() { let edit_user_action = () => { if (get_selected_users().length === 0) { - edit_user(u); + create_edit_user(u); } }; @@ -35,7 +35,9 @@ function list_all_users() { }); } -function create_new_user() { +function create_edit_user(user = null) { + let updating = user !== null; + const generateRandomString = () => { return Math.floor(Math.random() * Date.now()).toString(36); }; @@ -47,59 +49,32 @@ function create_new_user() { let privilegeF = document.getElementById("privilege"); let submit_btn = document.getElementById("user_editor_submit_btn"); - nicknameF.value = ""; - nicknameF.readOnly = false; - realnameF.value = ""; - passwordF.type = "text"; - passwordF.value = generateRandomString(); - passwordF.readOnly = true; - groupsF.value = ""; - submit_btn.value = "Létrehozás" + if (updating) { + nicknameF.value = user["nickname"]; + nicknameF.readOnly = true; + realnameF.value = user["realname"]; + passwordF.type = "password"; + passwordF.value = ""; + passwordF.readOnly = false; + groupsF.value = user["groups"].join(", "); + privilegeF.value = user["privilege"]; + submit_btn.value = "Mentés" + } else { + nicknameF.value = ""; + nicknameF.readOnly = false; + realnameF.value = ""; + passwordF.type = "text"; + passwordF.value = generateRandomString(); + passwordF.readOnly = true; + groupsF.value = ""; + submit_btn.value = "Létrehozás" + } submit_btn.onclick = () => { let nickname = nicknameF.value.trim(); if (nickname !== "") { let req = { - action: "create_user", - nickname: nickname, - realname: realnameF.value.trim(), - password: passwordF.value, - groups: groupsF.value.trim(), - privilege: privilegeF.value - }; - request(req).then(resp => { - list_all_users(); - }); - hide("user_editor_window"); - } - }; - - show("user_editor_window"); -} - -function edit_user(user) { - let nicknameF = document.getElementById("nickname"); - let realnameF = document.getElementById("realname"); - let passwordF = document.getElementById("password"); - let groupsF = document.getElementById("groups"); - let privilegeF = document.getElementById("privilege"); - let submit_btn = document.getElementById("user_editor_submit_btn"); - - nicknameF.value = user["nickname"]; - nicknameF.readOnly = true; - realnameF.value = user["realname"]; - passwordF.type = "password"; - passwordF.value = ""; - passwordF.readOnly = false; - groupsF.value = user["groups"].join(", "); - privilegeF.value = user["privilege"]; - submit_btn.value = "Mentés" - - submit_btn.onclick = () => { - let nickname = nicknameF.value.trim(); - if (nickname !== "") { - let req = { - action: "update_user", + action: updating ? "update_user" : "create_user", nickname: nickname, realname: realnameF.value.trim(), password: passwordF.value, diff --git a/style/quizmaster_area.css b/style/quizmaster_area.css index 025e7dd..c262dd1 100644 --- a/style/quizmaster_area.css +++ b/style/quizmaster_area.css @@ -13,7 +13,12 @@ table.management thead th { padding: 0.5em 0; position: sticky; top: 0; - background-color: darkgray; + background-color: #176767; + color: whitesmoke; +} + +table.management tbody tr { + cursor: pointer; } table.management tbody td { @@ -42,4 +47,17 @@ td.checkbox { display: block; width: 15em; height: 8em; +} + +section.window-inner input[type="text"] input[type="password"] input[type="time"] { + width: 20em; +} + +section.window-inner td { + text-align: left; +} + +section.window-inner tr td:first-of-type { + min-width: 10em; + text-align: right !important; } \ No newline at end of file diff --git a/user_manager_frame.php b/user_manager_frame.php index f37ed5f..eb3042b 100644 --- a/user_manager_frame.php +++ b/user_manager_frame.php @@ -10,13 +10,15 @@ if (!get_autologin_state() || ($user_data["privilege"] !== PRIVILEGE_QUIZMASTER) ?> - + SpreadQuiz + - + + @@ -72,26 +74,44 @@ if (!get_autologin_state() || ($user_data["privilege"] !== PRIVILEGE_QUIZMASTER)
- +
-
- Felhasználónév:
- Teljes név:
- Jelszó:
- Csoportok:
- Jogosultság: - - + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ +
-