Skip to content
Snippets Groups Projects
Commit 3f94b2cd authored by Alfredo Chissotti's avatar Alfredo Chissotti
Browse files

inizio webapp

parents
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
webapp/favicon.jpg 0 → 100644
+ 0
− 0
View file @ 3f94b2cd
webapp/favicon.jpg

7.23 KiB

webapp/index.html 0 → 100644
+ 144
− 0
View file @ 3f94b2cd
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<title id="title">SmartHome</title>
<link rel="icon" href="favicon.jpg">
<!-- link ts/stript.ts which calls other scripts -->
<script src="js/script.js" defer type="module"></script>
<!-- link bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!-- link style.css -->
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<h1>Pissir SmartHome</h1>
<!-- container of the top buttons to change what is seen -->
<div id="mainButtonContainer" class="d-flex flex-row justify-content-around">
<button class="btn-12 btn btn-dark">
<span>Luci</span>
</button>
<button class="btn-12 btn btn-dark">
<span>Scenari</span>
</button>
<button class="btn-12 btn btn-dark">
<span>Antifurto</span>
</button>
</div>
<!-- actual containers -->
<div id="luciContainer" class="invisible">
<!-- table -->
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Luogo</th>
<th scope="col">Stato</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Cucina</th>
<td>
<!-- switch -->
<div class="switch-container no-box-sizing">
<div class="toggle-button no-box-sizing">
<div class="inner-circle no-box-sizing" />
</div>
</div>
</td>
</tr>
<!-- row to add a new element -->
<tr>
<th scope="row">
<button type="button" class="btn btn-dark" data-bs-toggle="modal"
data-bs-target="#luci-modal">
<!-- assicurarsi di targettare il giusto modal -->
+
</button>
</th>
<td>
<span>Aggiungi una luce</span>
</td>
</tr>
</tbody>
</table>
</div>
<div id="scenariContainer" class="invisible">
<div class="switch-container no-box-sizing">
<div class="toggle-button no-box-sizing">
<div class="inner-circle no-box-sizing">
scenari
</div>
</div>
</div>
</div>
<div id="antifurtoContainer" class="invisible">
<div class="switch-container no-box-sizing">
<div class="toggle-button no-box-sizing">
<div class="inner-circle no-box-sizing">
antifurto
</div>
</div>
</div>
</div>
<!-- modals for new stuff -->
<div class="modal fade" id="luci-modal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Nuova luce</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="scenari-modal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Nuovo scenario</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="antifurto-mzodal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Nuovo antifurto</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
webapp/js/antifurto.js 0 → 100644
+ 36
− 0
View file @ 3f94b2cd
"use strict";
import Luci from './luci.js';
import Scenari from './scenari.js';
class Antifurto {
static antifurtoContainer;
constructor() {
Antifurto.init();
}
static init() {
this.antifurtoContainer = document.getElementById('antifurtoContainer');
const antifurtoBtn = document.getElementById('mainButtonContainer').children[2];
antifurtoBtn.addEventListener('click', event => {
event.preventDefault();
this.toggleContainer(true);
Luci.toggleContainer(false);
Scenari.toggleContainer(false);
}, false);
}
// toggle the visibility of the antifurto container
static toggleContainer(visible) {
if (visible) {
this.antifurtoContainer.classList.remove('invisible');
} else {
this.antifurtoContainer.classList.add('invisible');
}
}
}
export default Antifurto;
\ No newline at end of file
webapp/js/luci.js 0 → 100644
+ 38
− 0
View file @ 3f94b2cd
"use strict";
import Antifurto from "./antifurto.js";
import Scenari from "./scenari.js";
class Luci {
static luciContainer;
constructor() {
Luci.init();
}
static init() {
this.luciContainer = document.getElementById('luciContainer');
const luciBtn = document.getElementById('mainButtonContainer').children[0];
luciBtn.addEventListener('click', event => {
event.preventDefault();
this.toggleContainer(true);
Scenari.toggleContainer(false);
Antifurto.toggleContainer(false);
}, false);
}
// toggle the visibility of the luci container
static toggleContainer(visible) {
if (visible) {
this.luciContainer.classList.remove('invisible');
} else {
this.luciContainer.classList.add('invisible');
}
}
}
export default Luci;
\ No newline at end of file
webapp/js/scenari.js 0 → 100644
+ 37
− 0
View file @ 3f94b2cd
"use strict";
import Luci from './luci.js';
import Antifurto from './antifurto.js';
class Scenari {
static scenariContainer;
constructor() {
Scenari.init();
}
static init() {
this.scenariContainer = document.getElementById('scenariContainer');
const scenariBtn = document.getElementById('mainButtonContainer').children[1];
scenariBtn.addEventListener('click', event => {
event.preventDefault();
this.toggleContainer(true);
Luci.toggleContainer(false);
Antifurto.toggleContainer(false);
}, false);
}
// toggle the visibility of the scenari container
static toggleContainer(visible) {
if (visible) {
this.scenariContainer.classList.remove('invisible');
} else {
this.scenariContainer.classList.add('invisible');
}
}
}
export default Scenari;
\ No newline at end of file
webapp/js/script.js 0 → 100644
+ 11
− 0
View file @ 3f94b2cd
"use strict";
import Luci from './luci.js';
import Scenari from "./scenari.js";
import Antifurto from "./antifurto.js";
import { setToggleMovement } from "./toggles.js";
// launch each class
new Luci();
new Scenari();
new Antifurto();
setToggleMovement();
webapp/js/toggles.js 0 → 100644
+ 14
− 0
View file @ 3f94b2cd
"use strict";
function setToggleMovement() {
const toggles = document.querySelectorAll('.toggle-button');
for (const toggle of toggles) {
toggle.addEventListener('click', event => {
event.preventDefault
toggle.classList.toggle('active');
})
}
};
export { setToggleMovement };
\ No newline at end of file
webapp/style.css 0 → 100644
+ 97
− 0
View file @ 3f94b2cd
/* cool button */
.btn-12 {
--width: 250px;
width: var(--width);
display: block;
box-sizing: border-box;
padding: 20px 45px;
border-radius: 999px;
position: relative;
overflow: hidden;
text-transform: uppercase;
border: 1px solid currentColor;
}
.btn-12 span {
font-weight: 900;
mix-blend-mode: difference;
}
.btn-12:before,
.btn-12:after {
--w: calc(var(--width) / 4);
content: "";
z-index: -1;
height: 100%;
width: var(--w);
position: absolute;
background: white;
box-shadow: calc(2 * var(--w)) 0 0 0 white;
transition: transform 0.2s;
will-change: transform;
}
.btn-12:before {
top: -100%;
left: 0;
}
.btn-12:after {
top: 100%;
left: var(--w);
}
.btn-12:hover:before {
transform: translateY(100%);
}
.btn-12:hover:after {
transform: translateY(-100%);
}
/* switch toggle */
.switch-container {
position: relative;
left: 50%;
top: 50%;
/* transform: translate(-50%, -50%); */
}
.toggle-button {
background: gray;
width: 80px;
height: 40px;
border-radius: 30px;
padding: 5px;
cursor: pointer;
transition: all 300ms ease-in-out;
}
.toggle-button>.inner-circle {
background: white;
width: 40px;
height: 40px;
border-radius: 50%;
transition: all 300ms ease-in-out;
}
.toggle-button.active {
background: #00ff22;
}
.toggle-button.active>.inner-circle {
margin-left: 40px;
}
.no-box-sizing {
box-sizing: content-box!important;
}
/* other */
.invisible {
visibility: hidden;
}
\ No newline at end of file
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