DjalimSimaila/SAE-A2-TruthInquiry
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #135 from ThomasRubini/client_admin-pages-improvements-part-1

Browse Source
This commit is contained in:
Thomas Rubini 2023-04-01 15:34:33 +02:00 committed by GitHub
commit f9132d836b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 464 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

153
truthinquiry/static/css/admin_ui.css
View File

@ -1,26 +1,131 @@
#places>section {
border: thin solid red;
padding: 5px;
margin-top: 20px;
}
/* Custom fonts */
@font-face {
font-display: swap;
font-family: "Roboto Mono";
font-style: normal;
font-weight: 400;
src: url("../fonts/roboto_mono_v22/roboto_mono_v22.woff2") format('woff2'), url("../fonts/roboto_mono_v22/roboto_mono_v22.woff") format('woff'), url("../fonts/roboto_mono_v22/roboto_mono_v22.ttf") format('truetype');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
#section>input{
width: 100%;
}
.questionTypeTag{
border: thin solid red;
margin-top: 20px;
}
.questionTypeTag input{
width: 100%;
}
:root {
--admin-grey-color: #5A5656;
--admin-red-color: #FF0000;
--admin-white-color: #FFFFFF;
--adming-yellow-color: #FFC800;
--body-margin: 0.375em;
font-family: "Roboto Mono", sans-serif;
}
.questionType{
border: thin solid red;
margin-top: 20px;
}
.question input{
width: 100%;
margin: 10px;
}
a {
text-decoration: none;
}
a, body {
color: var(--admin-white-color);
}
a:visited {
color: unset;
}
body {
margin: var(--body-margin);
}
button, input {
font-family: "Roboto Mono", sans-serif;
font-size: 1em;
}
header {
align-content: center;
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
header a {
border-radius: 1em;
border-style: solid;
border-width: 0.125em;
font-size: 1.25em;
margin: 1em;
padding: 0.5em;
text-decoration: none;
}
header a:hover {
background-color: var(--admin-white-color);
color: var(--admin-grey-color);
}
html {
background-color: var(--admin-grey-color);
margin: 0;
}
svg {
fill: var(--admin-white-color);
}
.page_category {
font-size: 2em;
}
.page_category, .page_title {
font-weight: bold;
}
.page_category, .page_description, .page_title {
margin: 1em;
text-align: center;
}
.page_description {
font-size: 1.25em;
}
.page_title {
font-size: 3em;
overflow-wrap: anywhere;
}
.short_color_transition {
transition-property: background-color, color;
transition-duration: 0.25s;
transition-timing-function: linear;
}
.short_color_transition:hover {
transition-duration: 0.25s;
transition-timing-function: linear;
}
#places>section {
border: thin solid red;
padding: 5px;
margin-top: 20px;
}
#section>input{
width: 100%;
}
.questionTypeTag{
border: thin solid red;
margin-top: 20px;
}
.questionTypeTag input{
width: 100%;
}
.questionType{
border: thin solid red;
margin-top: 20px;
}
.question input{
width: 100%;
margin: 10px;
}

57
truthinquiry/static/css/admin_ui_home.css Normal file
View File

@ -0,0 +1,57 @@
.add_npc_icon {
height: 2em;
transition-property: fill;
width: 2em;
}
.add_npc_icon:hover {
transition-property: fill;
}
.add_npc_link {
align-items: center;
border-color: var(--admin-white-color);
border-radius: 1em;
border-style: solid;
border-width: 0.125em;
display: flex;
flex-direction: row;
font-size: 1.25em;
justify-content: center;
margin-left: auto;
margin-right: auto;
max-width: 15em;
padding: 0.25em;
}
.add_npc_link:hover {
background-color: var(--admin-white-color);
color: var(--admin-grey-color);
}
.add_npc_link:hover > .add_npc_icon {
fill: var(--admin-grey-color);
}
.character_item {
font-size: 1.5em;
list-style-type: none;
margin: 1em;
}
.character_item a {
text-decoration: underline;
text-decoration-color: var(--admin-white-color);
}
.character_list {
align-content: center;
align-items: center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 1em;
margin-top: 1em;
padding: 0;
}

33
truthinquiry/static/css/admin_ui_login.css Normal file
View File

@ -0,0 +1,33 @@
form {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
}
input {
font-size: 1em;
margin: 1em;
padding: 0.25em;
}
.invalid_password {
color: var(--adming-yellow-color);
font-size: 1.125em;
margin-bottom: 0.25em;
margin-top: 0.25em;
text-align: center;
}
.login_title {
font-size: 2em;
margin: 0.75em;
text-align: center;
}
.password_field {
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
}

75
truthinquiry/static/css/admin_ui_npc.css Normal file
View File

@ -0,0 +1,75 @@
button {
display: flex;
}
button, input {
background-color: transparent;
border-color: var(--admin-white-color);
border-style: solid;
border-width: 0.125em;
color: var(--admin-white-color);
margin: 1em;
padding: 0.25em;
}
input[type="text"] {
width: 20em;
}
.action_buttons, .answer_groups {
align-content: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.action_button {
align-items: center;
border-radius: 1em;
cursor: pointer;
display: flex;
flex-direction: row;
justify-content: center;
padding: 0.25em;
}
.action_button:hover {
background-color: var(--admin-white-color);
color: var(--admin-grey-color);
}
.action_button:hover > .action_icon {
fill: var(--admin-grey-color);
}
.action_icon {
height: 2em;
transition-property: fill;
width: 2em;
}
.character_image {
width: 15em;
}
.character_image, #npc_name {
margin-left: auto;
margin-right: auto;
}
.character_image, #npc_name {
display: block;
}
.info_item {
font-size: 1.25em;
}
.info_item, .section_title {
text-align: center;
}
.section_title {
font-size: 1.5em;
margin: 1em;
}

1
truthinquiry/static/images/no_photography_white.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 96 960 960" fill="white"><path d="m902 885-92-89V371H637l-82-97H407l-54 65-65-65 78-92h230l82 97h132q37.225 0 64.613 27.706Q902 334.412 902 371v514ZM646 631 469 453q36-3 70.5 8.5t60.5 38q26 26.5 37.5 60.5t8.5 71Zm-188 10Zm123-74ZM194 279l91 92H150v495h533L25 208l49-49 820 820-49 49-71-71H150q-37.175 0-64.088-26.594Q59 903.812 59 866V371q0-37.588 26.912-64.794Q112.825 279 150 279h44Zm169.564 219L407 541q-17 15.696-26 36.305t-9 43.157q0 45.958 31.29 77.248Q434.58 729 480 729q20.857 0 41.929-9.5Q543 710 559.689 693L603 735.722Q579 763 547.068 776q-31.932 13-67.399 13-70.336 0-119.002-49.292Q312 690.417 312 620q0-34.274 12.457-66.098 12.456-31.823 39.107-55.902Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 727 B

30
truthinquiry/static/js/admin.js
View File

@ -87,33 +87,3 @@ function saveFormQuestions(){
makeAPIRequest("admin/setQuestions", {"questions": data, "lang": "FR"}, {"content": "json"})
}
//functions for npc.html
function saveFormNpc(){
let data = {}
data["id"] = npc.querySelector("#npc_id").value;
data["name"] = npc.querySelector("#npc_name").value;
let allAnswersJson = [];
data["allAnswers"] = allAnswersJson;
for(let answerTypeNode of npc.querySelectorAll(".answerType")){
let answersJson = [];
let answerTypeJson = {"answers": answersJson};
allAnswersJson.push(answerTypeJson);
for(let answerNode of answerTypeNode.querySelectorAll("input")){
answersJson.push({"text": answerNode.value})
}
}
makeAPIRequest("admin/setNpc", {"npc": data, "lang": "FR"}, {"content": "json"})
}
async function deleteNpc(){
let npc_id = npc.querySelector("#npc_id").value;
await makeAPIRequest("admin/deleteNpc", {"npc_id": npc_id, "lang": "FR"}, {"content": "json"});
document.location = "/admin";
}

33
truthinquiry/static/js/admin_npc.js Normal file
View File

@ -0,0 +1,33 @@
function createOrUpdateNpc() {
const data = {};
data["id"] = document.querySelector("#npc_id").value;
data["name"] = document.querySelector("#npc_name").value;
const allAnswersJson = [];
data["allAnswers"] = allAnswersJson;
for (let answerTypeNode of document.querySelector(".answer_groups").children) {
const answersJson = [];
const answerTypeJson = {"answers": answersJson};
allAnswersJson.push(answerTypeJson);
answerTypeNode.querySelectorAll("input").forEach(answerNode => {
answersJson.push({"text": answerNode.value});
});
}
makeAPIRequest("admin/setNpc", {"npc": data, "lang": "FR"}, {"content": "json"}).then(() => {
alert("Opération effectuée avec succès");
});
}
async function deleteNpc() {
if (!confirm("Voulez-vous vraiment supprimer ce personnage ?")) {
return;
}
const npcId = document.querySelector("#npc_id").value;
await makeAPIRequest("admin/deleteNpc", {"npc_id": npcId, "lang": "FR"}, {"content": "json"});
alert("Opération effectuée avec succès");
document.location = "/admin";
}

40
truthinquiry/templates/admin/auth.html
View File

@ -1,9 +1,31 @@
{% if failed %}
<p style="color: red"> Invalid password !</p>
{% endif %}
<form action="/api/v1/admin/auth" method="POST">
<p>Password :</p>
<input name="password">
<input type="submit" value="Submit">
</form>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Truth Inquiry - Connexion à l'interface d'administration</title>
<link rel="stylesheet" href="/static/css/admin_ui.css">
<link rel="stylesheet" href="/static/css/admin_ui_login.css">
<link rel="icon" href="/static/images/favicon/favicon_32.png" type="image/png" sizes="32x32">
<link rel="icon" href="/static/images/favicon/favicon_64.png" type="image/png" sizes="64x64">
<link rel="icon" href="/static/images/favicon/favicon_96.png" type="image/png" sizes="96x96">
<link rel="icon" href="/static/images/favicon/favicon_128.png" type="image/png" sizes="128x128">
<link rel="icon" href="/static/images/favicon/favicon_192.png" type="image/png" sizes="192x192">
<link rel="icon" href="/static/images/favicon/favicon_256.png" type="image/png" sizes="256x256">
<link rel="icon" href="/static/images/favicon/favicon_256.png" type="image/png" sizes="512x512">
<meta name="color-scheme" content="dark light">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1 class="login_title">Truth Inquiry - Connexion à l'interface d'administration</h1>
<form action="/api/v1/admin/auth" method="POST">
<div class="password_field">
<label for="password" class="password_label">Mot de passe&nbsp;:</label>
<input id="password" name="password" type="password" placeholder="Mot de passe" required="required" title="Saisissez votre mot de passe">
</div>
<input type="submit" value="Connexion">
</form>
{% if failed %}
<p class="invalid_password">Mot de passe invalide&nbsp;!</p>
{% endif %}
</body>
</html>

50
truthinquiry/templates/admin/index.html
View File

@ -1,27 +1,43 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Admin Page</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="admin_ui.css">
<script src="/static/js/admin.js"></script>
<title>Truth Inquiry - Interface d'administration</title>
<link rel="stylesheet" href="/static/css/admin_ui.css">
<link rel="stylesheet" href="/static/css/admin_ui_home.css">
<link rel="icon" href="/static/images/favicon/favicon_32.png" type="image/png" sizes="32x32">
<link rel="icon" href="/static/images/favicon/favicon_64.png" type="image/png" sizes="64x64">
<link rel="icon" href="/static/images/favicon/favicon_96.png" type="image/png" sizes="96x96">
<link rel="icon" href="/static/images/favicon/favicon_128.png" type="image/png" sizes="128x128">
<link rel="icon" href="/static/images/favicon/favicon_192.png" type="image/png" sizes="192x192">
<link rel="icon" href="/static/images/favicon/favicon_256.png" type="image/png" sizes="256x256">
<link rel="icon" href="/static/images/favicon/favicon_256.png" type="image/png" sizes="512x512">
<meta name="color-scheme" content="dark light">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<a href="/admin/questions"> Questions </a>
<br>
<a href="/admin/places"> Places </a>
<br>
<a href="/admin/traits"> Traits </a>
<section>
<p> NPC list :</p>
<header>
<a class="short_color_transition" href="/admin" title="Cliquez ici pour revenir à l'accueil de l'interface d'administration du jeu">Accueil</a>
<a class="short_color_transition" href="/admin/questions" title="Cliquez ici pour gérer les questions du jeu">Gestion des questions</a>
<a class="short_color_transition" href="/admin/places" title="Cliquez ici pour gérer les lieux du jeu">Gestion des lieux</a>
<a class="short_color_transition" href="/admin/traits" title="Cliquez ici pour gérer les réactions du jeu">Gestion des réactions</a>
<a class="short_color_transition" href="/api/v1/admin/logout" title="Cliquez ici pour vous déconnecter de l'interface d'administration du jeu">Déconnexion</a>
</header>
<h1 class="page_title">Truth Inquiry - Interface d'administration</h1>
<h2 class="page_category">Gestion des personnages</h2>
<p class="page_description">Cliquez sur un personnage pour le gérer ou créez-un autre à l'aide du bouton ci-dessous.</p>
<ul class="character_list">
{%for npc in npcs%}
<a href="/admin/npc/{{npc['id']}}"> {{npc['name']}} </a>
<br>
<li class="character_item">
<a href="/admin/npc/{{npc['id']}}" title="Cliquez ici pour gérer le personnage «&nbsp;{{npc['name']}}&nbsp;»">{{npc['name']}}</a>
</li>
{%endfor%}
<br>
<a href="/admin/npc/new"> Nouveau NPC </a>
</section>
<a href="/api/v1/admin/logout"> Logout </a>
</ul>
<a class="add_npc_link short_color_transition" href="/admin/npc/new" title="Cliquez ici pour créer un nouveau personnage">
<svg class="add_npc_icon short_color_transition" xmlns="http://www.w3.org/2000/svg" viewBox="0 96 960 960">
<path d="M435 871V622H185v-91h250V281h91v250h250v91H526v249h-91Z"/>
</svg>
Nouveau personnage
</a>
</body>
</html>

98
truthinquiry/templates/admin/npc.html
View File

@ -1,36 +1,82 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<title>NPC</title>
<meta charset="UTF-8">
<title>Truth Inquiry - {{'Gestion' if npc.get('id') else 'Ajout'}} d'un personnage</title>
<link rel="stylesheet" href="/static/css/admin_ui.css">
<script src="/static/js/api.js"></script>
<script src="/static/js/admin.js"></script>
<link rel="stylesheet" href="/static/css/admin_ui_npc.css">
<link rel="icon" href="/static/images/favicon/favicon_32.png" type="image/png" sizes="32x32">
<link rel="icon" href="/static/images/favicon/favicon_64.png" type="image/png" sizes="64x64">
<link rel="icon" href="/static/images/favicon/favicon_96.png" type="image/png" sizes="96x96">
<link rel="icon" href="/static/images/favicon/favicon_128.png" type="image/png" sizes="128x128">
<link rel="icon" href="/static/images/favicon/favicon_192.png" type="image/png" sizes="192x192">
<link rel="icon" href="/static/images/favicon/favicon_256.png" type="image/png" sizes="256x256">
<link rel="icon" href="/static/images/favicon/favicon_256.png" type="image/png" sizes="512x512">
<meta name="color-scheme" content="dark light">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<a href="/admin"> go Back </a> <br>
<section id="npc">
<section>
<span>Npc name: </span>
<input id="npc_id" value="{{ npc.get('id') or ''}}" hidden>
<input id="npc_name" value="{{ npc.get('name') or ''}}">
<img href="{{npc.get('img')}}">
</section>
<section>
<p>Answers:</p>
{%for answer_type in npc.get("answers") or []%}
<section class="answerType">
{%for answer in answer_type%}
<input value="{{answer}}">
{%endfor%}
</section>
{%endfor%}
</section>
<header>
<a class="short_color_transition" href="/admin" title="Cliquez ici pour revenir à l'accueil de l'interface d'administration du jeu">Accueil</a>
<a class="short_color_transition" href="/admin/questions" title="Cliquez ici pour gérer les questions du jeu">Gestion des questions</a>
<a class="short_color_transition" href="/admin/places" title="Cliquez ici pour gérer les lieux du jeu">Gestion des lieux</a>
<a class="short_color_transition" href="/admin/traits" title="Cliquez ici pour gérer les réactions du jeu">Gestion des réactions</a>
<a class="short_color_transition" href="/api/v1/admin/logout" title="Cliquez ici pour vous déconnecter de l'interface d'administration du jeu">Déconnexion</a>
</header>
<h1 class="page_title">Truth Inquiry - Interface d'administration</h1>
<h2 class="page_category">{{'Gestion' if npc.get('id') else 'Ajout'}} d'un personnage</h2>
<p class="page_description">Cliquez sur les champs pour éditer les informations. Dans les réponses aux questions lors de l'interrogation, utilisez «&nbsp;{NPC}&nbsp;» pour faire référence au nom d'un personnage et «&nbsp;{SALLE}&nbsp;» pour faire référence au nom d'une salle.</p>
<section>
<h2 class="section_title">Informations sur le personnage</h2>
<input id="npc_id" value="{{ npc.get('id') or ''}}" hidden="hidden">
<p class="info_item">Nom du personnage</p>
<input type="text" id="npc_name" value="{{ npc.get('name') or ''}}" title="Saisissez le nom du personnage" aria-label="Nom du personnage">
<p class="info_item">Image du personnage</p>
<img class="character_image" alt="{{'Image du personnage' + (' ' + npc.get('name') if npc.get('name') else '')}}" src="{{'/static/images/no_photography_white.svg' if npc.get('img') == None else '/api/v1/getNpcImage?npcid=' + npc.get('img')|string}}">
</section>
<button onclick="saveFormNpc()">Save changes</button>
<button onclick="deleteNpc()">Delete Npc</button>
<section>
<h2 class="section_title">Réponses aux questions lors de l'interrogation</h2>
<div class="answer_groups">
{%for answer_type in npc.get("answers") or []%}
<div class="answer_group">
{%for answer in answer_type%}
<input type="text" value="{{answer}}" title="Saisissez le texte de la réponse" aria-label="Texte de la réponse">
{%endfor%}
</div>
{%endfor%}
</div>
</section>
<div class="action_buttons">
{% if npc.get('id'): %}
<button id="save_edits_button" class="action_button short_color_transition" onclick="createOrUpdateNpc()" title="Cliquez ici pour enregister les modifications sur le personnage">
<svg class="action_icon short_color_transition" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 48 48">
<path d="M18.9 36.75 6.65 24.5l3.3-3.3 8.95 9L38 11.1l3.3 3.25Z"/>
</svg>
Enregister les modifications du personnage
</button>
<button id="delete_npc_button" class="action_button short_color_transition" onclick="deleteNpc()" title="Cliquez ici pour supprimer le personnage">
<svg class="action_icon short_color_transition" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 48 48">
<path d="M12.45 38.7 9.3 35.55 20.85 24 9.3 12.5l3.15-3.2L24 20.8 35.55 9.3l3.15 3.2L27.2 24l11.5 11.55-3.15 3.15L24 27.2Z"/>
</svg>
Supprimer le personnage
</button>
{% else: %}
<button id="add_npc_button" class="action_button short_color_transition" onclick="createOrUpdateNpc()" title="Cliquez ici pour ajouter un personnage avec les données saisies">
<svg class="action_icon short_color_transition" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 48 48">
<path d="M18.9 36.75 6.65 24.5l3.3-3.3 8.95 9L38 11.1l3.3 3.25Z"/>
</svg>
Ajouter un personnage
</button>
{% endif %}
</div>
<noscript>
<div class="alert_dialog_background"></div>
<dialog>
<h3 class="alert_dialog_title">JavaScript nécessaire</h3>
<p class="alert_dialog_msg unsupported_browser_msg">Désolé, mais JavaScript est nécessaire pour faire fonctionner cette page. Veuillez l'activer dans votre navigateur ou en utiliser un qui le supporte afin de pouvoir ajouter ou gérer un personnage.</p>
</dialog>
</noscript>
<script src="/static/js/api.js"></script>
<script src="/static/js/admin_npc.js"></script>
</body>
</html>