nova-ui.html - delefme-covid-tracability/main - Gitiles

 <!DOCTYPE html>
 <html lang="ca">
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <!-- Load Jquery -->
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

         <script>
             // Check if user is signed in
             var api_url = "https://covid-tracability-backend-dev.sandbox.avm99963.com/api/v1/";
             fetch(api_url + "isSignedIn")
                 .then(response => response.json())
                 .then(data => {
                     if (!data.payload.signedIn) {
                         console.log("Not signed in!");
                         return fetch(api_url + "getAuthUrl");
                     }
                 })
                 .then(response => response.json())
                 .then(data => {
                     // TODO: redirect here
                     alert(data.payload.url);
                 });
         </script>

         <style>
             body {
                 background-color: lightgray;
             }

             #outter-container {
                 margin: 40px 20px;
             }

             #inner-container {
                 width: 80%;
                 background-color: white;
                 padding: 20px 50px;
                 margin: 0 auto;
             }

             .label, .final {
                 font-size: 36px;
             }

             .label {
                 padding-top: 50px;
             }

             .final {
                 color: gray;
             }

             section {
                 padding: 10px 0;
             }

             .container {
                 /* flexbox setup */
                 display: -webkit-flex;
                 -webkit-flex-direction: row;

                 display: flex;
                 flex-direction: row;
                 flex-wrap: wrap;

                 justify-content: center;
                 align-items : center;

                 height: 75vh;
                 overflow-y: auto;
                 margin: 50px 0;
             }

             .button {
                 border: solid 2px #26bdff;
                 color: black;
                 font-size: 5vw;

                 flex: 1 0 20%;
                 margin: 20px;
                 padding: 40px 20px;

                 vertical-align: middle;
                 text-align: center;
             }

             .selected {
                 background-color: #c3ddff;
             }

             #subject-container .button {
                 text-align: left;
                 flex: 1 0 20%;
                 height: auto;
             }

             .current-subject .title {
                 font-size: 18px;
             }
             .current-subject .subtitle {
                 font-size: 14px;
             }

             #send-button {
                 font-size: 48px;
                 width: 80%;
                 margin: 50px auto;
                 display: block;
                 padding: 50px 30px;
                 background-color: #26bdff;
                 color: white;
             }
         </style>
     </head>

     <body>
         <div id="outter-container">
             <div id="inner-container">
                 <section id="subject-section">
                     <div id="subject-container" class="container">
                         <div class="current-subject button" id="subject-1" onclick="js:clickButton(this.parentNode.id, this.id)">
                             <div class="title">Àlgebra Lineal</div>
                             <div class="subtitle">Aula 001</div>
                             <div class="subtitle">9.00 - 10.00</div>
                         </div>
                         <div class="current-subject button" id="subject-2">
                             <div class="title">Àlgebra Lineal</div>
                             <div class="subtitle">Aula 001</div>
                             <div class="subtitle">9.00 - 10.00</div>
                         </div>
                         <div class="current-subject button" id="subject-3">
                             <div class="title">Àlgebra Lineal</div>
                             <div class="subtitle">Aula 001</div>
                             <div class="subtitle">9.00 - 10.00</div>
                         </div>
                         <div class="current-subject button" id="subject-4">
                             <div class="title">Àlgebra Lineal</div>
                             <div class="subtitle">Aula 001</div>
                             <div class="subtitle">9.00 - 10.00</div>
                         </div>
                     </div>
                     <div class="showhide">
                         <span id="subject-label" class="label">Assignatura (Aula):</span>
                         <span id="subject-final" class="final"></span>
                     </div>
                 </section>
                 <section id="number-section">
                     <div id="number-container" class="container">
                         <div class="number button" id="number-1">1</div>
                         <div class="number button" id="number-2">2</div>
                         <div class="number button" id="number-3">3</div>
                         <div class="number button" id="number-4">4</div>
                         <div class="number button" id="number-5">5</div>
                         <div class="number button" id="number-6">6</div>
                         <div class="number button" id="number-7">7</div>
                         <div class="number button" id="number-8">8</div>
                         <div class="number button" id="number-9">9</div>
                         <div class="number button" id="number-10">10</div>
                     </div>
                     <div class="showhide">
                         <span id="number-label" class="label">Número de seient:</span>
                         <span id="number-final" class="final"></span>
                     </div>
                 </section>
                 <section id="letter-section">
                     <div id="letter-container" class="container">
                         <div class="letter button" id="letter-A">A</div>
                         <div class="letter button" id="letter-B">B</div>
                         <div class="letter button" id="letter-C">C</div>
                         <div class="letter button" id="letter-D">D</div>
                         <div class="letter button" id="letter-E">E</div>
                         <div class="letter button" id="letter-F">F</div>
                         <div class="letter button" id="letter-G">G</div>
                         <div class="letter button" id="letter-H">H</div>
                         <div class="letter button" id="letter-I">I</div>
                         <div class="letter button" id="letter-J">J</div>
                         <div class="letter button" id="letter-K">K</div>
                         <div class="letter button" id="letter-L">L</div>
                     </div>
                     <div class="showhide">
                         <span id="letter-label" class="label">Lletra de seient:</span>
                         <span id="letter-final" class="final"></span>
                     </div>
                 </section>
                 <section id="date-section">
                     <div class="showhide">
                         <span id="date-label" class="label">Data:</span>
                         <span id="date-final" class="final">16/01/2020</span>
                     </div>
                 </section>
                 <section id="hour-section">
                     <div class="showhide">
                         <span id="hour-label" class="label">Hora:</span>
                         <span id="hour-final" class="final">09.00 - 10.00</span>
                     </div>
                 </section>
                 <button id="send-button">
                     <span>Anar al formulari</span>
                 </button>
             </div>
         </div>

         <script>
             var subjects_texts = {
                 "subject-1": "Àlgebra",
                 "subject-2": "Càlcul I",
                 "subject-3": "Topologia",
                 "subject-4": "Informàtica"
             };

             function sendForm(data) {
                 // Add subject to user
                 fetch(api_url + "addUserSubject", {
                   "method": "POST",
                   "body": JSON.stringify({
                             subject: data["subject"]
                           }),
                   "mode": "cors",
                   "credentials": "include"
                 })
                 .then(res => res.json())
                 .then(json => {
                   console.log("Subject added to user: ", json);
                   // TODO: Redirect to Google Forms
                   var formulari_link = "https://docs.google.com/forms/d/e/1FAIpQLSfT9o287VqLyhwR8LPdloAQWhuqCgA3NfdhgP5vb9_sVQHL-g/viewform?entry.1063142948=S03&entry.2115504093=2020-09-14&entry.1749141911=9:00&entry.1827359679=10:00&entry.208184485=Columna+3&entry.1600275159=[Autogenerat+per+delefme/covid-tracability]";
                   window.location.href = formulari_link;
                 });
              }

              document.getElementById("send-button").addEventListener('click', function (el) {
                 // TODO: emplenar això amb informació real
                 sendForm({
                     "aula": "001",
                     "subject": 1,
                     "data": "16/01/2020",
                     "hora-inici": "9:00",
                     "hora-final": "10:00",
                     "seient": "7D"
                 });
              });
         </script>

         <script>
             var elements = document.getElementsByClassName("button");
             Array.from(elements).forEach(function(element) {
                 element.addEventListener('click', clickButton);
                 element.parent = element.parentNode.id;
                 console.log(element.id);
             });

             function clickButton(element) {
                 var parent = element.currentTarget.parent;
                 var id = element.currentTarget.id;
                 var final_text = (id.split("-")[0] == "subject" ? subjects_texts[id] : id.split("-")[1]);

                 console.log(parent);
                 console.log(id);

                 if (parent == "subject-container") {
                     // Canvi de background del button
                     $(".current-subject").css("background-color", "white");
                     $("#" + id).css("background-color", "#c3ddff");
                     // Canvi del text al final
                     $("#" + parent).parent().find(".final").html(final_text);
                     // Canvi JSON
                     // TODO
                     // Anchor següent pregunta
                     document.getElementById("subject-label").scrollIntoView();
                 } else if (parent == "number-container") {
                     // Canvi de background del button
                     $(".number").css("background-color", "white");
                     $("#" + id).css("background-color", "#c3ddff");
                     // Canvi del text al final
                     $("#" + parent).parent().find(".final").html(final_text);
                     // Canvi JSON
                     // TODO
                     // Anchor següent pregunta
                     document.getElementById("number-label").scrollIntoView();
                 } else if (parent == "letter-container") {
                     // Canvi de background del button
                     $(".letter").css("background-color", "white");
                     $("#" + id).css("background-color", "#c3ddff");
                     // Canvi del text al final
                     $("#" + parent).parent().find(".final").html(final_text);
                     // Canvi JSON
                     // TODO
                     // Anchor següent pregunta
                     document.getElementById("letter-label").scrollIntoView();
                 }
             }
         </script>
     </body>
 </html>
	<!DOCTYPE html>
	<html lang="ca">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- Load Jquery -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

	<script>
	// Check if user is signed in
	var api_url = "https://covid-tracability-backend-dev.sandbox.avm99963.com/api/v1/";
	fetch(api_url + "isSignedIn")
	.then(response => response.json())
	.then(data => {
	if (!data.payload.signedIn) {
	console.log("Not signed in!");
	return fetch(api_url + "getAuthUrl");
	}
	})
	.then(response => response.json())
	.then(data => {
	// TODO: redirect here
	alert(data.payload.url);
	});
	</script>

	<style>
	body {
	background-color: lightgray;
	}

	#outter-container {
	margin: 40px 20px;
	}

	#inner-container {
	width: 80%;
	background-color: white;
	padding: 20px 50px;
	margin: 0 auto;
	}

	.label, .final {
	font-size: 36px;
	}

	.label {
	padding-top: 50px;
	}

	.final {
	color: gray;
	}

	section {
	padding: 10px 0;
	}

	.container {
	/* flexbox setup */
	display: -webkit-flex;
	-webkit-flex-direction: row;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;

	justify-content: center;
	align-items : center;

	height: 75vh;
	overflow-y: auto;
	margin: 50px 0;
	}

	.button {
	border: solid 2px #26bdff;
	color: black;
	font-size: 5vw;

	flex: 1 0 20%;
	margin: 20px;
	padding: 40px 20px;

	vertical-align: middle;
	text-align: center;
	}

	.selected {
	background-color: #c3ddff;
	}

	#subject-container .button {
	text-align: left;
	flex: 1 0 20%;
	height: auto;
	}

	.current-subject .title {
	font-size: 18px;
	}
	.current-subject .subtitle {
	font-size: 14px;
	}

	#send-button {
	font-size: 48px;
	width: 80%;
	margin: 50px auto;
	display: block;
	padding: 50px 30px;
	background-color: #26bdff;
	color: white;
	}
	</style>
	</head>

	<body>
	<div id="outter-container">
	<div id="inner-container">
	<section id="subject-section">
	<div id="subject-container" class="container">
	<div class="current-subject button" id="subject-1" onclick="js:clickButton(this.parentNode.id, this.id)">
	<div class="title">Àlgebra Lineal</div>
	<div class="subtitle">Aula 001</div>
	<div class="subtitle">9.00 - 10.00</div>
	</div>
	<div class="current-subject button" id="subject-2">
	<div class="title">Àlgebra Lineal</div>
	<div class="subtitle">Aula 001</div>
	<div class="subtitle">9.00 - 10.00</div>
	</div>
	<div class="current-subject button" id="subject-3">
	<div class="title">Àlgebra Lineal</div>
	<div class="subtitle">Aula 001</div>
	<div class="subtitle">9.00 - 10.00</div>
	</div>
	<div class="current-subject button" id="subject-4">
	<div class="title">Àlgebra Lineal</div>
	<div class="subtitle">Aula 001</div>
	<div class="subtitle">9.00 - 10.00</div>
	</div>
	</div>
	<div class="showhide">
	<span id="subject-label" class="label">Assignatura (Aula):</span>
	<span id="subject-final" class="final"></span>
	</div>
	</section>
	<section id="number-section">
	<div id="number-container" class="container">
	<div class="number button" id="number-1">1</div>
	<div class="number button" id="number-2">2</div>
	<div class="number button" id="number-3">3</div>
	<div class="number button" id="number-4">4</div>
	<div class="number button" id="number-5">5</div>
	<div class="number button" id="number-6">6</div>
	<div class="number button" id="number-7">7</div>
	<div class="number button" id="number-8">8</div>
	<div class="number button" id="number-9">9</div>
	<div class="number button" id="number-10">10</div>
	</div>
	<div class="showhide">
	<span id="number-label" class="label">Número de seient:</span>
	<span id="number-final" class="final"></span>
	</div>
	</section>
	<section id="letter-section">
	<div id="letter-container" class="container">
	<div class="letter button" id="letter-A">A</div>
	<div class="letter button" id="letter-B">B</div>
	<div class="letter button" id="letter-C">C</div>
	<div class="letter button" id="letter-D">D</div>
	<div class="letter button" id="letter-E">E</div>
	<div class="letter button" id="letter-F">F</div>
	<div class="letter button" id="letter-G">G</div>
	<div class="letter button" id="letter-H">H</div>
	<div class="letter button" id="letter-I">I</div>
	<div class="letter button" id="letter-J">J</div>
	<div class="letter button" id="letter-K">K</div>
	<div class="letter button" id="letter-L">L</div>
	</div>
	<div class="showhide">
	<span id="letter-label" class="label">Lletra de seient:</span>
	<span id="letter-final" class="final"></span>
	</div>
	</section>
	<section id="date-section">
	<div class="showhide">
	<span id="date-label" class="label">Data:</span>
	<span id="date-final" class="final">16/01/2020</span>
	</div>
	</section>
	<section id="hour-section">
	<div class="showhide">
	<span id="hour-label" class="label">Hora:</span>
	<span id="hour-final" class="final">09.00 - 10.00</span>
	</div>
	</section>
	<button id="send-button">
	<span>Anar al formulari</span>
	</button>
	</div>
	</div>

	<script>
	var subjects_texts = {
	"subject-1": "Àlgebra",
	"subject-2": "Càlcul I",
	"subject-3": "Topologia",
	"subject-4": "Informàtica"
	};

	function sendForm(data) {
	// Add subject to user
	fetch(api_url + "addUserSubject", {
	"method": "POST",
	"body": JSON.stringify({
	subject: data["subject"]
	}),
	"mode": "cors",
	"credentials": "include"
	})
	.then(res => res.json())
	.then(json => {
	console.log("Subject added to user: ", json);
	// TODO: Redirect to Google Forms
	var formulari_link = "https://docs.google.com/forms/d/e/1FAIpQLSfT9o287VqLyhwR8LPdloAQWhuqCgA3NfdhgP5vb9_sVQHL-g/viewform?entry.1063142948=S03&entry.2115504093=2020-09-14&entry.1749141911=9:00&entry.1827359679=10:00&entry.208184485=Columna+3&entry.1600275159=[Autogenerat+per+delefme/covid-tracability]";
	window.location.href = formulari_link;
	});
	}

	document.getElementById("send-button").addEventListener('click', function (el) {
	// TODO: emplenar això amb informació real
	sendForm({
	"aula": "001",
	"subject": 1,
	"data": "16/01/2020",
	"hora-inici": "9:00",
	"hora-final": "10:00",
	"seient": "7D"
	});
	});
	</script>

	<script>
	var elements = document.getElementsByClassName("button");
	Array.from(elements).forEach(function(element) {
	element.addEventListener('click', clickButton);
	element.parent = element.parentNode.id;
	console.log(element.id);
	});

	function clickButton(element) {
	var parent = element.currentTarget.parent;
	var id = element.currentTarget.id;
	var final_text = (id.split("-")[0] == "subject" ? subjects_texts[id] : id.split("-")[1]);

	console.log(parent);
	console.log(id);

	if (parent == "subject-container") {
	// Canvi de background del button
	$(".current-subject").css("background-color", "white");
	$("#" + id).css("background-color", "#c3ddff");
	// Canvi del text al final
	$("#" + parent).parent().find(".final").html(final_text);
	// Canvi JSON
	// TODO
	// Anchor següent pregunta
	document.getElementById("subject-label").scrollIntoView();
	} else if (parent == "number-container") {
	// Canvi de background del button
	$(".number").css("background-color", "white");
	$("#" + id).css("background-color", "#c3ddff");
	// Canvi del text al final
	$("#" + parent).parent().find(".final").html(final_text);
	// Canvi JSON
	// TODO
	// Anchor següent pregunta
	document.getElementById("number-label").scrollIntoView();
	} else if (parent == "letter-container") {
	// Canvi de background del button
	$(".letter").css("background-color", "white");
	$("#" + id).css("background-color", "#c3ddff");
	// Canvi del text al final
	$("#" + parent).parent().find(".final").html(final_text);
	// Canvi JSON
	// TODO
	// Anchor següent pregunta
	document.getElementById("letter-label").scrollIntoView();
	}
	}
	</script>
	</body>
	</html>