- 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>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="hu">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>SpreadQuiz</title>
|
<title>SpreadQuiz</title>
|
||||||
|
<script src="js/o.js"></script>
|
||||||
<script src="js/req.js"></script>
|
<script src="js/req.js"></script>
|
||||||
|
<script src="js/quizmaster_common.js"></script>
|
||||||
<script src="js/spreadquiz.js"></script>
|
<script src="js/spreadquiz.js"></script>
|
||||||
<script src="js/common.js"></script>
|
<script src="js/common.js"></script>
|
||||||
<script src="js/o.js"></script>
|
|
||||||
<script src="js/hintbox.js"></script>
|
<script src="js/hintbox.js"></script>
|
||||||
<script src="js/usermgr.js"></script>
|
<script src="js/usermgr.js"></script>
|
||||||
<script src="js/gamemgr.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" shown="false" id="game_editor_window">
|
||||||
<section class="window-inner">
|
<section class="window-inner">
|
||||||
<section style="text-align: right">
|
<section style="text-align: right">
|
||||||
<span>Név: <input type="text" id="game_name"></span><br>
|
<table>
|
||||||
<span>Leírás: <input type="text" id="game_description"></span><br>
|
<tr>
|
||||||
<span>Tulajdonos: <input type="text" id="game_owner" readonly></span><br>
|
<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">
|
<section id="additional_controls">
|
||||||
<span>Szerkesztők: <input type="text" id="game_contributors"></span><br>
|
<table>
|
||||||
<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()">
|
<tr>
|
||||||
<input type="button" value="Új feltöltése" id="show_game_file_upload" onclick="show_hide_gamefile_upload(true)">
|
<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="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>
|
<input type="button" value="Mégse" id="cancel_game_file_upload" shown="false"
|
||||||
<span>Csoportok: <input type="text" id="game_groups"></span><br>
|
onclick="show_hide_gamefile_upload(false);">
|
||||||
<span>
|
</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="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">
|
<input type="time" id="time_limit" step="1">
|
||||||
</span><br>
|
</td>
|
||||||
<span>
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<label for="repeatable">Megismételhető:</label>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
<input type="checkbox" id="repeatable">
|
<input type="checkbox" id="repeatable">
|
||||||
<label for="repeatable">Megismételhető</label>
|
</td>
|
||||||
</span>
|
</tr>
|
||||||
|
</table>
|
||||||
</section>
|
</section>
|
||||||
</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>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|||||||
@ -10,13 +10,14 @@ if (!get_autologin_state() || ($user_data["privilege"] !== PRIVILEGE_QUIZMASTER)
|
|||||||
|
|
||||||
?>
|
?>
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="hu">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>SpreadQuiz</title>
|
<title>SpreadQuiz</title>
|
||||||
|
<script src="js/o.js"></script>
|
||||||
<script src="js/req.js"></script>
|
<script src="js/req.js"></script>
|
||||||
<script src="js/spreadquiz.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>
|
<script src="js/groupmgr.js"></script>
|
||||||
<link rel="stylesheet" href="style/spreadquiz.css"/>
|
<link rel="stylesheet" href="style/spreadquiz.css"/>
|
||||||
<link rel="stylesheet" href="style/quizmaster_area.css"/>
|
<link rel="stylesheet" href="style/quizmaster_area.css"/>
|
||||||
@ -42,14 +43,32 @@ if (!get_autologin_state() || ($user_data["privilege"] !== PRIVILEGE_QUIZMASTER)
|
|||||||
</section>
|
</section>
|
||||||
<section class="window" shown="false" id="group_editor_window">
|
<section class="window" shown="false" id="group_editor_window">
|
||||||
<section class="window-inner">
|
<section class="window-inner">
|
||||||
<section style="text-align: right">
|
<table>
|
||||||
<span>Név: <input type="text" id="groupname"></span><br>
|
<tr>
|
||||||
<span>Leírás: <input type="text" id="group_description"></span><br>
|
<td><label for="groupname">Név:</label></td>
|
||||||
<span>Tulajdonos: <input type="text" id="group_owner" readonly></span><br>
|
<td><input type="text" id="groupname"></td>
|
||||||
<span>Szerkesztők: <input type="text" id="group_editors"></span><br>
|
</tr>
|
||||||
<span>Tagok: <textarea id="group_members" readonly></textarea></span>
|
<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>
|
</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>
|
||||||
</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();
|
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 = () => {
|
let edit_user_action = () => {
|
||||||
if (get_selected_users().length === 0) {
|
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 = () => {
|
const generateRandomString = () => {
|
||||||
return Math.floor(Math.random() * Date.now()).toString(36);
|
return Math.floor(Math.random() * Date.now()).toString(36);
|
||||||
};
|
};
|
||||||
@ -47,44 +49,7 @@ function create_new_user() {
|
|||||||
let privilegeF = document.getElementById("privilege");
|
let privilegeF = document.getElementById("privilege");
|
||||||
let submit_btn = document.getElementById("user_editor_submit_btn");
|
let submit_btn = document.getElementById("user_editor_submit_btn");
|
||||||
|
|
||||||
nicknameF.value = "";
|
if (updating) {
|
||||||
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.value = user["nickname"];
|
||||||
nicknameF.readOnly = true;
|
nicknameF.readOnly = true;
|
||||||
realnameF.value = user["realname"];
|
realnameF.value = user["realname"];
|
||||||
@ -94,12 +59,22 @@ function edit_user(user) {
|
|||||||
groupsF.value = user["groups"].join(", ");
|
groupsF.value = user["groups"].join(", ");
|
||||||
privilegeF.value = user["privilege"];
|
privilegeF.value = user["privilege"];
|
||||||
submit_btn.value = "Mentés"
|
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 = () => {
|
submit_btn.onclick = () => {
|
||||||
let nickname = nicknameF.value.trim();
|
let nickname = nicknameF.value.trim();
|
||||||
if (nickname !== "") {
|
if (nickname !== "") {
|
||||||
let req = {
|
let req = {
|
||||||
action: "update_user",
|
action: updating ? "update_user" : "create_user",
|
||||||
nickname: nickname,
|
nickname: nickname,
|
||||||
realname: realnameF.value.trim(),
|
realname: realnameF.value.trim(),
|
||||||
password: passwordF.value,
|
password: passwordF.value,
|
||||||
|
|||||||
@ -13,7 +13,12 @@ table.management thead th {
|
|||||||
padding: 0.5em 0;
|
padding: 0.5em 0;
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
background-color: darkgray;
|
background-color: #176767;
|
||||||
|
color: whitesmoke;
|
||||||
|
}
|
||||||
|
|
||||||
|
table.management tbody tr {
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
table.management tbody td {
|
table.management tbody td {
|
||||||
@ -43,3 +48,16 @@ td.checkbox {
|
|||||||
width: 15em;
|
width: 15em;
|
||||||
height: 8em;
|
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>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="hu">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>SpreadQuiz</title>
|
<title>SpreadQuiz</title>
|
||||||
|
<script src="js/o.js"></script>
|
||||||
<script src="js/req.js"></script>
|
<script src="js/req.js"></script>
|
||||||
<script src="js/spreadquiz.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/groupmgr.js"></script>
|
||||||
<script src="js/hintbox.js"></script>
|
<script src="js/hintbox.js"></script>
|
||||||
<script src="js/usermgr.js"></script>
|
<script src="js/usermgr.js"></script>
|
||||||
@ -72,26 +74,44 @@ if (!get_autologin_state() || ($user_data["privilege"] !== PRIVILEGE_QUIZMASTER)
|
|||||||
</table>
|
</table>
|
||||||
</section>
|
</section>
|
||||||
<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) törlése" onclick="delete_users()">
|
||||||
<input type="button" value="Felhasználók importálása CSV-ből">
|
<input type="button" value="Felhasználók importálása CSV-ből">
|
||||||
</section>
|
</section>
|
||||||
<section class="window" shown="false" id="user_editor_window">
|
<section class="window" shown="false" id="user_editor_window">
|
||||||
<section class="window-inner">
|
<section class="window-inner">
|
||||||
<section style="text-align: right">
|
<table>
|
||||||
<span>Felhasználónév: <input type="text" id="nickname"></span><br>
|
<tr>
|
||||||
<span>Teljes név: <input type="text" id="realname"></span><br>
|
<td><label for="nickname">Felhasználónév:</label></td>
|
||||||
<span>Jelszó: <input type="text" id="password" readonly></span><br>
|
<td><input type="text" id="nickname"></td>
|
||||||
<span>Csoportok: <input type="text" id="groups" oninput="hint_all_groups('groups')" onblur="close_hintbox()"></span><br>
|
</tr>
|
||||||
<span>Jogosultság:
|
<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">
|
<select id="privilege">
|
||||||
<option value="player">játékos</option>
|
<option value="player">játékos</option>
|
||||||
<option value="creator">szerkesztő</option>
|
<option value="creator">szerkesztő</option>
|
||||||
<option value="admin">kvízmester</option>
|
<option value="admin">kvízmester</option>
|
||||||
</select>
|
</select>
|
||||||
</span>
|
</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>
|
</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>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user