htamas1210/webfejlesztes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mozi

Browse Source
This commit is contained in:
Playmaker1210
2022-05-15 19:44:10 +02:00
parent f71860b96b
commit bd7d723c02
3 changed files with 182 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
javascript/mozi/index.html Normal file
View File

@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title></title>
</head>
<body onload="ulohelyekGeneralas()">
<div class="container">
<header>
</header>
<main>
<!--<button class="btn btn-primary" onclick="ulohelyekGeneralas()">Generalás</button>-->
<button class="btn btn-primary" onclick="leFoglalas()">Lefoglalás</button>
<button class="btn btn-primary" onclick="legutobbiFoglalasVisszaMondas()">Legutóbbi foglalás visszamondása</button>
<br><br>
<div>
<div id="filmCim"></div>
<div id="filmLeiras"></div>
<div id="filmKezdet"></div>
</div>
<div class="flex-container" id="szekek">
</div>
</main>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="script.js"></script>
</body>
</html>

109
javascript/mozi/script.js Normal file
View File

@@ -0,0 +1,109 @@
/*Egy vidéki kis moziteremben 10 sor, soronként 8 szék található. Készíts olyan weboldalt, amely segítségével le lehet foglalni széket/székeket! Az oldal jelenítse meg a székeket, a foglalások pillanatnyi állapotát! Ránézésre meg lehessen állapítani, hogy melyik szék foglalt, és melyik nem. Ha egy szék már foglalt, akkor azt még egyszer ne lehessen lefoglalni. A székek lefoglalását lehessen „visszavonni.
Az oldal legyen minél dizájnosabb! Ügyelj arra, hogy az oldal reszponzív legyen!
A leírtak a feladat minimumkövetelményét tartalmazzák, természetesen ötletekkel és megvalósítással bővíthető.
Erre a feladatra mindenki jegyet kap (az is aki nem küldi be határidőre).*/
let ulohelyek = [
[0,0,0,0,0,0,0,0], //1.sor
[0,0,0,0,0,0,0,0], //2.sor
[0,0,0,0,0,0,0,0], //3.sor
[0,0,0,0,0,0,0,0], //4.sor
[0,0,0,0,0,0,0,0], //5.sor
[0,0,0,0,0,0,0,0], //6.sor
[0,0,0,0,0,0,0,0], //7.sor
[0,0,0,0,0,0,0,0], //8.sor
[0,0,0,0,0,0,0,0], //9.sor
[0,0,0,0,0,0,0,0] //10.sor
/*
0 a nem lefoglalt szek
1 az ideiglenesen lefoglalt szek
2 a lefoglalt szek
*/
]
let legutobbiFoglalas = ""; //legutoljara lefoglalt szekek eltarolasa formatum: sor,oszlop;sor,oszlop;
/*console.log(ulohelyek.length);
console.log(ulohelyek[0].length);
console.log(ulohelyek[0][0].length);*/
function ulohelyekGeneralas(){
let terem = document.getElementById("szekek"); //szekeket tartalmozo div lekerese
for (let i = 0; i < ulohelyek.length; i++) {
let sor = document.createElement("div"); //uj sor div letrehozasa
sor.setAttribute("id", "sor-" + (i+1)); //megfelelelo id beallitasa a sorhoz | formatum: sor-1; sor-2
sor.setAttribute("value", i); //ertek beallitasa a script muveletekhez
sor.setAttribute("class", "sor"); //sor css osztaly hozzarendeles a flexbox miatt
for (let j = 0; j < ulohelyek[i].length; j++) {
let szek = document.createElement("button"); //szekek legeneralasa a sorhoz
szek.setAttribute("id","sor-" + (i+1) + "_szek-" + (j+1)); //id beallitasa | formatum: sor-1_szek-1
szek.setAttribute("value", j); //ertek beallitasa a script muveletekhez
szek.setAttribute("class", "szek"); //szek osztaly hozzarendeles
szek.setAttribute("onclick", "ideiglenesFoglalas(" + i + ", this.value)"); //ideiglenes foglalashoz a fuggveny hozza adasa ha a gombra van kattintva
let text = document.createTextNode(j+1); //szoveg hozzaadasa a gombhoz
szek.appendChild(text); //szoveg hozza adasa a gombhoz
sor.appendChild(szek); //aktualis szek hozza adasa a sorhoz
}
terem.appendChild(sor); //sor hozzaadasa a divhez
}
}
function ideiglenesFoglalas(sor, szek){
console.log("sor: " + sor + " szek: " + szek);
let akt_szek = document.getElementById("sor-" + (sor+1) + "_szek-" + (parseInt(szek)+1)); //aktualis szek eltarolasa
console.log("sor-" + (sor+1) + "_szek-" + (parseInt(szek)+1)); //id kiirasa
if(ulohelyek[sor][szek] == 0){ //nulla vizsgalat mert ha 2 az ertek akkor ne allitsa at
ulohelyek[sor][szek] = 1; //ideiglenes foglalas beallitasa
akt_szek.setAttribute("class", "szek ideiglenes"); //hatter atallitasa kekre
}
else if(ulohelyek[sor][szek] == 1){ //megvizsgalni ha mar pirosan foglalt akkor ne lehessen levenni a foglalast
ulohelyek[sor][szek] = 0;
akt_szek.setAttribute("class", "szek"); //ha levesszuk a kijelolest vissza all a hatter
}
let kiir = "";
for (let i = 0; i < ulohelyek.length; i++) {
for (let j = 0; j < ulohelyek[i].length; j++) {
kiir += ulohelyek[i][j] + " ";
}
console.log(kiir);
kiir = "";
}
}
function leFoglalas(){
legutobbiFoglalas = ""; //elozo foglalasok torlese mivel nem lettek visszamondva
for (let i = 0; i < ulohelyek.length; i++) {
for (let j = 0; j < ulohelyek[i].length; j++) {
//ulohelyek[i][j] = 1; tesztelesre minden ulohely lefoglalasa
if(ulohelyek[i][j] == 1){
ulohelyek[i][j] = 2;
let szek = document.getElementById("sor-" + (i+1) + "_szek-" + (j+1));
console.log("sor-" + (i+1) + "_szek-" + (j+1));
szek.setAttribute("class", "szek foglalt");
legutobbiFoglalas += i + "," + j + ";"; //legutobbi foglalt szek eltarolasa a visszamondashoz
}
}
}
console.log("Legutobb foglalt szekek: " + legutobbiFoglalas);
}
function legutobbiFoglalasVisszaMondas(){
let szekek = legutobbiFoglalas.split(";");
console.log("Foglalas vissza mondasa");
for (let i = 0; i < szekek.length - 1; i++) {
let sor = parseInt(szekek[i].split(",")[0]);
let szek = parseInt(szekek[i].split(",")[1]);
console.log("sor: " + sor + " szek: " + szek + " i:" + i);
let akt_szek = document.getElementById("sor-" + (sor+1) + "_szek-" + (szek+1));
console.log("sor-" + (sor+1) + "_szek-" + (szek+1));
akt_szek.setAttribute("class", "szek");
ulohelyek[sor][szek] = 0;
}
szekek = null;
legutobbiFoglalas = null;
}

41
javascript/mozi/style.css Normal file
View File

@@ -0,0 +1,41 @@
body{
margin-left: 1%;
margin-right: 1%;
margin-top: 1%;
margin-bottom: 1%;
}
.flex-container {
display: flex;
background-color: DodgerBlue;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
padding: 1%;
}
.szek{
background-color: #f1f1f1;
width: 10%;
margin: 1%;
text-align: center;
line-height: 100px;
font-size: 30px;
}
.sor{
display: flex;
background-color: purple;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
}
.foglalt{
background-color: red;
}
.ideiglenes{
background-color: darkturquoise;
}