Commit cf8d9617 authored by Sylvain Coulange's avatar Sylvain Coulange
Browse files

premier proto Home avec 2 séries

parent 199e02f3
......@@ -107,14 +107,23 @@ def save2db(request):
return JsonResponse(rep)
def openPlayerHome(request):
updateTimeStr = updateTime()
allseries = json.dumps(dbActivities)
return render(request, 'playerHome.html', {'updateTime': updateTimeStr, 'allseries':allseries})
def openPlayerPhono(request):
def openPlayerPhono(request, serieId):
updateTimeStr = updateTime()
return render(request, 'playerPhono.html', {'updateTime': updateTimeStr})
serieContent = json.dumps(dbActivities[serieId])
print("Demande ouverture série",serieId)
return render(request, 'playerPhono.html', {'updateTime': updateTimeStr, 'serieContent':serieContent})
def getActivity(request):
activity = dbActivities["serie0"]
return JsonResponse(activity)
colis = json.loads(request.body)
serieIdreq = colis[serieId-request]
print(serieIdreq)
serieContent = dbActivities[serieIdreq]
return JsonResponse(serieContent)
def openSwitchStress(request):
updateTimeStr = updateTime()
......
......@@ -15,7 +15,7 @@ Including another URLconf
"""
from django.contrib import admin
from django.urls import path
from clavier.views import newPage, save2db, loadPage, getPageContent, openPlayerPhono, getActivity, openSwitchStress, getActivitySwitchStress
from clavier.views import newPage, save2db, loadPage, getPageContent, openPlayerPhono, getActivity, openSwitchStress, getActivitySwitchStress, openPlayerHome
from django.views.decorators.csrf import csrf_exempt
urlpatterns = [
......@@ -27,7 +27,8 @@ urlpatterns = [
path('id-<str:pageId>/page', getPageContent),
path('<str:pageLang>/id-<str:pageId>/', loadPage),
path('export/', csrf_exempt(save2db)),
path('player/', openPlayerPhono),
path('player/', openPlayerHome),
path('player/<str:serieId>', openPlayerPhono),
path('getActivity/', csrf_exempt(getActivity)),
path('switchstress/', openSwitchStress),
path('getActivitySwitchStress/', csrf_exempt(getActivitySwitchStress))
......
......@@ -46,19 +46,22 @@ function btnFocus(btn){
//////////////////////////////////////////////////////////
// Modifier l'encrage et la taille du clavier
var btnmin = document.getElementById('btn-min');
btnmin.addEventListener('click', function(){
var clavSize = getComputedStyle(document.documentElement).getPropertyValue('--clavSize');
var graphSize = getComputedStyle(document.documentElement).getPropertyValue('--graphSize');
document.documentElement.style.setProperty('--clavSize', parseInt(clavSize.slice(0,2)) - 10 + '%');
document.documentElement.style.setProperty('--graphSize', parseInt(graphSize.slice(0,2)) + 10 + '%');
});
var btnmax = document.getElementById('btn-max');
btnmax.addEventListener('click', function(){
var clavSize = getComputedStyle(document.documentElement).getPropertyValue('--clavSize');
var graphSize = getComputedStyle(document.documentElement).getPropertyValue('--graphSize');
document.documentElement.style.setProperty('--clavSize', parseInt(clavSize.slice(0,2)) + 10 + '%');
document.documentElement.style.setProperty('--graphSize', parseInt(graphSize.slice(0,2)) - 10 + '%');
});
if ($('#btn-min').length) {
var btnmin = document.getElementById('btn-min');
btnmin.addEventListener('click', function(){
var clavSize = getComputedStyle(document.documentElement).getPropertyValue('--clavSize');
var graphSize = getComputedStyle(document.documentElement).getPropertyValue('--graphSize');
document.documentElement.style.setProperty('--clavSize', parseInt(clavSize.slice(0,2)) - 10 + '%');
document.documentElement.style.setProperty('--graphSize', parseInt(graphSize.slice(0,2)) + 10 + '%');
});
}
if ($('#btn-max').length) {
var btnmax = document.getElementById('btn-max');
btnmax.addEventListener('click', function(){
var clavSize = getComputedStyle(document.documentElement).getPropertyValue('--clavSize');
var graphSize = getComputedStyle(document.documentElement).getPropertyValue('--graphSize');
document.documentElement.style.setProperty('--clavSize', parseInt(clavSize.slice(0,2)) + 10 + '%');
document.documentElement.style.setProperty('--graphSize', parseInt(graphSize.slice(0,2)) - 10 + '%');
});
}
......@@ -113,10 +113,13 @@ var currentAudio = "";
var rep = document.getElementById('rep');
var btnValider = document.getElementById("btnValider");
getActivity();
async function getActivity() {
/*
getActivity("serie0");
async function getActivity(serieIdreq) {
// PRÉPARATION DU COLIS
var colis = {};
var colis = {
"serieId-request":serieIdreq
};
//console.log(colis);
// Paramètres d'envoi
......@@ -142,6 +145,18 @@ async function getActivity() {
document.getElementById('fenetreDeLancement').style.display = "block";
}
*/
// LANCEMENT DE L'ACTIVITÉ PAR DEFAUT (TRANSMISE AVEC LE TEMPLATE cf. views.py)
nbmots = serieContent["mots"].length;
mots = serieContent["mots"];
document.getElementById('nomSerie').innerHTML = serieContent["nom"];
document.getElementById('nbMots').innerHTML = nbmots;
document.getElementById('fenetreDeLancement').style.display = "block";
// Démarrage de la série
function demarrer() {
......
console.log("Coucou");
selectLang("fr");
function selectLang(lang){
console.log('SelectLang()',lang);
if (lang=="fr"){
interface("fr");
} else if (lang=="en"){
interface("en");
}
}
interface("fr");
function interface(lang) {
console.log("Langue d'interface:",lang);
thisPageLang = lang;
var langspanList = document.getElementsByClassName("langspan");
if (lang == "en") {
for (i=0; i<langspanList.length; i++) {
span = langspanList[i];
span.innerHTML = langJson[span.id]["en"];
}
} else { // "fr" par défaut
for (i=0; i<langspanList.length; i++) {
span = langspanList[i];
span.innerHTML = langJson[span.id]["fr"];
}
}
}
document.getElementById('nbseries').innerHTML = Object.keys(allseries).length;
// Liste des séries disponibles
jQuery.each(allseries, function(i, val) {
pageSerie = document.createElement('a');
pageSerie.href = i;
pageSerie.style.textDecoration = "none";
pageSerie.style.color = "black";
newSerie = document.createElement('div');
newSerie.classList = "serie";
pageSerie.appendChild(newSerie);
serieHeader = document.createElement('div');
serieHeader.classList = "serieHeader";
newSerie.appendChild(serieHeader);
serieBody = document.createElement('div');
serieBody.classList = "serieBody";
newSerie.appendChild(serieBody);
ti = document.createElement('div');
ti.classList = "serieTi";
ti.innerHTML = val["nom"];
serieHeader.appendChild(ti);
de = document.createElement('div');
de.classList = "serieDe";
de.innerHTML = "(" + val["mots"].length + " mots)";
serieHeader.appendChild(de);
li = document.createElement('div');
li.classList = "serieLi";
$.each(val["mots"], function(j, mot) {
li.innerHTML = li.innerHTML + mot["motGenerique"] + "<br/>";
});
serieBody.appendChild(li);
document.getElementById("listSeries").appendChild(pageSerie);
});
\ No newline at end of file
......@@ -86,6 +86,10 @@ var langJson = {
"sp_playerHeader": {
"fr":"Prototype d'activités de pointage phonologique",
"en":""
},
"sp_playerHomeListSeriesTitle": {
"fr":"séries disponibles",
"en":""
}
}
\ No newline at end of file
This diff is collapsed.
......@@ -7,6 +7,66 @@
margin: auto;
}
.homeMainContent {
/* background-color: lightcoral; */
text-align: left;
margin: 30px 0px;
}
.listSeries {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
justify-content: left;
align-items: center;
}
.serie {
width: 250px;
height: 250px;
margin: 10px;
background-color: lightcoral;
border: solid 1px black;
border-radius: 5px;
cursor: pointer;
overflow: hidden;
}
.serie:hover {
border: solid 4px black;
}
.serieHeader {
position: relative;
height: 100px;
padding: 5px 3px;
background-color: lightslategray;
margin: auto;
overflow: auto;
}
.serieTi {
font-size: 1.2em;
font-weight: bold;
text-overflow: ellipsis;
}
.serieDe {
padding: 5px 3px;
font-size: 1em;
font-style: italic;
text-overflow: ellipsis;
text-align: right;
}
.serieBody {
position: relative;
height: 150px;
padding: 5px 3px;
background-color: cornsilk;
margin: auto;
overflow: auto;
}
/* .serieLi {
} */
.playerHeader {
display: flex;
justify-content: center;
......
......@@ -7,17 +7,21 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'styles/phonochromie_alem_v3.css'%}">
<link rel="stylesheet" type="text/css" href="{% static 'styles/popup.css'%}">
<link rel="stylesheet" type="text/css" href="{% static 'styles/clavier.css'%}">
<link rel="stylesheet" type="text/css" href="{% static 'styles/player.css'%}">
<!-- <script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script> -->
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script defer src="{% static 'js/html2canvas.min.js' %}"></script>
<script defer src="{% static 'js/download.js' %}"></script>
</head>
<body>
<!-- RÉCUPÉRATION DE L'ENSEMBLE DES SÉRIES -->
<script type="text/javascript">
var allseries = JSON.parse("{{allseries|escapejs}}");
console.log(allseries);
</script>
<!---------------------------------------->
<div class="preprod" style="display: none;">PREPROD</div>
<div class="playerHeader">
......@@ -28,109 +32,22 @@
</div>
<div class="mainContent">
<div class="homeMainContent">
<div class="fenetre divPlayerConsigneReponse">
<div class="headerConsigne">
<div><span id="nomSerie"></span></div>
<div><span id="divConsigne" class="consigne" style="display: none;">Pointez le mot que vous entendez</span></div>
<div><span id="cptitem">0</span>/<span id="nbMots"></span></div>
</div>
<div id="fenetreDeLancement" style="display: none;">
<button type="button" class="btn btn-default btn-lg" onclick="demarrer()">Démarrer !</button>
</div>
<div class="divReponse" id="divReponse" style="display: none;">
<div class="divReponseGauche">
<button onclick="playAudio()" id="btnAudio" type="button" class="btn btn-default btn-lg btnAudio">
<span class="glyphicon glyphicon-volume-up" aria-hidden="true"></span>
</button>
</div>
<div class="divReponseMilieu">
<div id="rep"></div>
</div>
<div class="divReponseDroit">
<button onclick="checkAnswer()" id="btnValider">Valider</button>
</div>
<div class="listSeriesTitle">
<h2>
<span id="nbseries"></span> <span id="sp_playerHomeListSeriesTitle" class="langspan"></span>
</h2>
</div>
<div id="listSeries" class="listSeries"></div>
<!-- <div class="container" id="divReponse" style="display: none;">
<div class="row">
<div class="col-2"
<button onclick="playAudio()" id="btnAudio" type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-volume-up" aria-hidden="true"></span>
</button>
<button onclick="checkAnswer()" id="btnValider">Valider</button>
</div>
<div class="col">
<div id="rep"></div>
</div>
</div>
</div> -->
</div>
<center>
<div id="bravo" style="display: none;">
<p>Bravo !</p>
<button onclick="loadNext()" type="button" class="btn btn-default btn-md">Continuer</button>
</div>
</center>
<center>
<div class="playerClavierPhono">
<div class="playerClavier" id="clavier">
<!-- BOUTONS + - INACTIFS DANS LE PLAYER
<div class="control-clavier">
<img src="../static/png/moins.png" id="btn-min" title="réduire le clavier"/>
<img src="../static/png/plus.png" id="btn-max" title="agrandir le clavier"/>
</div> -->
<!-- FR Claviers A. DO -->
<embed id="svgFond" src="../static/svg/00.svg" class="superposeBack">
<img id="pngPochoir" class="superpose">
<img id="pngCalq" class="superpose">
<embed id="svgClick" src="../static/svg/00-click.svg" class="superpose">
<img src="" class="popUpProfile" id="popDiv"/>
<div class="doAide" style="right:0px">
<span id="aidbtn" onclick="toggleAides()" class="glyphicon glyphicon-question-sign" aria-hidden="true" title="Afficher/masquer les popups d'aide"></span>
</div>
<!-- EN Clavier PronSci UK -->
<embed id="svgEnPronSciBr" style="display: none;" src="../static/svg/en_pronsci-br.svg" class="superpose">
<!-- EN Clavier ALeM -->
<embed id="svgEnAlem" style="display: none;" src="../static/svg/alem-en.svg" class="superpose">
<img id="pngPochoirEnAlem" style="display: none;" src="../static/png/pochoir-en.png" class="superpose">
<img id="pngCalqEnAlemLignes" style="display: none;" src="../static/png/pochoir-en-lignes.png" class="superpose">
<embed id="svgClickEnAlem" style="display: none;" src="../static/svg/alem-en_click.svg" class="superpose">
</div>
</div>
</center>
<div class="zoneParam">
<div class="left">
<div class="fenetre param">
<select id="selectPanneau" onchange="selectPanneau(this.value)"></select>
</div>
<div id="doCalques" class="doCalques">
<input type="image" class="btn-calq" src="../static/png/btn_rien.png" title="Panneau vierge" id="btn-rien" />
<input type="image" class="btn-calq" src="../static/png/btn_vsm.png" title="Voisements et position langue" id="btn-vsm" />
<input type="image" class="btn-calq btnfocus" src="../static/png/btn_bch.png" title="Formes de bouche" id="btn-bch" />
<input type="image" class="btn-calq" src="../static/png/btn_cpsg.png" title="Coupes sagitales" id="btn-cpsg" />
</div>
</div>
</div>
</div>
{% include 'footer.html' %}
<script type="text/javascript" src="{% static 'languages/languages.js' %}"></script>
<script type="text/javascript" src="{% static 'js/clavierCalques.js' %}"></script>
<script type="text/javascript" src="{% static 'js/popupAide.js' %}"></script>
<script type="text/javascript" src="{% static 'js/id2class.js' %}"></script>
<script type="text/javascript" src="{% static 'js/playerPhono.js' %}"></script>
<script type="text/javascript" src="{% static 'js/playerPhonoHome.js' %}"></script>
</html>
......@@ -16,6 +16,14 @@
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
</head>
<body>
<!-- RÉCUPÉRATION DE LA SÉRIE À CHARGER -->
<script type="text/javascript">
var serieContent = JSON.parse("{{serieContent|escapejs}}");
console.log(serieContent);
</script>
<!---------------------------------------->
<div class="preprod" style="display: none;">PREPROD</div>
<div class="playerHeader">
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment