Frontend - Backend - IKT Project: március 2024

<!DOCTYPE html>

<head>

<title>Menetrend Táblázat</title>

</head>

<label for="fromSelect">Honnan:</label>

<option value="">Összes indulási állomás</option>

<option ng-repeat="location in locations" value="{{location}}">{{location}}</option>

</select>

<option value="">Összes érkezési állomás</option>

<option ng-repeat="location in locations" value="{{location}}">{{location}}</option>

</select>

<br>

<thead>

<tr>

<th ng-click="sortBy('jarat')">Járat</th>

<th ng-click="sortBy('honnan')">Honnan</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.-->

<!--Í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>

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>

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",
        },
    ];

Frontend - Backend - IKT Project

2024. március 19., kedd

2024.03.20

2024. március 17., vasárnap

Hajó menetrend megoldása

2024. március 12., kedd

Kutyatár

2024. március 3., vasárnap

Technológiák

Norvég feladat