UI més bonica amb Bulma
diff --git a/nova-ui.html b/nova-ui.html
index 6a357e2..9100c18 100644
--- a/nova-ui.html
+++ b/nova-ui.html
@@ -1,11 +1,155 @@
<!DOCTYPE html>
+
<html lang="ca">
<head>
<meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <!-- Load Jquery -->
+ <meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css">
+ </head>
+ <body>
+ <style>
+ .buttons.grid {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+
+ justify-content: center;
+ align-items : center;
+ }
+
+ .buttons.grid .button {
+ flex: 1 0 20%;
+ margin: 10px;
+ padding: 40px 20px;
+ }
+
+ .buttons.grid .complex-button {
+ flex: 1 0 20%;
+ margin: 15px 10px;
+ }
+ </style>
+ <nav class="navbar is-link">
+ <div class="navbar-brand">
+ <div class="navbar-item has-text-weight-bold">Traçabilitat DAFME</div>
+ </div>
+ </nav>
+
+ <section id="section-1" class="section">
+ <div class="field has-addons">
+ <p class="control">
+ <button class="button"><</button>
+ </p>
+ <p class="control">
+ <input type="date" class="button">
+ </p>
+ <p class="control">
+ <button class="button">></button>
+ </p>
+ </div>
+ <div class="field has-addons">
+ <p class="control">
+ <button class="button"><</button>
+ </p>
+ <p class="control">
+ <input type="button" class="button" value="08:00 - 08:30">
+ </p>
+ <p class="control">
+ <button class="button">></button>
+ </p>
+ </div><br>
+
+ <div id="subject-container" class="grid buttons">
+ <div class="message complex-button" id="subject-1">
+ <div class="message-header">Àlgebra lineal</div>
+ <div class="message-body">
+ <div>Aula 001</div>
+ <div>08:00 - 09:00</div>
+ </div>
+ </div>
+ <div class="message complex-button" id="subject-2">
+ <div class="message-header">Àlgebra lineal</div>
+ <div class="message-body">
+ <div>Aula 001</div>
+ <div>08:00 - 09:00</div>
+ </div>
+ </div>
+ <div class="message complex-button" id="subject-3">
+ <div class="message-header">Àlgebra lineal</div>
+ <div class="message-body">
+ <div>Aula 001</div>
+ <div>08:00 - 09:00</div>
+ </div>
+ </div>
+ <div class="message complex-button" id="subject-4">
+ <div class="message-header">Àlgebra lineal</div>
+ <div class="message-body">
+ <div>Aula 001</div>
+ <div>08:00 - 09:00</div>
+ </div>
+ </div>
+ </div><br>
+
+ </section>
+
+ <section id="section-2" class="section" style="display: none;">
+
+ <div id="letter-container" class="buttons grid">
+ <button class="button" id="letter-A">A</button>
+ <button class="button" id="letter-B">B</button>
+ <button class="button" id="letter-C">C</button>
+ <button class="button" id="letter-D">D</button>
+ <button class="button" id="letter-E">E</button>
+ <button class="button" id="letter-F">F</button>
+ <button class="button" id="letter-G">G</button>
+ <button class="button" id="letter-H">H</button>
+ <button class="button" id="letter-I">I</button>
+ <button class="button" id="letter-J">J</button>
+ <button class="button" id="letter-K">K</button>
+ <button class="button" id="letter-L">L</button>
+ </div>
+
+ <button class="button is-link" onclick="switchSection('section-1')">Torna</button>
+ </section>
+
+ <section id="section-3" class="section" style="display: none;">
+
+ <div id="number-container" class="buttons grid">
+ <button class="button" id="number-1">1</button>
+ <button class="button" id="number-2">2</button>
+ <button class="button" id="number-3">3</button>
+ <button class="button" id="number-4">4</button>
+ <button class="button" id="number-5">5</button>
+ <button class="button" id="number-6">6</button>
+ <button class="button" id="number-7">7</button>
+ <button class="button" id="number-8">8</button>
+ <button class="button" id="number-9">9</button>
+ <button class="button" id="number-10">10</button>
+ </div>
+
+ <button class="button is-link" onclick="switchSection('section-2')">Torna</button>
+ </section>
+ <section id="section-send" class="section" style="display: none;">
+
+ <span class="has-text-weight-bold">Assignatura:</span>
+ <span id="subject-final">Àlgebra Lineal</span><br>
+ <span class="has-text-weight-bold">Aula:</span>
+ <span id="classroom-final">Dele</span><br>
+ <span class="has-text-weight-bold">Data:</span>
+ <span id="date-final">14/3/1879</span><br>
+ <span class="has-text-weight-bold">Hora:</span>
+ <span id="time-final">En <strong>algun moment</strong></span><br>
+ <span class="has-text-weight-bold">Posició:</span>
+ <span id="letter-final">P</span><span id="number-final">2</span><br><br>
+
+ <button class="button is-link" onclick="switchSection('section-3')">Torna</button>
+ <button id="send-button" class="button is-link">Envia el formulari</button><br><br>
+
+ Hi ha errors? <a class="myButton" href="https://docs.google.com/forms/d/e/1FAIpQLSfT9o287VqLyhwR8LPdloAQWhuqCgA3NfdhgP5vb9_sVQHL-g/viewform">Completa el formulari manualment</a>
+ </section>
+
+
<script>
// Check if user is signed in
var api_url = "https://covid-tracability-backend-dev.sandbox.avm99963.com/api/v1/";
@@ -20,188 +164,28 @@
.then(response => response.json())
.then(data => {
// TODO: redirect here
- alert(data.payload.url);
+ // 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;
+ <script>
+ var current_section = "section-1";
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
-
- justify-content: center;
- align-items : center;
-
- height: 75vh;
- overflow-y: auto;
- margin: 50px 0;
+ function toggleVisibility(id) {
+ var x = document.getElementById(id);
+ if (x.style.display === "none") {
+ x.style.display = "block";
+ } else {
+ x.style.display = "none";
+ }
}
-
- .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;
+
+ function switchSection(s) {
+ toggleVisibility(current_section);
+ toggleVisibility(s);
+ current_section = s;
}
-
- .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>
<script>
var subjects_texts = {
"subject-1": "Àlgebra",
@@ -241,55 +225,57 @@
});
});
</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);
});
-
+ var elements = document.getElementsByClassName("complex-button");
+ Array.from(elements).forEach(function(element) {
+ element.addEventListener('click', clickButton);
+ element.parent = element.parentNode.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");
+ $("#subject-container .complex-button").removeClass("is-link")
+ $("#" + id).addClass("is-link");
// Canvi del text al final
- $("#" + parent).parent().find(".final").html(final_text);
+ $("#subject-final").html(final_text);
// Canvi JSON
// TODO
// Anchor següent pregunta
- document.getElementById("subject-label").scrollIntoView();
+ switchSection("section-2");
} else if (parent == "number-container") {
// Canvi de background del button
- $(".number").css("background-color", "white");
- $("#" + id).css("background-color", "#c3ddff");
+ $("#number-container .button").removeClass("is-link is-light is-active")
+ $("#" + id).addClass("is-link is-light is-active");
// Canvi del text al final
- $("#" + parent).parent().find(".final").html(final_text);
+ $("#number-final").html(final_text);
// Canvi JSON
// TODO
// Anchor següent pregunta
- document.getElementById("number-label").scrollIntoView();
+ switchSection("section-send");
} else if (parent == "letter-container") {
// Canvi de background del button
- $(".letter").css("background-color", "white");
- $("#" + id).css("background-color", "#c3ddff");
+ $("#letter-container .button").removeClass("is-link is-light is-active")
+ $("#" + id).addClass("is-link is-light is-active");
// Canvi del text al final
- $("#" + parent).parent().find(".final").html(final_text);
+ $("#letter-final").html(final_text);
// Canvi JSON
// TODO
// Anchor següent pregunta
- document.getElementById("letter-label").scrollIntoView();
+ switchSection("section-3");
}
}
</script>
+
</body>
-</html>
\ No newline at end of file
+</html>