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)

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ä 1:ssa käytetty data
• dangerouslySetInnerHTML, findDOMNode()-, alert-, ja forceUpdate-funktioiden käyttäminen on kielletty.
• Kaikki lomakkeet on toteutettava kontrolloituina react-lomakkeina. Kts. Controlling an input with a state variable
• 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.
• Kaikkien sovelluksen React-komponenttien täytyy olla funktionaalisia react-komponentteja. Komponentit täytyy myös kapseloida React.memo-funktiolla:

  const Komponentti = React.memo(function Komponentti(props) {
    /* ... */
  });

• Sovellus on toteutettava Reactin toimintaperiaatteita noudattaen:
  • Propseja ei saa muuttaa
  • Tilaa saa muuttaa vain setState-metodilla tai funktionaalisissa komponenteissa useState-metodilla luoduilla set*-funktioilla.
  • 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

• Käytä valmista pohjaa, jossa on luotu ja alustettu oikealla datalla App-komponentti
• Valmista globaalia data-tietorakennetta ei saa suoraan käsitellä. Muuta ja laajenna App-komponenttia tarpeen mukaan. Kaikki muut omat komponentit on luotava siten, että ne saavat kaiken tarvitsemansa propseissa. Kaikki lisäykset ja muutokset toteutetaan vain App-komponentin sisältämään tilaan.
• 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.

  Lomake on toteutettava kontrolloituina react-lomakkeena. Kts. Controlling an input with a state variable

  Lomakkeessa on oltava seuraavat tarkistukset:

  • Nimi on pakollinen kenttä. Nimi ei saa olla pelkkää whitespacea
  • Kahta samannimistä joukkuetta ei saa lisätä. Vertailu on caseinsensitive eikä nimen alussa tai lopussa olevaa whitespacea huomioida
  • 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)

  Lisäystä ei saa tehdä, jos annettuja rajoitteita rikotaan. Virheistä ei ole pakko ilmoittaa. Virheilmoitukset toteutetaan vasta tasolla 3.

  Uudelle joukkueelle on keksittävä uusi uniikki id

  Uuden joukkueen rastileimaukset ovat []

  Lisäämisen jälkeen lomake on tyhjennettävä eli komponentin tila on palautettava lähtötilanteeseen

  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 taulukkomuodossa sarjan ja joukkueen nimen mukaan aakkosjärjestyksessä. Järjestäminen tehdään ensisijaisesti sarjan nimen mukaan ja toissijaisesti joukkueen nimen mukaan. 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 aakkosjärjestyksessä.

  Sarja	Joukkue
  2 h	Joukkue 1 (GPS, NFC)
  2 h	Joukkue 2 (GPS, NFC)
  4 h	Joukkue 15 (GPS, NFC)
  4 h	Joukkue 16 (NFC, QR)
  8 h	Joukkue 3 (GPS, NFC)

  Sijoita joukkuelistaus (taulukko) 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. Mitkä tahansa kaksi kenttää voivat olla täytettynä.
• Virheellisistä syötteistä on ilmoitettava samaan tapaan kuin viikkotehtävässä kolme (setCustomValidity)
• 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:

  2 h	Joukkue 1 (GPS, NFC)	Jäsen 1 Jäsen 2 ...
  2 h	Joukkue 2 (NFC, QR)	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:

• Laske kunkin joukkueen kulkema matka ja lisää se omaan sarakkeeseen joukkuelistaukseen.
  Miten lasketaan joukkueen matka

  Laske kunkin rastivälin pituus ja laske yhteen kunkin joukkueen kulkemat rastivälit. Jos rastille ei löydy sijaintitietoa (lat ja lon), niin kyseistä rastia ei lasketa matkaan mukaan. Matka lasketaan viimeisestä LAHTO-rastilla tehdystä leimauksesta alkaen aina ensimmäiseen MAALI-rastilla tehtyyn leimaukseen asti. Leimauksia jotka tehdään ennen lähtöleimausta tai maalileimauksen jälkeen ei huomioida.

  /**
    * Laskee kahden pisteen välisen etäisyyden
    */
  function getDistanceFromLatLonInKm(lat1,lon1,lat2,lon2) {
    let R = 6371; // Radius of the earth in km
    let dLat = deg2rad(lat2-lat1);  // deg2rad below
    let dLon = deg2rad(lon2-lon1);
    let a =
      Math.sin(dLat/2) * Math.sin(dLat/2) +
      Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *
      Math.sin(dLon/2) * Math.sin(dLon/2)
      ;
    let c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
    let d = R * c; // Distance in km
    return d;
  }
  /**
     Muuntaa asteet radiaaneiksi
    */
  function deg2rad(deg) {
    return deg * (Math.PI/180);
  }

• 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, 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. Kts. React Leaflet ja react-leaflet
  • Markerin voi raahata uuteen paikkaan ja rastin koordinaateiksi otetaan tämän uuden pisteen koordinaatit.
  • Klikattaessa kartan ulkopuolella piilotetaan kartta.
  • Joukkueiden kulkema matka täytyy päivittää oikeaksi rastipisteen paikan muuttuessa. Oikea matka täytyy näkyä joukkuelistauksessa.