Skip to content

GitLab

Commit b37bca69 authored by Sylvanus Konan's avatar Sylvanus Konan
Browse files

Merge branch 'M2-2022-JS' into 'M2-2022-HW' 

Merge JS branch into HW

See merge request !94
parents e5b9300a bf8e2e8d
Hide whitespace changes
Inline Side-by-side
PolygonMap.html 0 → 100644
View file @ b37bca69
<head>
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""
/>
<script
src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""
></script>
<script
type="text/javascript"
src="https://code.jquery.com/jquery-3.3.1.min.js"
></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.js"></script>
<style type="text/css">
#map {
height: 600px;
width: 600px;
}
</style>
</head>
<body>
<h3>
Entourez le campus de Beaulieu en cliquant sur le premier bouton en haut à
droite.
</h3>
<div id="imap">
<div id="map">
<!-- Ici s'affichera la carte -->
</div>
</div>
</body>
<script type="text/javascript">
// Coordonnées du campus de Beaulieu
var lat = 48.11517;
var lon = -1.637434;
// Création de la carte
var macarte = L.map("map").setView([lat, lon], 13);
// Le theme de la carte
var theme = "https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png";
// Construction de la tuile
L.tileLayer(theme, {
minZoom: 1,
maxZoom: 20,
}).addTo(macarte);
// Inialisation de la variable pour stocker les polygones modifiables
var editableLayers = new L.FeatureGroup();
macarte.addLayer(editableLayers);
var drawPluginOptions = {
position: "topright",
draw: {
polygon: {
allowIntersection: true,
},
polyline: true,
circle: false,
rectangle: false,
marker: false,
},
};
var drawControl = new L.Control.Draw(drawPluginOptions);
macarte.addControl(drawControl);
var editableLayers = new L.FeatureGroup();
macarte.addLayer(editableLayers);
macarte.on("draw:created", function (e) {
var type = e.layerType,
layer = e.layer;
editableLayers.addLayer(layer);
});
</script>
pointMap.html 0 → 100644
View file @ b37bca69
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<script type='text/javascript' src='https://code.jquery.com/jquery-3.3.1.min.js'></script>
<style type="text/css">
#map{
height:600px;
width: 600px;
}
</style>
</head>
<script type="text/javascript">
// Le theme de la carte
var theme = 'https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png';
// On rentre les coordonnées de Rennes (ici j'ai pris l'ISTIC)
var lat = 48.115170;
var lon = -1.637434;
function initMap(){
// Création de la carte avec les coordonnées et le niveau de zoom, de 1 à 20
macarte = L.map('map').setView([lat, lon], 13);
L.tileLayer(theme, {
minZoom: 1,
maxZoom: 20
}).addTo(macarte);
macarte.on('click', onMapClick);
}
// Fonction pour ajouter des marqueurs
var marker =null ;
function onMapClick(e) {
if (marker !== null) {
marker.remove();
}
marker = L.marker(e.latlng).addTo(macarte)
var geojson = marker.toGeoJSON();
console.log(geojson);
json = JSON.stringify(geojson);
}
$(document).ready(function(){
initMap();
});
</script>
<body>
<h3> Veuillez indiquer sur la carte où se situe l'ISTIC</h3>
<div id="imap">
<div id="map">
<!-- Ici s'affichera la carte -->
</div>
</div>
</body>
\ No newline at end of file
projects/Headwork/Classify.html 0 → 100644
View file @ b37bca69
<html>
<body>
<center>
<form name ="classifyForm">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSewzK7rVoomeWrNcMEeCE-P94h3yCHGsNVw9BJMkQr8NOtskQ/viewform?embedded=true" width="700" height="800" frameborder="0" marginheight="0" marginwidth="0">Chargement…</iframe>
</form>
</center>
</body>
</html>
\ No newline at end of file
projects/Headwork/ClassifyForm.html 0 → 100644
View file @ b37bca69
<center>
<h2>Formulaire</h2>
<form name="ClassifyForm">
<fieldset >
<legend>Say if the following todos are professional or personal :</legend>
<table>
<tr>
<th></th>
<th>
Professional
</th>
<th>
Personal
</th>
</tr>
<tr>
<td>
First Todo
</td>
<td>
<center>
<input type="radio" name="category1" id="1" value="professional"/>
<label for="1"></label>
</center>
</td>
<td>
<center>
<input type="radio" name="category1" id="2" value="personal"/>
<label for="2"></label>
<center>
</td>
</tr>
<tr>
<td>
Second Todo
</td>
<td>
<center>
<input type="radio" name="category2" id="1" value="professional"/>
<label for="1"></label>
<center>
</td>
<td>
<center>
<input type="radio" name="category2" id="2" value="personal"/>
<label for="2"></label>
<center>
</td>
</tr>
<tr>
<td>
Third Todo
</td>
<td>
<center>
<input type="radio" name="category3" id="1" value="professional"/>
<label for="1"></label>
<center>
</td>
<td>
<center>
<input type="radio" name="category3" id="2" value="personal"/>
<label for="2"></label>
<center>
</td>
</tr>
</table>
</fieldset>
</form>
<button>Submit</button>
</center>
<h2>Récupération des données du formulaire</h2>
<div id="json">
<span></span>
</div>
<script type="text/javascript">
/* escape = function (str) {
return str
.replace(/[\\]/g, '\\\\')
.replace(/[\"]/g, '\\\"')
.replace(/[\/]/g, '\\/')
.replace(/[\b]/g, '\\b')
.replace(/[\f]/g, '\\f')
.replace(/[\n]/g, '\\n')
.replace(/[\r]/g, '\\r')
.replace(/[\t]/g, '\\t');
};*/
//Le bouton qui va déclencher le script js
let btnSubmit = document.querySelector("button");
btnSubmit.addEventListener("click", () => {
//check si le formulaire a été correctement rempli
//on crée un formData
let fd = new FormData();
//on réccupère les données du formulaire
let category1 = document.querySelectorAll("input[name = 'category1']");
for(i=0; i<category1.length; i++){
if(category1[i].checked){
Classement1 = category1[i].value;
}
}
let category2 = document.querySelectorAll("input[name = 'category2']");
for(i=0; i<category2.length; i++){
if(category2[i].checked){
Classement2 = category2[i].value;
}
}
let category3 = document.querySelectorAll("input[name = 'category3']");
for(i=0; i<category3.length; i++){
if(category3[i].checked){
Classement3 = category3[i].value;
}
}
//on rempli notre FormData
fd.append("Classement1", Classement1);
fd.append("Classement2", Classement2);
fd.append("Classement3", Classement3);
console.log(Array.from(fd));
let JSONString = JSON.stringify(Array.from(fd));
console.log(JSONString);
//let EscapedJSONString = escape(JSONString);
// console.log(EscapedJSONString);
document.querySelector("#json span").textContent = JSONString;
})
</script>
\ No newline at end of file
projects/Headwork/Decompose.html 0 → 100644
View file @ b37bca69
<html>
<body>
<center>
<form name ="decomposeForm">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfK_fKmZ6SppX1cDbjhYYbm1Lb7yLknLY0_s4BZ8Pj729GN7Q/viewform?embedded=true" width="700" height="800" frameborder="0" marginheight="0" marginwidth="0">Chargement…</iframe>
</form>
</center>
</body>
</html>
projects/Headwork/Note.html 0 → 100644
View file @ b37bca69
<html>
<body>
<center>
<form name ="noteForm">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSc753zz7elSuXskP27jbwHHNs9SQ9V2aS1VUwTlaGduwa2TMQ/viewform?embedded=true" width="700" height="800" frameborder="0" marginheight="0" marginwidth="0">Chargement…</iframe>
</form>
</center>
</body>
</html>
projects/Headwork/Notek.html 0 → 100644
View file @ b37bca69
<html>
<body>
<center>
<form name ="NotekForm">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfADyOaqYuN65ERzUEapA1ejKJRO20S82qI9SBMVZNl-a-gqA/viewform?embedded=true" width="700" height="800" frameborder="0" marginheight="0" marginwidth="0">Chargement…</iframe>
</form>
</center>
</body>
</html>
projects/Headwork/Order.html 0 → 100644
View file @ b37bca69
<html>
<body>
<center>
<form name ="orderForm">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSeTm76jxf9y1ZShrKUUGzXXJu2D05zHwBUcReuJuEuv5W4t3w/viewform?embedded=true" width="700" height="800" frameborder="0" marginheight="0" marginwidth="0">Chargement…</iframe>
</form>
</center>
</body>
</html>
projects/Headwork/SoundForm.html 0 → 100644
View file @ b37bca69
<center>
<h2>Formulaire avec lecture du son par la balise audio</h2>
<form name="noteForm">
<fieldset >
<legend>Quel son entendez-vous ?</legend>
<audio controls>
<source src="https://lasonotheque.org/UPLOAD/mp3/1891.mp3?v=d" type="audio/mp3">
<!-- format supported : wav, mp3 and ogg -->
Your browser does not support the audio tag.
</audio>
<br>
<input type="radio" name="sound" id="chien" value="chien"/>
<label for="chien">chien</label>
<input type="radio" name="sound" id="chat" value="chat"/>
<label for="chat">chat</label>
<input type="radio" name="sound" id="oiseau" value="oiseau"/>
<label for="oiseau">oiseau</label>
<input type="radio" name="sound" id="autre" value="autre"/>
<label for="autre">aucun de ceux proposés</label>
</fieldset>
</form>
<button id="submit">Submit</button>
</center>
<h2>Récupération des données du formulaire</h2>
<div id="json">
<span></span>
</div>
<script type="text/javascript">
let btnSubmit = document.querySelector("#submit");
btnSubmit.addEventListener("click", () => {
//check si le formulaire a été correctement rempli
let fd = new FormData();
let sound = document.querySelectorAll("input[name = 'sound']");
for(i=0; i<sound.length; i++){
if(sound[i].checked){
soundHear = sound[i].value;
}
}
fd.append("soundHear", soundHear);
let JSONString = JSON.stringify(Array.from(fd));
document.querySelector("#json span").textContent = JSONString;
})
</script>
\ No newline at end of file
projects/Headwork/TodosForm.html 0 → 100644
View file @ b37bca69
<center>
<h2>Formulaire</h2>
<form name="noteForm">
<fieldset >
<legend>Write your 10 todos you find the most important in your list (one per line) :</legend>
<textarea name="commentaire" id="commentaire" cols="30" rows="10"></textarea>
</fieldset>
</form>
<button>Submit</button>
</center>
<h2>Récupération des données du formulaire</h2>
<div id="json">
<span></span>
</div>
<script type="text/javascript">
escape = function (str) {
return str
.replace(/[\\]/g, '\\\\')
.replace(/[\"]/g, '\\\"')
.replace(/[\/]/g, '\\/')
.replace(/[\b]/g, '\\b')
.replace(/[\f]/g, '\\f')
.replace(/[\n]/g, '\\n')
.replace(/[\r]/g, '\\r')
.replace(/[\t]/g, '\\t');
};
//Le bouton qui va déclencher le script js
let btnSubmit = document.querySelector("button");
btnSubmit.addEventListener("click", () => {
//check si le formulaire a été correctement rempli
//on crée un formData
let fd = new FormData();
//on rempli notre FormData
fd.append("Commentaire", document.querySelector("#commentaire").value);
console.log(Array.from(fd));
let JSONString = JSON.stringify(Array.from(fd));
console.log(JSONString);
let EscapedJSONString = escape(JSONString);
console.log(EscapedJSONString);
document.querySelector("#json span").textContent = JSON.stringify(Array.from(fd));;
})
</script>
\ No newline at end of file
projects/Headwork/TreeForm.html 0 → 100644
View file @ b37bca69
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<style type="text/css">
#backend ul{
list-style: none;
}
ul li ul {
border-left: 1px solid black;
}
ul li {
position: relative;
}
ul ul li:before{
content: '';
position: absolute;
top: 13px;
left: -40px;
background: black;
width: 40px;
height: 1px;
}
.closeIT{
background: red;
color: white;
padding: 0.3rem 0.5rem;
cursor: pointer;
}
input{
margin: 5px;
}
</style>
</head>
<body style="padding: 6px;">
<h2>Décomposer ce todo en plusieurs tâches distinctes </h2>
<button id="createParent">Ajouter une tâche</button>
<ul id="backend"></ul>
<button id="submit">Submit</button>
<h2>Récupération des données du formulaire</h2>
<div id="json">
<span></span>
</div>
<script type="text/javascript">
let createparent = document.getElementById('createParent');
let backend = document.getElementById('backend');
let cptTask = 0; //compteur pour differencier les inputs
let input = new Array(); //tableau qui va contenir tous les inputs
let btnAddSubTask = new Array(); //tableau qui va contenir tous les boutons pour ajouter des enfants
createparent.addEventListener("click", function(){
cptTask +=1;
let content = $(`<li>
<input type="text" class="input`+cptTask+`" placeholder="Nom de la tâche">
<button class="createChild" id="id`+cptTask+`">Ajouter une sous-tâche</button>
<span class="closeIT">X</span>
</li>`);
content.addClass(cptTask);
content.appendTo(backend);
btnAddSubTask.push(document.getElementById('id'+cptTask));
btnAddSubTask[cptTask-1].disabled = true;
input.push(document.querySelector('.input'+cptTask));
for(var i=0; i<cptTask; i++){
//Pour tous les inputs, on va verifier chaque changement de texte pour activer ou desactiver le bouton
input[i].addEventListener("change", function() {
if (document.querySelector('.input'+i).value === "") {
document.getElementById('id'+i).disabled = true;
} else {
document.getElementById('id'+i).disabled = false;
}
});
}
});
backend.addEventListener('click',function(e){
if(e.target.classList == 'closeIT'){
closeBTN = e.target;
li = closeBTN.parentElement;
/*pour supprimer ul si c'est une sous tache*/
let parent = li.parentElement;
if(li.parentElement.nodeName == 'UL' && parent.parentElement.nodeName == 'LI'){
li = parent;
}
li.remove();
}
if(e.target.classList == 'createChild'){
createChildBTN = e.target;
li = createChildBTN.parentElement;
let content = $('<ul><li><input type="text" placeholder="Nom de la sous-tâche"><span class="closeIT">X</span></li></ul>');
content.appendTo(li);
}
})
let btnSubmit = document.getElementById("submit");
btnSubmit.addEventListener("click", () => {
//on crée un tableau pour la structure JSON
let fd = new Array();
let cptOrderTask = 0;
let cptOrderSubtask = 0;
let parent = "";
//on rempli notre tableau
for(var i=0, li; li=backend.childNodes[i]; i++) {
if(li.tagName=='LI'){
// traitement des li (taches)
for(var j=0, ul; ul=li.childNodes[j]; j++){
if(ul.tagName=='INPUT'){
//on recupere ce qui est ecrit dans l'input de chaque tache
tache = ul.value;
if(tache != ""){
console.log("parent de la tache", ul.parentElement)
parent = "task"+i;
cptOrderTask += 1;
cptOrderSubtask = 0;
fd.push([parent, tache, null, cptOrderTask]);
}
}
else if(ul.tagName=='UL'){
li2 = ul.childNodes[0];
if(tache != "" && li2.childNodes[0].value != ""){
cptOrderSubtask += 1;
fd.push(["subtask"+i +j, li2.childNodes[0].value, parent, cptOrderSubtask]);
}
}
}
}
}
let JSONString = JSON.stringify(Array.from(fd));
document.querySelector("#json span").textContent = JSONString;
})
</script>
</body>
</html>
\ No newline at end of file
projects/Headwork/enumerate.html 0 → 100644
View file @ b37bca69
<html>
<body>
<center>
<form name ="todosform">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSeLOPGQDuhLKOXXr_Jexd3ebBHJfdfNMsRtJsUO-wuqgEIHLw/viewform?embedded=true" width="700" height="800" frameborder="0" marginheight="0" marginwidth="0">Chargement…</iframe>
</form>
</center>
</body>
</html>
\ No newline at end of file