Telefonkönyv
A következő feladatban egy telefonköny kezelésére alkalmas webalkalmazást kell elkészítened.
Minta
Előkészület
Állítsd be az OM azonosítód utolsó négy számjegyét a fejlesztői szerver portjaként. Amennyiben 0-val kezdődik, úgy csak 3-at adj meg.
Készítsd el az image-et a magadott json szerverhez és futtasd a konténert.
Állítsd be az axiost, hogy a json szervert használja!
Útvonalak
| Útvonal neve | Komponens | Url | Paraméterek |
|---|---|---|---|
home | HomePage | / | |
contact | ContactPage | /contacts/:id | id: A névjegy azonosítója |
create-contact | CreateContactPage | /contacts/create | |
edit-contact | EditContactPage | /contacts/:id/edit | id: A névjegy azonosítója |
Stílus
Készítsd el a következő változókat:
| Név | Érték |
|---|---|
blue | #92C7CF |
pearl | hsl(48,56%,96%) |
soft-gray | #E5E1DA |
green | #0D9276 |
red | #BF3131 |
Állítsd be a $primary változót $blue, a $succes-t $green, a $danger-t pedig $red színűre, valamint a $table-striped-bg a $soft-gray értékét kapja meg. Ügyelj rá, hogy ezeket a bállításokat a Bootstrapes importálás ELŐTT végezd el!
Az webapp háttérszíne legyen pearl.
A sikeres gomb betűszínét állítsd be fehérre.
A kártya fejlécét állítsd be, hogy $blue háttérrel és fehér betűszínnel jelenjen meg.
Layoutok
BaseLayout
Alakítsd át a navigációs sávot és a láblécet a mintának megfelelően!
Oldalak
Főoldal
A BaseTable komponens segítségével jelenítsd meg a contacts végpontról lekért adatokat.
Névjegy oldal
Az oldal tartalmazzon egy sor, ebben helyezkedjenek el a következő oszlopok:
Cím
Az olszop minden nézeten töltse ki a teljes sort, tartalmazza az adott nevet, valamint kettő darab gombot. A módosítás gombra kattintva menjük át az adott névjegyhez tartozó űrlaphoz. Törlés esetén pedig egy felugró ablak kérdezze meg, hogy "Biztosan törli az adott névjegyet". Elfogadás esetén hajtsd végre a törlés műveletét.
Kártyák
A telefonszám, Email, Születésnap és a Cím kártyák kis nézetben teljes sort töltsék ki, közepes nézettől felfelé egy sorban 2-2 jelenjen meg belőlük, míg nagy nézettől mind a négy egy sorban jelenjen meg egymás mellett.
A Vállalat és a Beosztás kártyák kis nézeten egymás elatt közepes nézettő felfelé egymás mellett jelenjenek meg.
A jegyzet minden nézeten töltse ki a sort.
Létrehozás és módosítás oldal
Módosítás esetén készíts egy elsődleges típusú töltés jelzőt a Bootstrap spinner komponensének segítségével, legyen középre igazított és fentről 5 (BS) egységet tartson el!
Készíts űrlapot FormKit segítségével, amelyen letitod az alap műveleteket (pl.: submit)! Módosítás esetén töltsd be az eredeti értékeket!
Az űrlap elején jelenjen meg a "<név> szerkeztése" vagy az "Új névjegy létrehozása" felirat főcímként, és állts be függőlegesen 3 (BS) egységnyi eltartás. A mezőket az alábbi táblázat írja le.
| Név | Címke | Beviteli mező osztályai | Hibaüzenetek osztályai | Validációs szabályok |
|---|---|---|---|---|
name | Teljes név | form-control | invalid-feedback | Kötelező, Maximum 25 karakter lehet |
phone | Telefonszám | form-control | invalid-feedback | kötelező, Maximum 20 karakter lehet |
email | Email cím | form-control | invalid-feedback | Kötelező, Email formátumú |
address | Cím | form-control | invalid-feedback | Kötelező, 20 és 125 karakter között kell lennie |
birth | Születésnap | form-control | invalid-feedback | Kötelező, 1920.01.01 utáni dátumok lehetnek, 2020.01.01 előtti dátumok lehetnek |
company | Cég | form-control | invalid-feedback | 0 és 40 karakter között kell lennie |
role | Beosztás | form-control | invalid-feedback | 0 és 20 karakter között kell lennie |
notes | Jegyzetek | form-control | invalid-feedback | 0 és 200 karakter között kell lennie |
Ezeken felül készíts még egy küldés gombot, amely elsődleges gomb formázású és "Mentés" szövegezésű.
Az űrlap elküldésekor hajtsa végre a megfelelő műveletet és mentse az űrlap adatait a szerverre!
Készíts loading állapotot igaz keződértékkel a mentés oldalra. Amennyiben az adatok sikeresen megérkeztek ezt állítsd hamis értékre! Olld meg, hogy a töltés jelző, csak akkor jelenjen meg, ha a loading állapota igaz, ezt követően helyette az űrlap kerüljön fel az oldara!
Komponensek
BaseTable
Készíts egy három oszlopos csíkozott táblázatot, amely a következő adatokat jeleníti meg rendre: Név, Telefonszám, Email cím.
A név legyen egy olyan hivatkozás, amely átvisz azonosító alapján a megfelelő névjegy oldalára!
BaseCard
Készítsd egy olyan Bootstrapes kártyát, amely egy fejlécet tartalmaz, valamit a kártya törzsét.
Az adatokat a szölőtől kapja a komponens, így vedd át a title és a content állapotokat szöveges adatként, ezeket a megfelelő helyeken jelenítsd meg.
\pagebreak