Skip to content

GitLab

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

premier proto Home avec 2 séries

parent 199e02f3
Expand all Hide whitespace changes
Inline Side-by-side
clavier/views.py
View file @ cf8d9617
......@@ -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()
......
clavierPhono/urls.py
View file @ cf8d9617
......@@ -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))
......
static/js/clavierCalques.js
View file @ cf8d9617
......@@ -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 + '%');
});
}
static/js/playerPhono.js
View file @ cf8d9617
......@@ -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() {
......
static/js/playerPhonoHome.js 0 → 100644
View file @ cf8d9617
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
static/languages/languages.js
View file @ cf8d9617
......@@ -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
static/styles/bootstrap3.3.7.min.css deleted 100644 → 0
View file @ 199e02f3
This diff is collapsed.
static/styles/player.css
View file @ cf8d9617
......@@ -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;
......
templates/playerHome.html
View file @ cf8d9617
......@@ -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>
templates/playerPhono.html
View file @ cf8d9617
......@@ -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