diff --git a/API/.gitignore b/API/.gitignore new file mode 100644 index 000000000..3fa052012 --- /dev/null +++ b/API/.gitignore @@ -0,0 +1,2 @@ +node_modules/ +testselect.html \ No newline at end of file diff --git a/API/PAGE/css/cadastro.css b/API/PAGE/css/cadastro.css new file mode 100644 index 000000000..dea9535be --- /dev/null +++ b/API/PAGE/css/cadastro.css @@ -0,0 +1,139 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: Helvetica, sans-serif; + color: #323232; + border: none; +} + +body { + background: + linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px, + linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px, + linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px, + linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px, + linear-gradient(90deg, #1b1b1b 10px, transparent 10px), + linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424); + background-color: #131313; + background-size: 20px 20px; + min-height: 100vh; + min-width: 100vw; +} + +a { + text-decoration: none; +} + +h1 { + margin-left: auto; + margin-right: auto; + position: absolute; + left: 44%; + right: 56%; +} + +header { + background-color: white; + display: flex; + color: black; + margin-bottom: 30px; + border-radius: 10px; + text-align: center; + position: relative; + + +} + + +.box { + flex: 1 1 100%; + position: relative; +} + +#cadastro-container { + background-color: #FFF; + width: 300px; + margin-left: auto; + margin-right: auto; + padding: 20px 30px; + margin-top: 10vh; + border-radius: 10px; + text-align: center; +} + +#button-save, +#button-edit { + border-radius: 20px; + border: none; + height: 30px; + width: 30%; + cursor: pointer; + background-color: #08558B; + color: #FFF; + text-transform: uppercase; + font-weight: bold; + font-size: 12px; + margin-top: 20px +} + +#dis { + width: 220px; + font-size: 16px; + text-align: justify; + padding: 5px; +} + +#horarios { + display: flex; + +} + +#horai, +#horaf { + width: 104px; + font-size: 16px; + text-align: center; + padding: 5px; + margin-left: 11px; + ; + +} + +button:hover { + background-color: #3213bd; + transition: .6s; +} + +button[disabled] { + background-color: gray; + opacity: .5; +} + +.nav_link { + display: flex; + color: black; + flex-wrap: wrap; + max-width: 100%; + margin: 10px; +} + +@media only screen and (min-width: 300px) and (max-width: 420px) { + + h1 { + position: absolute; + left: 30%; + right: 70%; + } + +} + +@media only screen and (min-width: 1600px) and (max-width: 1900px) { + + h1 { + position: absolute; + left: 30%; + right: 70%; + } + +} \ No newline at end of file diff --git a/API/PAGE/css/cursos.css b/API/PAGE/css/cursos.css new file mode 100644 index 000000000..d2b9b7a43 --- /dev/null +++ b/API/PAGE/css/cursos.css @@ -0,0 +1,187 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: Helvetica, sans-serif; + color: #323232; + border: none; +} + +body { + background: + linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px, + linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px, + linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px, + linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px, + linear-gradient(90deg, #1b1b1b 10px, transparent 10px), + linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424); + background-color: #131313; + background-size: 20px 20px; + position: relative; + min-height: 100vh; + min-width: 100vw; +} + +main { + padding: 2rem 4rem; +} + +a { + text-decoration: none; +} + +h1 { + margin-left: auto; + margin-right: auto; +} + + +header { + background-color: white; + display: flex; + color: black; + margin-bottom: 30px; + border-radius: 10px; +} + + +.card-body { + position: relative; +} + +/* .card { + max-width: 300px; + min-width: 300px; + margin-left: auto; + margin-right: auto; +} */ + +.nav_link { + display: flex; + color: black; + flex-wrap: wrap; + max-width: 100%; + margin: 10px; +} + +/* CSS FLEXBOX */ + +#horai, +#horaf { + padding-bottom: 10px; + position: relative; + align-items: right; +} + +#horarios { + display: block; + display: inline-block; + align-content: right; + margin-left: 50%; + position: absolute; + bottom: 2%; + right: 3%; + +} + +#sala { + display: block; + position: absolute; + bottom: 2%; + left: 3%; +} + +#prof { + display: block; + position: absolute; + bottom: 20%; + left: 3%; +} + +#disciplina { + display: block; + position: absolute; + top: 5%; + left: 3%; +} + +#delete-curso { + display: block; + border: none; + height: 20px; + cursor: pointer; + font-weight: bold; + position: absolute; + top: 5%; + right: 3%; +} + +.flex { + display: flex; + color: black; + flex-wrap: wrap; + max-width: 100%; + margin: 10px; + padding-left: 10%; + padding-right: 10%; + position: relative; + +} + +.flex>div { + display: flex; + margin-left: 5vw; + margin-right: 5vw; + flex: 1 1 200px; + border: 1px solid; + padding: 10px 10px; + margin-top: 10px; + border-radius: 10px; + background-color: white; + min-width: 300px; + max-width: 350px; + height: 150px; + +} + +@media only screen and (min-width: 300px) and (max-width: 420px) { + + main { + width: 100vw; + padding-left: 1px; + } + + .flex { + display: flex; + color: black; + flex-wrap: wrap; + max-width: 100%; + margin: 10px; + position: relative; + padding-left: 5%; + padding-right: 5%; + + } + + .flex>div { + display: flex; + flex: 1 1 200px; + border: 1px solid; + padding: 10px 10px; + margin-top: 10px; + border-radius: 1px; + background-color: white; + height: 150px; + margin-right: 50%; + + } +} + +@media only screen and (min-width: 1800px) and (max-width: 2400px) { + + .flex>div { + max-width: 300px; + + } + + } \ No newline at end of file diff --git a/API/PAGE/css/index.css b/API/PAGE/css/index.css new file mode 100644 index 000000000..b400cd349 --- /dev/null +++ b/API/PAGE/css/index.css @@ -0,0 +1,110 @@ +/* geral */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: Helvetica, sans-serif; + color: #323232; + border: none; + } + + body + { + background: + linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px, + linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px, + linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px, + linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px, + linear-gradient(90deg, #1b1b1b 10px, transparent 10px), + linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424); + background-color: #131313; + background-size: 20px 20px; + } + + textarea:focus, input:focus { + outline: none; + } + + /* Conteiner login */ + + #login-container { + background-color: #FFF; + width: 300px; + margin-left: auto; + margin-right: auto; + padding: 20px 30px; + margin-top: 10vh; + border-radius: 10px; + text-align: center; + } + + /* formulario */ + form { + margin-top: 30px; + margin-bottom: 40px; + } + + .box { + flex: 1 1 100%; + position: relative; + } + + input { + display: block; + width: 100%; + text-align: center; + border-bottom: 2px solid #323232; + padding: 10px; + font-size: 1rem; + margin-bottom: 20px; + } + + input:focus { + border-bottom: 2px solid #08558B; + } + + button { + border-radius: 20px; + border: none; + height: 40px; + width: 70%; + cursor: pointer; + background-color: #08558B; + color: #FFF; + text-transform: uppercase; + font-weight: bold; + } + + button:hover { + background-color: #3213bd; + transition: .6s; + } + + button[disabled] { + background-color: gray; + opacity: .5; + } + + .error { + color: red; + display: none; + } + /* input[type="submit"] { + text-transform: uppercase; + font-weight: bold; + border: none; + height: 40px; + border-radius: 20px; + margin-top: 30px; + color: #FFF; + background-color: #08558B; + cursor: pointer; + width: 70%; + margin-left: auto; + margin-right: auto; + }*/ + + /* input[type="submit"]:hover { + background-color: #3213bd; + transition: .6s; + }*/ diff --git a/API/PAGE/js/cadastro.js b/API/PAGE/js/cadastro.js new file mode 100644 index 000000000..19ad11042 --- /dev/null +++ b/API/PAGE/js/cadastro.js @@ -0,0 +1,171 @@ +const addCursoForm = document.querySelector('.box'); +const url = "http://localhost:3000/cursos"; + + +function formCurso() { + let selectDisc = document.getElementById("dis"); + let itemDisc = selectDisc.value; + console.log(itemDisc); + + var selectProf = document.getElementById("post-prof"); + var itemsProf = []; + for (let i = 1; i < selectProf.options.length; i++) { + if (selectProf.options[i].selected) { + itemsProf.push(selectProf.options[i].text); + } + } + objProf = { professores: itemsProf }; + console.log(objProf); + + var selectSala = document.getElementById("post-sala"); + var itensSala = []; + for (let i = 1; i < selectSala.options.length; i++) { + if (selectSala.options[i].selected) { + itensSala.push(selectSala.options[i].text); + } + } + objSala = { salas: itensSala }; + console.log(objSala); + + + + let selectHi = document.getElementById('horai').value; + let itemHi = selectHi; + console.log(itemHi) + + let selectHf = document.getElementById('horaf').value; + let itemHf = selectHf; + console.log(itemHf) + + function Curso(disciplina, professor, sala, hora_i, hora_f) { + this.disciplina = disciplina; + this.professor = professor; + this.sala = sala; + this.hora_i = hora_i; + this.hora_f = hora_f; + } + + let curso = new Curso( + itemDisc, + itemsProf, + itensSala, + itemHi, + itemHf + ) + return curso; +} + +// Buttons + +addCursoForm.addEventListener('click', (e) => { + e.preventDefault() + let saveButtonIsPressed = e.target.id == 'button-save'; + let editButtonIsPressed = e.target.id == 'button-edit'; + let selectDisc = document.getElementById("dis"); + let itemDisc = selectDisc.value; + + if (editButtonIsPressed) { + fetch(`${url}/${itemDisc}`, { + method: "PATCH", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(formCurso()), + }) + .then((response) => response.json()) + .then((curso) => { + console.log('Update OK', curso) + window.location.href = "cursos.html" + }) + + } + if (saveButtonIsPressed) { + fetch(url, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(formCurso()), + }) + .then((response) => response.json()) + .then((curso) => { + console.log('Save OK', curso) + window.location.href = 'cursos.html' + }) + } +}) + + +// Validação de campos + +function toggleButtonErrors() { + const discValid = isDiscIsValid(); + const profValid = isProfIsValid(); + const salaValid = isSalaIsValid(); + const horaiValid = isHoraiIsValid(); + const horafValid = isHorafIsValid(); + document.getElementById('button-save').disabled = !discValid || !profValid || !salaValid || !horaiValid || !horafValid; + document.getElementById('button-edit').disabled = !discValid || !profValid || !salaValid || !horaiValid || !horafValid; +} + +function isDiscIsValid() { + const selectDisc = document.getElementById("dis").value; + + if (!selectDisc) { + return false; + } + return true; + +} + +function isProfIsValid() { + var selectProf = document.getElementById("post-prof"); + var itemsProf = []; + for (let i = 1; i < selectProf.options.length; i++) { + if (selectProf.options[i].selected) { + itemsProf.push(selectProf.options[i].text); + } + } + + if (itemsProf.length != 0) { + return true; + } + return false; +} + +function isSalaIsValid() { + var selectSala = document.getElementById("post-sala"); + var itensSala = []; + for (let i = 1; i < selectSala.options.length; i++) { + if (selectSala.options[i].selected) { + itensSala.push(selectSala.options[i].text); + } + } + if (itensSala.length != 0) { + return true; + } + return false; +} + + +function isHoraiIsValid() { + let selectHi = document.getElementById('horai').value; + + if (!selectHi) { + return false; + } + return true; + +} + +function isHorafIsValid() { + let selectHf = document.getElementById('horaf').value; + + if (!selectHf) { + return false; + } + return true; + +} + + diff --git a/API/PAGE/js/cursos.js b/API/PAGE/js/cursos.js new file mode 100644 index 000000000..090e312ff --- /dev/null +++ b/API/PAGE/js/cursos.js @@ -0,0 +1,52 @@ +const postList = document.querySelector('.post-list'); +let output = ''; + +const renderCursos = (cursos) => { + cursos.forEach(curso => { + output += ` +