Merge pull request #113 from ThomasRubini/admin_html
This commit is contained in:
Thomas Rubini
GitHub
commit
c69edc3248
26
truthinquiry/static/css/admin_ui.css
Normal file
26
truthinquiry/static/css/admin_ui.css
Normal file
@ -0,0 +1,26 @@
|
||||
#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;
|
||||
}
|
||||
94
truthinquiry/static/js/admin.js
Normal file
94
truthinquiry/static/js/admin.js
Normal file
@ -0,0 +1,94 @@
|
||||
//functions for places.html
|
||||
|
||||
function addNewInputPlaces(){
|
||||
let newPlace = places.lastElementChild.cloneNode(true);
|
||||
newPlace.id = "";
|
||||
newPlace.querySelector("input").value = "";
|
||||
places.appendChild(newPlace);
|
||||
}
|
||||
|
||||
function deletePlace(buttonNode){
|
||||
let placeNode = buttonNode.parentNode;
|
||||
placeNode.parentNode.removeChild(placeNode);
|
||||
}
|
||||
|
||||
function saveForm(){
|
||||
let data = [];
|
||||
for(let section of places.querySelectorAll("section")){
|
||||
let place = {};
|
||||
place["id"] = section.id
|
||||
place["name"] = section.querySelector("input").value
|
||||
data.push(place);
|
||||
}
|
||||
makeAPIRequest("admin/setPlaces", {"places": data, "lang": "FR"}, {"content": "json"})
|
||||
}
|
||||
|
||||
|
||||
//functions for traits.html
|
||||
|
||||
|
||||
function addNewInputTraits(){
|
||||
let newTrait = traits.lastElementChild.cloneNode(true);
|
||||
newTrait.id = "";
|
||||
newTrait.querySelector(".name_input").value = "";
|
||||
newTrait.querySelector(".desc_input").value = "";
|
||||
traits.appendChild(newTrait);
|
||||
}
|
||||
|
||||
function deleteTrait(buttonNode){
|
||||
let traitNode = buttonNode.parentNode;
|
||||
traitNode.parentNode.removeChild(traitNode);
|
||||
}
|
||||
|
||||
function saveFormTraits(){
|
||||
let data = [];
|
||||
for(let section of traits.querySelectorAll("section")){
|
||||
let trait = {};
|
||||
trait["id"] = section.id
|
||||
trait["name"] = section.querySelector(".name_input").value
|
||||
trait["desc"] = section.querySelector(".desc_input").value
|
||||
data.push(trait);
|
||||
}
|
||||
makeAPIRequest("admin/setTraits", {"traits": data, "lang": "FR"}, {"content": "json"})
|
||||
}
|
||||
|
||||
|
||||
|
||||
//functions for questions.html
|
||||
|
||||
|
||||
|
||||
|
||||
function addEntry(button){
|
||||
let questionTypeContent = button.parentNode.querySelector(".questionTypeContent");
|
||||
let newQuestion = questionTypeContent.querySelector(".question").cloneNode(true);
|
||||
newQuestion.id = "";
|
||||
newQuestion.querySelector("input").value = "";
|
||||
questionTypeContent.appendChild(newQuestion);
|
||||
}
|
||||
|
||||
function deleteEntry(buttonNode){
|
||||
let placeNode = buttonNode.parentNode;
|
||||
placeNode.parentNode.removeChild(placeNode);
|
||||
}
|
||||
|
||||
function saveFormQuestions(){
|
||||
let data = [];
|
||||
|
||||
for(let questionTypeNode of allQuestions.querySelectorAll(".questionType")){
|
||||
let questionsJson = [];
|
||||
let questionTypeJson = {"questions": questionsJson};
|
||||
data.push(questionTypeJson);
|
||||
|
||||
for(let questionNode of questionTypeNode.querySelectorAll("input")){
|
||||
questionsJson.push({"text": questionNode.value})
|
||||
}
|
||||
}
|
||||
|
||||
makeAPIRequest("admin/setQuestions", {"questions": data, "lang": "FR"}, {"content": "json"})
|
||||
}
|
||||
|
||||
function changeLang(){
|
||||
|
||||
}
|
||||
|
||||
@ -1,14 +1,25 @@
|
||||
<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>
|
||||
{%for npc in npcs%}
|
||||
<a href="/admin/npc/{{npc['id']}}"> {{npc['name']}} </a>
|
||||
<br>
|
||||
{%endfor%}
|
||||
<br>
|
||||
<a href="/admin/npc/new"> Nouveau NPC </a>
|
||||
</section>
|
||||
<!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>
|
||||
</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>
|
||||
{%for npc in npcs%}
|
||||
<a href="/admin/npc/{{npc['id']}}"> {{npc['name']}} </a>
|
||||
<br>
|
||||
{%endfor%}
|
||||
<br>
|
||||
<a href="/admin/npc/new"> Nouveau NPC </a>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,19 +1,29 @@
|
||||
<a href="/admin"> go Back </a> <br>
|
||||
|
||||
<section>
|
||||
<span>Npc name: </span> <input value="{{ npc.get('name') or ''}}">
|
||||
<img href="{{npc.get('img')}}">
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Answers:</p>
|
||||
{%for answer_type in npc.get("answers") or []%}
|
||||
<section>
|
||||
{%for answer in answer_type%}
|
||||
<input value="{{answer}}">
|
||||
{%endfor%}
|
||||
</section>
|
||||
{%endfor%}
|
||||
|
||||
</section>
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<title>NPC</title>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="admin_ui.css">
|
||||
<script src="/static/js/admin.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<a href="/admin"> go Back </a> <br>
|
||||
|
||||
<section>
|
||||
<span>Npc name: </span>
|
||||
<input value="{{ npc.get('name') or ''}}">
|
||||
<img href="{{npc.get('img')}}">
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Answers:</p>
|
||||
{%for answer_type in npc.get("answers") or []%}
|
||||
<section>
|
||||
{%for answer in answer_type%}
|
||||
<input value="{{answer}}">
|
||||
{%endfor%}
|
||||
</section>
|
||||
{%endfor%}
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,53 +1,26 @@
|
||||
<a href="/admin"> go Back </a> <br>
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<title>Places</title>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="admin_ui.css">
|
||||
<script src="/static/js/admin.js"></script>
|
||||
<script src="/static/js/api.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<a href="/admin"> go Back </a> <br>
|
||||
|
||||
|
||||
<style>
|
||||
section section{
|
||||
border: thin solid red;
|
||||
padding: 5px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
section section input{
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<section id="places">
|
||||
{%for place in places%}
|
||||
<section id="{{place['id']}}">
|
||||
<input value="{{place['name']}}">
|
||||
<button onclick="deletePlace(this)">Delete place</button>
|
||||
</section>
|
||||
{%endfor%}
|
||||
</section>
|
||||
<button onclick="addNewInputPlaces()">Add new</button>
|
||||
<button onclick="saveFormPlaces()">Save changes</button>
|
||||
|
||||
|
||||
<section id="places">
|
||||
{%for place in places%}
|
||||
<section id="{{place['id']}}">
|
||||
<input value="{{place['name']}}">
|
||||
<button onclick="deletePlace(this)">Delete place</button>
|
||||
</section>
|
||||
{%endfor%}
|
||||
</section>
|
||||
<button onclick="addNewInput()">Add new</button>
|
||||
<button onclick="saveForm()">Save changes</button>
|
||||
|
||||
<script src="/static/js/api.js"></script>
|
||||
<script>
|
||||
|
||||
function addNewInput(){
|
||||
let newPlace = places.lastElementChild.cloneNode(true);
|
||||
newPlace.id = "";
|
||||
newPlace.querySelector("input").value = "";
|
||||
places.appendChild(newPlace);
|
||||
}
|
||||
|
||||
function deletePlace(buttonNode){
|
||||
let placeNode = buttonNode.parentNode;
|
||||
placeNode.parentNode.removeChild(placeNode);
|
||||
}
|
||||
|
||||
function saveForm(){
|
||||
let data = [];
|
||||
for(let section of places.querySelectorAll("section")){
|
||||
let place = {};
|
||||
place["id"] = section.id
|
||||
place["name"] = section.querySelector("input").value
|
||||
data.push(place);
|
||||
}
|
||||
makeAPIRequest("admin/setPlaces", {"places": data, "lang": "FR"}, {"content": "json"})
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,78 +1,41 @@
|
||||
<a href="/admin"> go Back </a> <br>
|
||||
<!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>
|
||||
<script src="/static/js/api.js"></script>
|
||||
</head>
|
||||
<body>>
|
||||
|
||||
<a href="/admin"> go Back </a> <br>
|
||||
|
||||
<select id="langs" onchange="changeLang()">
|
||||
{%for lang in langs%}
|
||||
<option value="{{lang}}">{{lang}}</option>
|
||||
{%endfor%}
|
||||
</select>
|
||||
<select id="langs" onchange="changeLang()">
|
||||
{%for lang in langs%}
|
||||
<option value="{{lang}}">{{lang}}</option>
|
||||
{%endfor%}
|
||||
</select>
|
||||
|
||||
|
||||
<section id="allQuestions">
|
||||
{%for questionType in questions%}
|
||||
<div class="questionType">
|
||||
<section class="questionTypeContent">
|
||||
{%for question in questionType["questions"]%}
|
||||
<section class="question">
|
||||
<input value="{{question['text']}}">
|
||||
<button onclick="deleteEntry(this)">Delete question</button>
|
||||
</section>
|
||||
<section id="allQuestions">
|
||||
{%for questionType in questions%}
|
||||
<div class="questionType">
|
||||
<section class="questionTypeContent">
|
||||
{%for question in questionType["questions"]%}
|
||||
<section class="question">
|
||||
<input value="{{question['text']}}">
|
||||
<button onclick="deleteEntry(this)">Delete question</button>
|
||||
</section>
|
||||
{%endfor%}
|
||||
</section>
|
||||
<button onclick="addEntry(this)">Add new</button>
|
||||
</div>
|
||||
{%endfor%}
|
||||
</section>
|
||||
<button onclick="addEntry(this)">Add new</button>
|
||||
</div>
|
||||
{%endfor%}
|
||||
</section>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<button onclick="saveForm()"> Save changes </button>
|
||||
|
||||
<style>
|
||||
.questionType{
|
||||
border: thin solid red;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.question input{
|
||||
width: 100%;
|
||||
margin: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="/static/js/api.js"></script>
|
||||
<script>
|
||||
|
||||
|
||||
function addEntry(button){
|
||||
let questionTypeContent = button.parentNode.querySelector(".questionTypeContent");
|
||||
let newQuestion = questionTypeContent.querySelector(".question").cloneNode(true);
|
||||
newQuestion.id = "";
|
||||
newQuestion.querySelector("input").value = "";
|
||||
questionTypeContent.appendChild(newQuestion);
|
||||
}
|
||||
|
||||
function deleteEntry(buttonNode){
|
||||
let placeNode = buttonNode.parentNode;
|
||||
placeNode.parentNode.removeChild(placeNode);
|
||||
}
|
||||
|
||||
function saveForm(){
|
||||
let data = [];
|
||||
|
||||
for(let questionTypeNode of allQuestions.querySelectorAll(".questionType")){
|
||||
let questionsJson = [];
|
||||
let questionTypeJson = {"questions": questionsJson};
|
||||
data.push(questionTypeJson);
|
||||
|
||||
for(let questionNode of questionTypeNode.querySelectorAll("input")){
|
||||
questionsJson.push({"text": questionNode.value})
|
||||
}
|
||||
}
|
||||
|
||||
makeAPIRequest("admin/setQuestions", {"questions": data, "lang": "FR"}, {"content": "json"})
|
||||
}
|
||||
|
||||
function changeLang(){
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
<button onclick="saveFormQuestions()"> Save changes </button>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,47 +1,29 @@
|
||||
<a href="/admin"> go Back </a> <br>
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<title>Traits</title>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="admin_ui.css">
|
||||
<script src="/static/js/api.js"></script>
|
||||
<script src="/static/js/admin.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<a href="/admin"> go Back </a> <br>
|
||||
|
||||
<section id="traits">
|
||||
{%for trait in traits%}
|
||||
<section id="{{trait['id']}}">
|
||||
<p> Name: </p>
|
||||
<input class="name_input" value="{{trait['name']}}">
|
||||
<p> Description: </p>
|
||||
<input class="desc_input" value="{{trait['desc']}}">
|
||||
<button onclick="deleteTrait(this)">Delete trait</button>
|
||||
</section>
|
||||
{%endfor%}
|
||||
</section>
|
||||
<button onclick="addNewInput()">Add new</button>
|
||||
<button onclick="saveForm()">Save changes</button>
|
||||
<section id="traits">
|
||||
{%for trait in traits%}
|
||||
<section id="{{trait['id']}}">
|
||||
<p> Name: </p>
|
||||
<input class="name_input" value="{{trait['name']}}">
|
||||
<p> Description: </p>
|
||||
<input class="desc_input" value="{{trait['desc']}}">
|
||||
<button onclick="deleteTrait(this)">Delete trait</button>
|
||||
</section>
|
||||
{%endfor%}
|
||||
</section>
|
||||
<button onclick="addNewInputTraits()">Add new</button>
|
||||
<button onclick="saveFormTraits()">Save changes</button>
|
||||
|
||||
<p>Images are viewable in the npc views</p>
|
||||
|
||||
<script src="/static/js/api.js"></script>
|
||||
<script>
|
||||
|
||||
function addNewInput(){
|
||||
let newTrait = traits.lastElementChild.cloneNode(true);
|
||||
newTrait.id = "";
|
||||
newTrait.querySelector(".name_input").value = "";
|
||||
newTrait.querySelector(".desc_input").value = "";
|
||||
traits.appendChild(newTrait);
|
||||
}
|
||||
|
||||
function deleteTrait(buttonNode){
|
||||
let traitNode = buttonNode.parentNode;
|
||||
traitNode.parentNode.removeChild(traitNode);
|
||||
}
|
||||
|
||||
function saveForm(){
|
||||
let data = [];
|
||||
for(let section of traits.querySelectorAll("section")){
|
||||
let trait = {};
|
||||
trait["id"] = section.id
|
||||
trait["name"] = section.querySelector(".name_input").value
|
||||
trait["desc"] = section.querySelector(".desc_input").value
|
||||
data.push(trait);
|
||||
}
|
||||
makeAPIRequest("admin/setTraits", {"traits": data, "lang": "FR"}, {"content": "json"})
|
||||
}
|
||||
|
||||
</script>
|
||||
<p>Images are viewable in the npc views</p>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user