2024. március 19., kedd
2024. március 17., vasárnap
Hajó menetrend megoldása
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta
charset="UTF-8">
<title>Menetrend Táblázat</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
<label
for="fromSelect">Honnan:</label>
<select id="fromSelect"
ng-model="fromFilter">
<option
value="">Összes indulási állomás</option>
<option
ng-repeat="location in locations"
value="{{location}}">{{location}}</option>
</select>
<label for="toSelect">Hova:</label>
<select id="toSelect"
ng-model="toFilter">
<option
value="">Összes érkezési állomás</option>
<option
ng-repeat="location in locations"
value="{{location}}">{{location}}</option>
</select>
<input type="text" ng-model="searchText"
placeholder="Keresés...">
<br>
<table border="1">
<thead>
<tr>
<th
ng-click="sortBy('azon')">Azon</th>
<th
ng-click="sortBy('jarat')">Járat</th>
<th
ng-click="sortBy('honnan')">Honnan</th>
<th ng-click="sortBy('hova')">Hova</th>
<th
ng-click="sortBy('indul')">Indul</th>
<th
ng-click="sortBy('erkezik')">Érkezik</th>
</tr>
</thead>
<tbody>
<!-- A ng-repeat attribútum értéke az a kifejezés, amely
leírja, hogy milyen adatok alapján kell a sorokat generálni.
menet in filteredMenetrend:menet a jelenlegi iterációban
használt változó neve. Minden iteráció során ez a változó egy-egy elemre mutat
majd a menetrend tömbből.
filteredMenetrend -> a szűrt menetrend adatait tartalmazó
változó. Ezt a változót létrehozza az AngularJS, és a ng-repeat során
használható.
(menetrend | filter:{'honnan': fromFilter, 'hova': toFilter}
| orderBy:orderByField:reverseSort | filter:searchText):
Ez a rész a szűrők és rendezés alkalmazását írja le a
menetrend tömbre.
Az első filter szűri az elemeket a 'honnan' és 'hova'
tulajdonságok alapján a fromFilter és toFilter változók értékei szerint.
Az orderBy a rendezést végzi el az adott mező alapján
(orderByField).
A reverseSort változó határozza meg, hogy a sorrend növekvő
vagy csökkenő legyen.
A második filter szűri az elemeket a searchText változó
alapján.-->
<tr
ng-repeat="menet in filteredMenetrend = (menetrend | filter:{'honnan':
fromFilter, 'hova': toFilter} | orderBy:orderByField:reverseSort |
filter:searchText)">
<!--Így a teljes kifejezés azt az utasítást adja, hogy
hozzon létre egy sorral, minden menet elemet a filteredMenetrend változóból,
amely a megfelelően szűrt, rendezett és keresett adatokat tartalmazza a
menetrend tömb alapján.
Ez a sor az AngularJS kifejezéseinek összefonódásából
adódik, ahol minden egyes művelet eredménye továbbítódik a következő művelet
bemeneteként.-->
<td>{{ menet.azon }}</td>
<td>{{ menet.jarat }}</td>
<td>{{ menet.honnan }}</td>
<td>{{ menet.hova }}</td>
<td>{{ menet.indul }}</td>
<td>{{ menet.erkezik }}</td>
</tr>
</tbody>
</table>
<script>
var app =
angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {
$http.get('menetrend.json').then(function (response) {
$scope.menetrend = response.data;
/*new Set(...):A Set egy olyan adatstruktúra, amely csak
egyedi elemeket tartalmaz. Itt egy Set-et hozunk létre a fenti egyesített
tömbből. Ezzel biztosítjuk, hogy minden helyszín csak egyszer szerepeljen a
Set-ben.
[...Set]:
A Set objektum tartalmát egy spread operátorral (...)
alakítjuk át egy tömbbé. Így a $scope.locations változó egy olyan tömb lesz,
amely csak az egyedi 'honnan' és 'hova' értékeket tartalmazza.*/
$scope.locations = [...new Set(response.data.map(item =>
item.honnan).concat(response.data.map(item => item.hova)))];
/*response.data.map(item =>
item.honnan):
Az response.data egy tömb, ami a szerver válaszának adatait
tartalmazza (a menetrend adatait).
A map metódus segítségével az összes item elemet leképezzük
a hozzájuk tartozó 'honnan' tulajdonságra.
response.data.map(item => item.hova):
Hasonlóan, ebben a részben a 'hova' tulajdonságot map-eljük.
.concat(...): A concat metódus segítségével a két fenti
lépés eredményét egyesítjük egyetlen tömbben. Tehát létrehozunk egy olyan
tömböt, amely tartalmazza az összes 'honnan' és 'hova' értéket.
Ez a kód tehát egy olyan helyszín tömböt hoz létre, amely
tartalmazza az összes egyedi 'honnan' és 'hova' helyszínt a menetrend
adataiból. Ez a tömb később használható a szűrési opciók kialakításához a
felhasználói felületen.*/
//
Initialize filter variables
$scope.fromFilter = "";
$scope.toFilter = "";
// Default
sort
$scope.orderByField = 'erkezik';
$scope.reverseSort = false;
});
$scope.sortBy
= function (field) {
$scope.reverseSort = ($scope.orderByField === field) ?
!$scope.reverseSort : false;
$scope.orderByField = field;
/*$scope.sortBy = function (field) { ... }:
Ez egy függvény definíciója, amelyet a táblázat fejlécében
lévő kattintható fejléc mezőkhöz kötnek. Amikor a felhasználó a táblázat egy
fejléc mezőjére kattint, a sortBy függvény fut le, és rendezni fogja az
adatokat az adott mező alapján.
$scope.reverseSort = ($scope.orderByField === field) ?
!$scope.reverseSort : false;:
Ez a sor megállapítja, hogy a rendezési sorrend növekvő vagy
csökkenő legyen.
Az ($scope.orderByField === field) rész azt ellenőrzi, hogy
a jelenlegi rendezési mező egyezik-e az újonnan kiválasztott mezővel.
A ? utáni rész egy feltételes (ternary) operátor, amely
megváltoztatja a reverseSort értékét attól függően, hogy a jelenlegi rendezési
mező megegyezik-e az újonnan kiválasztott mezővel. Ha igen, akkor a
!$scope.reverseSort inverzezi a jelenlegi értéket (azaz ha true, akkor false,
és fordítva), ha nem, akkor false.
Tehát ez a rész megoldja azt a feladatot, hogy
megváltoztassa a rendezési sorrendet, ha a felhasználó ugyanarra a mezőre
kattint, különben állítsa be a rendezési sorrendet a kiválasztott mező alapján.
$scope.orderByField = field;:
Ez a sor beállítja a $scope.orderByField változót a
kiválasztott mező nevére, amely szerint rendezni kell az adatokat.
Összességében a $scope.sortBy függvény felelős a táblázat
rendezéséért. Ha a felhasználó ugyanarra a mezőre kattint, akkor megfordítja a
rendezési sorrendet, különben beállítja a rendezési mezőt az újonnan
kiválasztott mezőre. Ez lehetővé teszi a táblázat interaktív és dinamikus
rendezését a felhasználó számára.
*/
};
});
</script>
</body>
</html>
2024. március 12., kedd
Kutyatár
Kedves Diákok!
A feladat leírását, a mintát, és a json fájlt itt találjátok https://github.com/latiza/kutyatar
2024. március 3., vasárnap
Technológiák
Készítsd el az alábbi weboldalt:
Az oldal tetején első szintű címsorba angularban létrehozott változóból olvasd be a címet.
Alatta helyezz el egy kereső mezőt, amelybe ha beírjuk valamelyik tech. szövegét, csak az fog megjelenni.
Az oldal elkészítéséhez olvasd be a json fájlból az adatokat angularJs segítségével a tanult módon.A logók fotóit innen le tudod tölteni: https://github.com/latiza/technologiak_img
A képek szélessége : 100px; az alt szöveg az adott tech. neve legyen.
Boostrappel egymás mellé helyezheted őket kártyákon. (row, col, card)
A kártyákon a tartalom kerüljön középre.
A név 2-es szintű címsorba kerüljön.
A felhasználási terület (usage) a legkisebb szintű címsorba kerüljön.
A fájl kiterjesztése paragrafusba.
A tutorial szövegre kattintva nyissa meg a lineket új oldalon.
Készíts egy tech.json fájlt az alábbi adatokból:
[
{
name: "HTML",
logo: "html.png",
usage: "Webfejlesztés",
extension: "html",
url: "https://hu.wikipedia.org/wiki/HTML",
tutorial: "https://www.w3schools.com/html/default.asp",
},
{
name: "CSS",
logo: "css.png",
usage: "Webfejlesztés",
extension: "css",
url: "https://en.wikipedia.org/wiki/CSS",
tutorial: "https://www.w3schools.com/css/default.asp",
},
{
name: "JavaScript",
logo: "js.png",
usage: "Webfejlesztés",
extension: "js",
url: "https://en.wikipedia.org/wiki/JavaScript",
tutorial: "https://www.w3schools.com/js/default.asp",
},
{
name: "Java",
logo: "java.png",
usage: "Mobil alkalmazás, asztali alkalmazás",
extension: "java",
url: "https://en.wikipedia.org/wiki/Java_(programming_language)",
tutorial: "https://www.w3schools.com/java/default.asp",
},
{
name: "Python",
logo: "py.png",
usage: "Webfejlesztés, adatvizualizáció, adatanalízis, automatizálás",
extension: "py",
url: "https://en.wikipedia.org/wiki/Python_(programming_language)",
tutorial: "https://www.w3schools.com/python/default.asp",
},
{
name: "Ruby",
logo: "rb.png",
usage: "Webfejlesztés, meta programozás, automatizálás",
extension: "rb",
url: "https://en.wikipedia.org/wiki/Ruby_(programming_language)",
tutorial: "https://www.ruby-lang.org/en/documentation/quickstart/",
},
{
name: "C#",
logo: "csharp.png",
usage: "Webfejlesztés, mobil alkalmazás, asztali alkalmazás, Unity",
extension: "cs",
url: "https://hu.wikipedia.org/wiki/C_Sharp",
tutorial: "https://www.w3schools.com/cs/index.php",
},
{
name: "C++",
logo: "cpp.png",
usage: "Automatizálás, mobil alkalmazás, asztali alkalmazás, Unreal Engine",
extension: "cpp",
url: "https://hu.wikipedia.org/wiki/C%2B%2B",
tutorial: "https://www.w3schools.com/cpp/",
},
{
name: "Kotlin",
logo: "kt.png",
usage: "Android fejlesztés",
extension: "kt",
url: "https://en.wikipedia.org/wiki/Kotlin_(programming_language)",
tutorial: "https://www.w3schools.com/KOTLIN/index.php",
},
];
Feliratkozás:
Bejegyzések (Atom)