- quizmaster area UI enhancements
This commit is contained in:
parent
20364feda8
commit
8550d09e45
@ -10,14 +10,15 @@ if (!get_autologin_state() || (($user_data["privilege"] !== PRIVILEGE_CREATOR) &
|
||||
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="hu">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>SpreadQuiz</title>
|
||||
<script src="js/o.js"></script>
|
||||
<script src="js/req.js"></script>
|
||||
<script src="js/quizmaster_common.js"></script>
|
||||
<script src="js/spreadquiz.js"></script>
|
||||
<script src="js/common.js"></script>
|
||||
<script src="js/o.js"></script>
|
||||
<script src="js/hintbox.js"></script>
|
||||
<script src="js/usermgr.js"></script>
|
||||
<script src="js/gamemgr.js"></script>
|
||||
@ -46,28 +47,64 @@ if (!get_autologin_state() || (($user_data["privilege"] !== PRIVILEGE_CREATOR) &
|
||||
<section class="window" shown="false" id="game_editor_window">
|
||||
<section class="window-inner">
|
||||
<section style="text-align: right">
|
||||
<span>Név: <input type="text" id="game_name"></span><br>
|
||||
<span>Leírás: <input type="text" id="game_description"></span><br>
|
||||
<span>Tulajdonos: <input type="text" id="game_owner" readonly></span><br>
|
||||
<table>
|
||||
<tr>
|
||||
<td><label for="game_name">Név:</label></td>
|
||||
<td><input type="text" id="game_name"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="game_description">Leírás:</label></td>
|
||||
<td><input type="text" id="game_description"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="game_owner">Tulajdonos:</label></td>
|
||||
<td><input type="text" id="game_owner" readonly></td>
|
||||
</tr>
|
||||
</table>
|
||||
<section id="additional_controls">
|
||||
<span>Szerkesztők: <input type="text" id="game_contributors"></span><br>
|
||||
<span>Kérdés-fájl: <input type="button" id="download_challenges_btn" value="Letöltés CSV-ként" shown="false" onclick="download_challenges()">
|
||||
<input type="button" value="Új feltöltése" id="show_game_file_upload" onclick="show_hide_gamefile_upload(true)">
|
||||
<input type="file" id="game_file" shown="false">
|
||||
<input type="button" value="Mégse" id="cancel_game_file_upload" shown="false" onclick="show_hide_gamefile_upload(false);"></span><br>
|
||||
<span>Csoportok: <input type="text" id="game_groups"></span><br>
|
||||
<span>
|
||||
<input type="checkbox" id="time_limited" oninput="handle_time_limit_chkbox()">
|
||||
<label for="time_limited">Időkorlátos:</label>
|
||||
<input type="time" id="time_limit" step="1">
|
||||
</span><br>
|
||||
<span>
|
||||
<input type="checkbox" id="repeatable">
|
||||
<label for="repeatable">Megismételhető</label>
|
||||
</span>
|
||||
<table>
|
||||
<tr>
|
||||
<td><label for="game_contributors">Szerkesztők:</label></td>
|
||||
<td><input type="text" id="game_contributors"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label>Kérdés-fájlok:</label></td>
|
||||
<td>
|
||||
<input type="button" id="download_challenges_btn" value="Letöltés CSV-ként" shown="false"
|
||||
onclick="download_challenges()">
|
||||
<input type="button" value="Új feltöltése" id="show_game_file_upload"
|
||||
onclick="show_hide_gamefile_upload(true)">
|
||||
<input type="file" id="game_file" shown="false">
|
||||
<input type="button" value="Mégse" id="cancel_game_file_upload" shown="false"
|
||||
onclick="show_hide_gamefile_upload(false);">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="game_groups">Csoportok:</label></td>
|
||||
<td><input type="text" id="game_groups"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="time_limited">Időkorlátos:</label></td>
|
||||
<td>
|
||||
<input type="checkbox" id="time_limited" oninput="handle_time_limit_chkbox()">
|
||||
<input type="time" id="time_limit" step="1">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label for="repeatable">Megismételhető:</label>
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox" id="repeatable">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</section>
|
||||
</section>
|
||||
<span><input type="button" value="" id="game_editor_submit_btn"><input type="button" value="Mégse" onclick="hide('game_editor_window')"></span>
|
||||
<section style="text-align: right; display: block">
|
||||
<input type="button" value="" id="game_editor_submit_btn">
|
||||
<input type="button" value="Mégse" onclick="hide('game_editor_window')">
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
|
||||
@ -10,13 +10,14 @@ if (!get_autologin_state() || ($user_data["privilege"] !== PRIVILEGE_QUIZMASTER)
|
||||
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="hu">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>SpreadQuiz</title>
|
||||
<script src="js/o.js"></script>
|
||||
<script src="js/req.js"></script>
|
||||
<script src="js/spreadquiz.js"></script>
|
||||
<script src="js/o.js"></script>
|
||||
<script src="js/quizmaster_common.js"></script>
|
||||
<script src="js/groupmgr.js"></script>
|
||||
<link rel="stylesheet" href="style/spreadquiz.css"/>
|
||||
<link rel="stylesheet" href="style/quizmaster_area.css"/>
|
||||
@ -42,14 +43,32 @@ if (!get_autologin_state() || ($user_data["privilege"] !== PRIVILEGE_QUIZMASTER)
|
||||
</section>
|
||||
<section class="window" shown="false" id="group_editor_window">
|
||||
<section class="window-inner">
|
||||
<section style="text-align: right">
|
||||
<span>Név: <input type="text" id="groupname"></span><br>
|
||||
<span>Leírás: <input type="text" id="group_description"></span><br>
|
||||
<span>Tulajdonos: <input type="text" id="group_owner" readonly></span><br>
|
||||
<span>Szerkesztők: <input type="text" id="group_editors"></span><br>
|
||||
<span>Tagok: <textarea id="group_members" readonly></textarea></span>
|
||||
<table>
|
||||
<tr>
|
||||
<td><label for="groupname">Név:</label></td>
|
||||
<td><input type="text" id="groupname"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="group_description">Leírás:</label></td>
|
||||
<td><input type="text" id="group_description"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="group_owner">Tulajdonos:</label></td>
|
||||
<td><input type="text" id="group_owner"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="group_editors">Szerkesztők:</label></td>
|
||||
<td><input type="text" id="group_editors"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="group_members">Tagok:</label></td>
|
||||
<td><textarea id="group_members" readonly></textarea></td>
|
||||
</tr>
|
||||
</table>
|
||||
<section style="display: block; text-align: right">
|
||||
<input type="button" value="" id="group_editor_submit_btn">
|
||||
<input type="button" value="Mégse" onclick="hide('group_editor_window')">
|
||||
</section>
|
||||
<span><input type="button" value="" id="group_editor_submit_btn"><input type="button" value="Mégse" onclick="hide('group_editor_window')"></span>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
|
||||
17
js/quizmaster_common.js
Normal file
17
js/quizmaster_common.js
Normal file
@ -0,0 +1,17 @@
|
||||
function create_table_cell(content, styleClass = "") {
|
||||
if (content.trim() === "") {
|
||||
content = "<i>(üres)</i>";
|
||||
}
|
||||
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");
|
||||
}
|
||||
@ -31,22 +31,4 @@ function load_userdata() {
|
||||
|
||||
load_userdata();
|
||||
|
||||
function create_table_cell(content, styleClass = "") {
|
||||
if (content.trim() === "") {
|
||||
content = "<i>(üres)</i>";
|
||||
}
|
||||
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");
|
||||
}
|
||||
// ---------------
|
||||
@ -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,
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -10,13 +10,15 @@ if (!get_autologin_state() || ($user_data["privilege"] !== PRIVILEGE_QUIZMASTER)
|
||||
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="hu">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>SpreadQuiz</title>
|
||||
<script src="js/o.js"></script>
|
||||
<script src="js/req.js"></script>
|
||||
<script src="js/spreadquiz.js"></script>
|
||||
<script src="js/o.js"></script>
|
||||
<script src="js/common.js"></script>
|
||||
<script src="js/quizmaster_common.js"></script>
|
||||
<script src="js/groupmgr.js"></script>
|
||||
<script src="js/hintbox.js"></script>
|
||||
<script src="js/usermgr.js"></script>
|
||||
@ -72,26 +74,44 @@ if (!get_autologin_state() || ($user_data["privilege"] !== PRIVILEGE_QUIZMASTER)
|
||||
</table>
|
||||
</section>
|
||||
<section>
|
||||
<input type="button" value="Új felhasználó" onclick="create_new_user()">
|
||||
<input type="button" value="Új felhasználó" onclick="create_edit_user()">
|
||||
<input type="button" value="Felhasználó(k) törlése" onclick="delete_users()">
|
||||
<input type="button" value="Felhasználók importálása CSV-ből">
|
||||
</section>
|
||||
<section class="window" shown="false" id="user_editor_window">
|
||||
<section class="window-inner">
|
||||
<section style="text-align: right">
|
||||
<span>Felhasználónév: <input type="text" id="nickname"></span><br>
|
||||
<span>Teljes név: <input type="text" id="realname"></span><br>
|
||||
<span>Jelszó: <input type="text" id="password" readonly></span><br>
|
||||
<span>Csoportok: <input type="text" id="groups" oninput="hint_all_groups('groups')" onblur="close_hintbox()"></span><br>
|
||||
<span>Jogosultság:
|
||||
<select id="privilege">
|
||||
<option value="player">játékos</option>
|
||||
<option value="creator">szerkesztő</option>
|
||||
<option value="admin">kvízmester</option>
|
||||
</select>
|
||||
</span>
|
||||
<table>
|
||||
<tr>
|
||||
<td><label for="nickname">Felhasználónév:</label></td>
|
||||
<td><input type="text" id="nickname"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="realname">Teljes név:</label></td>
|
||||
<td><input type="text" id="realname"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="password">Jelszó:</label></td>
|
||||
<td><input type="text" id="password"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="groups">Csoportok:</label></td>
|
||||
<td><input type="text" id="groups" oninput="hint_all_groups('groups')" onblur="close_hintbox()"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="privilege">Jogosultság:</label></td>
|
||||
<td>
|
||||
<select id="privilege">
|
||||
<option value="player">játékos</option>
|
||||
<option value="creator">szerkesztő</option>
|
||||
<option value="admin">kvízmester</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<section style="display: block; text-align: right">
|
||||
<input type="button" value="" id="user_editor_submit_btn">
|
||||
<input type="button" value="Mégse" onclick="hide('user_editor_window')">
|
||||
</section>
|
||||
<span><input type="button" value="" id="user_editor_submit_btn"><input type="button" value="Mégse" onclick="hide('user_editor_window')"></span>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user