Skip to content

Commit 8699695

Browse files
wlgswlgs
committed
lab3 done
1 parent 5842c3d commit 8699695

23 files changed

+1076
-29
lines changed

‎lab3/db.json‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎lab3/zad10/index.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="style.css">
8+
<title>Document</title>
9+
</head>
10+
<body>
11+
12+
<main class="container">
13+
<div id="left">
14+
<h3>Select items</h3>
15+
</div>
16+
<div id="right">
17+
<h3>Preview</h3>
18+
<div id="preview_selected">
19+
<p id="preview_items"></p>
20+
</div>
21+
</div>
22+
</main>
23+
<script src="script.js"></script>
24+
</body>
25+
</html>

‎lab3/zad10/json/produktyA.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"Samochody":["Fiat","Mercedes"],
3+
"Hulajnogi":[],
4+
"Soki":["Jupi", "Kubuś", "Hoop"],
5+
"Słodycze":["Czekolada", "Cukierki"],
6+
"Rowery":["Kross", "Merida"],
7+
"Telefony":["Samsung S7", "Iphone"],
8+
"Gry":["League of Legends", "Drakensang Online" ],
9+
"Meble":["Szafa", "Komoda"]
10+
}

‎lab3/zad10/json/produktyB.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"Samochody":[],
3+
"Hulajnogi":[],
4+
"Soki":[],
5+
"Słodycze":["Wawel", "Michałki", "Czekolada", "Cukierki"],
6+
"Rowery":["Laguna", "Spider", "Psycho"],
7+
"Telefony":[],
8+
"Gry":["CS:GO", "Tibia", "World of Warcraft", "Assasin's Creed"],
9+
"Meble":["Szafa", "Komoda"]
10+
}

‎lab3/zad10/json/produktyC.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"Samochody":["Mercedes", "Lamborgini", "Ferrari", "Peugeot", "Volkswagen"],
3+
"Hulajnogi":[],
4+
"Soki":["Tymbark", "Caprio"],
5+
"Słodycze":[],
6+
"Rowery":[],
7+
"Telefony":["Motorola", "Nokia", "Xperia"],
8+
"Gry":["7 Days to die"],
9+
"Meble":["Stolik"]
10+
}

‎lab3/zad10/script.js‎

Lines changed: 216 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
var previewArray = new Array;
2+
3+
4+
async function getData(){
5+
var data = new Array;
6+
7+
var res1 = await fetch("json/produktyA.json")
8+
data.push(await res1.json())
9+
10+
var res2 = await fetch("json/produktyB.json")
11+
data.push(await res2.json())
12+
13+
var res3 = await fetch("json/produktyC.json")
14+
data.push(await res3.json())
15+
16+
var dict = {};
17+
18+
for(var i = 0; i<3; i++){
19+
json = data[i];
20+
for (var key in json){
21+
if (dict[key] == undefined)
22+
dict[key] = new Array;
23+
for (var el in json[key]){
24+
if (!dict[key].includes(json[key][el]))
25+
dict[key].push(json[key][el]);
26+
}
27+
}
28+
}
29+
return dict;
30+
}
31+
32+
function clickHandler(){
33+
showhideList(this.id);
34+
}
35+
36+
function categoryIndeterminate(categoryName){
37+
var checkboxes = document.querySelectorAll("#ucategory_" + categoryName + ">div>input");
38+
var category = document.querySelector("#category_main_" + categoryName );
39+
var cnt = checkboxes.length;
40+
var cnt2 = 0;
41+
for (var checkbox of checkboxes){
42+
if(checkbox.checked)
43+
cnt2++;
44+
45+
}
46+
if (cnt==cnt2){
47+
category.checked = true;
48+
category.indeterminate = false;
49+
}
50+
else if (cnt2>0 && cnt2<cnt){
51+
category.indeterminate = true;
52+
}
53+
else if (cnt2==0){
54+
category.indeterminate = false;
55+
category.checked = false;
56+
}
57+
58+
}
59+
60+
function checkboxHandlerWhole(){
61+
var categoryID = this.id.split("_")[2];
62+
var checkboxes = document.querySelectorAll("#ucategory_" + categoryID + ">div>input");
63+
if (this.checked){
64+
for (var box of checkboxes){
65+
if (box.checked)
66+
continue
67+
else{
68+
box.checked = true;
69+
var item = box.id.split("_")[1];
70+
previewArray.push(item)
71+
}
72+
}
73+
}
74+
if (!this.checked){
75+
for (var box of checkboxes){
76+
if (!box.checked)
77+
continue
78+
else{
79+
box.checked = false;
80+
var item = box.id.split("_")[1];
81+
const index = previewArray.indexOf(item);
82+
if (index > -1)
83+
previewArray.splice(index, 1);
84+
}
85+
}
86+
}
87+
updatePreview();
88+
}
89+
90+
function checkboxHandler(){
91+
var item = this.id.split("_")[1];
92+
var categoryName = this.id.split("_")[0];
93+
categoryIndeterminate(categoryName);
94+
if (item=="main"){
95+
document.querySelectorAll("#" + this.id.split("_")[2])
96+
97+
}
98+
if (this.checked){
99+
previewArray.push(item);
100+
}
101+
else{
102+
const index = previewArray.indexOf(item);
103+
if (index > -1)
104+
previewArray.splice(index, 1);
105+
}
106+
updatePreview();
107+
}
108+
109+
function updatePreview(){
110+
var preview = document.getElementById("preview_items");
111+
preview.textContent = "";
112+
previewArray.forEach(element => {
113+
preview.textContent += element + ', '
114+
});
115+
preview.textContent = preview.textContent.substr(0,preview.textContent.length-2);
116+
}
117+
118+
async function loadSite(){
119+
data = await getData();
120+
Object.keys(data).forEach(function(key) {
121+
buildCategory(data[key], key);
122+
});
123+
hideUCategories();
124+
125+
var arrows = document.getElementsByClassName("hoverable");
126+
for (let arrow of arrows)
127+
arrow.addEventListener("click", clickHandler);
128+
129+
var checkboxesSingle = document.querySelectorAll("input[type='checkbox'].singleItem");
130+
for (let checkbox of checkboxesSingle)
131+
checkbox.addEventListener('change',checkboxHandler);
132+
133+
var checkboxesWhole = document.querySelectorAll("input[type='checkbox'].wholeCategory");
134+
for (let checkbox of checkboxesWhole)
135+
checkbox.addEventListener('change',checkboxHandlerWhole);
136+
137+
}
138+
139+
140+
141+
function buildCategory(array, name){
142+
var category = document.createElement('div');
143+
category.classList.add('category');
144+
145+
var div1 = document.createElement('div');
146+
var category_show = document.createElement('span');
147+
category_show.classList.add('hoverable');
148+
category_show.textContent = "❯";
149+
category_show.setAttribute("id", "category_show_" + name);
150+
151+
var input1 = document.createElement('input');
152+
input1.setAttribute("type", "checkbox");
153+
input1.setAttribute("id", "category_main_" + name);
154+
input1.classList.add("wholeCategory")
155+
156+
var category_name = document.createElement('span');
157+
category_name.textContent = name;
158+
159+
div1.appendChild(category_show);
160+
div1.appendChild(input1);
161+
div1.appendChild(category_name);
162+
163+
164+
var div2 = document.createElement('div');
165+
div2.classList.add("ucategory");
166+
div2.setAttribute("id", "ucategory" + "_" + name);
167+
168+
array.forEach(element => {
169+
var div3 = document.createElement('div');
170+
var input2 = document.createElement('input');
171+
input2.setAttribute("type", "checkbox");
172+
input2.setAttribute("id",name+"_"+element)
173+
input2.classList.add("singleItem")
174+
175+
var item_name = document.createElement('span');
176+
item_name.textContent = element;
177+
178+
div3.appendChild(input2);
179+
div3.appendChild(item_name);
180+
div2.appendChild(div3);
181+
});
182+
category.appendChild(div1);
183+
category.appendChild(div2);
184+
185+
document.querySelector("#left").appendChild(category);
186+
187+
188+
}
189+
function hideUCategories(){
190+
var ucategories = document.getElementsByClassName("ucategory");
191+
for (let el of ucategories) {
192+
el.classList.add("hidden");
193+
}
194+
}
195+
196+
function showhideList(id){
197+
var id_name = id.substr(14,id.length)
198+
var ucategory = document.getElementById("ucategory_" + id_name);
199+
var arrow = document.getElementById("category_show_" + id_name);
200+
if(ucategory.classList.contains("hidden"))
201+
{
202+
ucategory.classList.remove("hidden");
203+
arrow.classList.add("rotated");
204+
return
205+
}
206+
if (!ucategory.classList.contains("hidden")){
207+
ucategory.classList.add("hidden");
208+
arrow.classList.remove("rotated");
209+
return
210+
}
211+
212+
}
213+
214+
loadSite();
215+
216+

‎lab3/zad10/style.css‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
2+
3+
:root {
4+
--darkBlue: hsl(233, 26%, 24%);
5+
}
6+
7+
*, *::before, *::after {
8+
box-sizing: border-box;
9+
text-rendering: optimizeLegibility;
10+
-webkit-font-smoothing: antialiased;
11+
-moz-osx-font-smoothing: grayscale;
12+
font-kerning: auto;
13+
margin: 0;
14+
padding:0;
15+
}
16+
17+
html {
18+
font-family: 'Inter', sans-serif;
19+
}
20+
body{
21+
width:100vw;
22+
display:flex;
23+
justify-content: center;
24+
background-color:gray;
25+
}
26+
.container{
27+
border:2px solid black;
28+
width:50vw;
29+
min-width:400px;
30+
display:flex;
31+
flex-direction: row;
32+
background-color:white;
33+
}
34+
35+
#left, #right{
36+
display:flex;
37+
flex-basis:50%;
38+
flex-direction:column;
39+
border:1px solid black;
40+
padding:10px;
41+
}
42+
43+
span{
44+
display:inline-block;
45+
margin:2px;
46+
transition: 200ms ease all;
47+
48+
}
49+
input{
50+
margin:4px;
51+
}
52+
53+
span.hoverable:hover{
54+
cursor:pointer;
55+
user-select: none;
56+
}
57+
58+
h3{
59+
text-align: center;
60+
margin-bottom:10px;
61+
border-bottom:2px solid gray;
62+
}
63+
.category{
64+
display:flex;
65+
flex-direction: column;
66+
transition: 200ms ease all;
67+
}
68+
69+
.ucategory{
70+
margin-left:30px;
71+
display:flex;
72+
flex-direction:column;
73+
transition: 200ms ease all;
74+
75+
}
76+
77+
.hidden{
78+
visibility: hidden;
79+
display:none;
80+
transition: 200ms ease all;
81+
}
82+
83+
.rotated{
84+
transform: rotate(90deg);
85+
}

‎lab3/Zadanie11/images/animacja-zombie.png‎ renamed to ‎lab3/zad11/images/animacja-zombie.png‎

File renamed without changes.

‎lab3/Zadanie11/images/board-bg.jpg‎ renamed to ‎lab3/zad11/images/board-bg.jpg‎

File renamed without changes.

‎lab3/Zadanie11/images/walkingdead.png‎ renamed to ‎lab3/zad11/images/walkingdead.png‎

File renamed without changes.

0 commit comments

Comments
 (0)