React

• Yhteiset vaatimukset
• Taso 1
• Taso 3
• Taso 5

Toteutetaan React-sovelluksena uusi versio viikkotehtävässä 3 tehdystä sivusta.

Ennen tämän tehtävän tekemistä niin käy läpi seuraavat materiaalit:

• Pääteohjaus 6
• React.js Tommi Lahtonen
• yksinkertainen validointi
• Esimerkki lomakkeista ja validoinnista (controlled)
• Esimerkki lomakkeista ja validoinnista (uncontrolled)
• React Jonne Räsänen / Nordcloud
  • Luentokalvot, kalvot pdf-muodossa
  • Esimerkit
• JSX ja virtuaalinen dom (Jari Pennanen)
  • Esimerkkikoodi
• 02 - Reactin perusteita 1/2 (Jari Pennanen)
  • Esimerkkikoodi
• 03 - Reactin perusteita 2/2 (Jari Pennanen)
  • Esimerkkikoodi

Yhteiset vaatimukset

• Sovelluksen on toimittava yhdellä ja samalla www-sivulla ilman, että sivua ladataan sovelluksen käyttämisen aikana uudelleen. Reactin avulla hoidetaan sivun sisällön dynaaminen muokkaus.
• Ulkoasumuotoilut pitää tehdä erillisellä CSS-tiedostolla.
• Sivun on toimittava ja se on testattava Google Chrome-selaimella ja Firefoxilla
• Koko sovelluksen toiminnallisuus ja sisältö on toteutettava React-kirjaston avulla yhdelle www-sivulle. Sivun kaikki sisältö on tuotettava React-kirjastolla dynaamisesti. Valmista näkyvää ei-dynaamista html-sisältöä saa olla mallipohjan verran.
• Valmiiseen pohjaan on linkitetty viikkotehtävä 3:ssa käytetty data
• dangerouslySetInnerHTML, findDOMNode()-, alert-, ja forceUpdate-funktioiden käyttäminen on kielletty. Myös Refs-ominaisuuden käyttäminen on kiellettyä.
• Käytä kontrolloitua lomaketta. Kts. Forms
• Reactilla luotua sisältöä ei saa käsitellä tavallisilla DOM-funktioilla vaan kaikki on tehtävä Reactin avulla. Esim. document.getElementById-funktiota ei saa käyttää.
• Toteuta virheilmoitukset kuten viikkotehtävässä kolme.
• Kaikki sovelluksen React-komponentit täytyy periä PureComponent-luokasta. Kts. valmis pohja. Lue When to use Component or PureComponent
• Sovellus on toteutettava Reactin toimintaperiaatteita noudattaen:
  • Propseja ei saa muuttaa
  • Tilaa saa muuttaa vain setState-metodilla
  • Lomakkeiden on oltava kontrolloituja
• Valmiissa pohjassa oleva JShint ei saa antaa huomautuksia ohjelmakoodista

Taso 1

Toteuta käyttöliittymä, jossa voit lisätä uusia joukkueita

• Valmista globaalia tietorakennetta saa suoraan käsitellä vain App-komponentissa, joka löytyy valmiista pohjasta. Muuta ja laajenna App-komponenttia tarpeen mukaan. Kaikki muut omat komponentit on luotava siten, että ne saavat kaiken tarvitsemansa propseissa. Älä siis käpistele komponenteissasi tietorakennetta suoraan. Joukkueiden lisääminen toteutetaan vain App-komponentin sisältämään tilaan eikä alkuperäiseen tietorakenteeseen.
• Kirjoita oma komponentti LisaaJoukkue, joka osaa luoda seuraavanlaisen lomakkeen ja lisätä sen avulla uuden joukkueen App-komponentin tilaan. Lomakkeen on näytettävä seuraavalta (vrt. vt 3):
  

  Lomakkeella olevat sarjat ja leimaustavat täytyy luoda dynaamisesti tilassa olevan datan perusteella. Näitä ei saa hardkoodata.

  Lomakkeessa on oltava seuraavat tarkistukset:

  • Nimi on pakollinen kenttä
  • Sarja on pakollinen kenttä, koska radiobuttonissa on aina oltava jokin oletusvalinta.
  • Leimaustapa on vapaaehtoinen kenttä. Jos leimaustapaa ei ole valittu niin käytetään tyhjää taulukkoa [].
  • Jäsenen nimi on oltava syötettynä vähintään kahteen ensimmäiseen kenttään (jäsen 1 ja jäsen 2)
  • Virheellisistä syötteistä on ilmoitettava samaan tapaan kuin viikkotehtävässä kolme (setCustomValidity)

  Lisäystä ei saa tehdä, jos annettuja rajoitteita rikotaan.

  Uudelle joukkueelle on keksittävä uusi uniikki id

  Huom! Varsinaisen lisäämisen voi tehdä vain App-komponentti, koska siellä on varsinainen tietorakenne. LisaaJoukkue osaa vain toimittaa lisättävän joukkueen tiedot eteenpäin.

• Kirjoita oma komponentti ListaaJoukkueet, joka osaa listata joukkueet aakkosjärjestyksessä. Järjestämisessä ei huomioida pieniä ja isoja kirjaimia eikä nimen alussa tai lopussa olevia välimerkkejä tai muuta whitespacea. Joukkueen yhteydessä listataan myös joukkueen käyttämät leimaustavat ja joukkueen sarja.
  • Joukkue 1
    4h (GPS, NFC)
  • joukkue 2
    2h (GPS)
  • Joukkue 3
    4h (GPS, NFC, Lomake)
  • ...

  Sijoita joukkuelistaus sivulla lomakkeen oikealle puolelle.

  Joukkuelistauksen pitää päivittyä aina, kun uusi joukkue lisätään. Listauksen on pysyttävä aakkosjärjestyksessä.

• Komponentit eivät saa muuttaa niille annettujen propsien arvoja / sisältöä

Taso 3

Laajenna taso 1 -mukaista ohjelmaa seuraavilla tavoilla:

• Tee joukkueen jäsenten nimien lisäämisestä dynaaminen. Ts. näytä aluksi vain kaksi tyhjää syöttökenttää. Lisää kenttiä tarpeen mukaan, mutta kuitenkin enintään viisi kappaletta. Toteutus on tehtävä tavalla, joka mahdollistaisi myös N kappaleen jäsenen lisäämisen.
• Leimaustavan valitseminen on pakollista. Tarkista, että vähintään yksi tapa on valittuna
• Mahdollista joukkueiden tietojen muuttaminen. Tee joukkuelistauksessa joukkueiden nimistä linkkejä, joita klikatessa kyseisen joukkueen tiedot ilmestyvät lomakkeelle muokattaviksi. Tietoja muutettaessa on käytössä samat rajoitteet, kuin uutta joukkuetta lisättäessä. Muutettujen tietojen tallentamisen jälkeen joukkuelistaus päivittyy vastaamaan muutettuja tietoja.
• Lisää joukkuelistaukseen näkyville myös joukkueen jäsenten nimet seuraavaan tapaan:
  • Joukkue Foobar
    4h (GPS, NFC)
    • Jäsen 1
    • Jäsen 2
    • ...
  Tee yksittäisen joukkueen tiedoista oma komponentti. Tee myös joukkueen jäsenlistauksesta oma komponentti.

Taso 5

Laajenna taso 3 -mukaista ohjelmaa seuraavilla tavoilla:

• Lisää joukkueen nimen perään joukkueen pistemäärä ja kulkema matka kilometreinä:
  • Joukkue Foobar (228 p, 50,4 km)
• Lisää sivulle listaus kaikista rasteista:
  • 33
    62.153435, 25.560594
  • 34
    62.122986, 25.573049
  • ...
  Toteuta omana komponenttina
• Tee rastilistauksesta muokattava.
  • Klikattaessa rastin koodia muuttuu koodi tekstikentäksi (input), jossa voi muuttaa koodia.
  • Poistuttaessa kentästä palaa rastikoodi taas tavalliseksi tekstiksi. Jos muutettu rastikoodi ei ala numerolla niin kenttä pidetään näkyvissä ja siihen liitetään myös virheilmoitus (setcustomvalidity).
  • Klikattaessa rastin koordinaatteja avataan rastin tietojen viereen pieni kartta, jossa on markeri rastin koordinaateissa. Voit käyttää Leaflet-kirjastoa.
  • Markerin voi raahata uuteen paikkaan ja rastin koordinaateiksi otetaan tämän uuden pisteen koordinaatit.
  • Klikattaessa kartan ulkopuolella piilotetaan kartta.
• Rastin tietojen muuttamisen jälkeen täytyy joukkueiden pisteiden ja kulkemien matkojen päivittyä vastaamaan muuttuneiden rastien tietoja