Merge branch 'feature/contacts' into 'master'
Feature/contacts See merge request sahkoinsinoorikilta/vtmk/web2.0-frontend!22
This commit is contained in:
Aarni Halinen
@@ -0,0 +1,159 @@
|
||||
{
|
||||
"name_fi": "Hallitus",
|
||||
"name_en": "Board",
|
||||
"roles": [
|
||||
{
|
||||
"name_fi": "Puheenjohtaja",
|
||||
"name_en": "Chairman",
|
||||
"representatives": [
|
||||
{
|
||||
"name": "Johannes Ora"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Sihteeri",
|
||||
"name_en": "Secretary",
|
||||
"representatives": [
|
||||
{
|
||||
"name": "Salla Lyytikäinen",
|
||||
"phone_number": null,
|
||||
"email": null,
|
||||
"image": null
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Rahastonhoitaja",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{
|
||||
"name": "Santeri Huhtala",
|
||||
"phone_number": null,
|
||||
"email": null,
|
||||
"image": null
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Fuksitoimikunnan Puheenjohtaja",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{
|
||||
"name": "Toni Ojala",
|
||||
"phone_number": null,
|
||||
"email": null,
|
||||
"image": null
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Fuksitoimikunnan puheenjohtajan adjutantti",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{
|
||||
"name": "Toni Lyttinen",
|
||||
"phone_number": null,
|
||||
"email": null,
|
||||
"image": null
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Hovimestari",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{
|
||||
"name": "Eveliina Ahonen",
|
||||
"phone_number": null,
|
||||
"email": null,
|
||||
"image": null
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Hovineuvos",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{
|
||||
"name": "Melissa Dönmez",
|
||||
"phone_number": null,
|
||||
"email": null,
|
||||
"image": null
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "ISOvastaava",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{
|
||||
"name": "Heidi Mäkitalo",
|
||||
"phone_number": null,
|
||||
"email": null,
|
||||
"image": null
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Hyvinvointimestari",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{
|
||||
"name": "Sauli Norja",
|
||||
"phone_number": null,
|
||||
"email": null,
|
||||
"image": null
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Opintomestari",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{
|
||||
"name": "Simo Hakanummi",
|
||||
"phone_number": null,
|
||||
"email": null,
|
||||
"image": null
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Teknologiamestari",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{
|
||||
"name": "Oskari Ponkala",
|
||||
"phone_number": null,
|
||||
"email": null,
|
||||
"image": null
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Ulkomestari",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{
|
||||
"name": "Oliver Hiekkamies",
|
||||
"phone_number": null,
|
||||
"email": null,
|
||||
"image": null
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Yrityssuhdemestari",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{
|
||||
"name": "Otto Julkunen",
|
||||
"phone_number": null,
|
||||
"email": null,
|
||||
"image": null
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
{
|
||||
"name_fi": "Hyvinvointitoimikunta",
|
||||
"name_en": "",
|
||||
"roles": [
|
||||
{
|
||||
"name_fi": "Hyvinvointimestari",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Sauli Norja" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Kulttuurivastaava",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Juha Anttila" },
|
||||
{ "name": "Aino Suomi" },
|
||||
{ "name": "Nestori Ylönjoki" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Liikuntavastaava",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Elmeri Pälikkö" },
|
||||
{ "name": "Joel Wickström" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Kiltahuonevastaava",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Ilari Ojakorpi" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Kiltapäiväkerhovastaava",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Samuel Laine" },
|
||||
{ "name": "Aleksanteri Vesala" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Retkivastaava",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Jarno Mustonen" },
|
||||
{ "name": "Suvi Karanta" },
|
||||
{ "name": "Jesse Räisänen" },
|
||||
{ "name": "Mikko Suhonen" }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
{
|
||||
"name_fi": "Mediatoimikunta",
|
||||
"name_en": "",
|
||||
"roles": [
|
||||
{
|
||||
"name_fi": "Puheenjohtaja",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{
|
||||
"name": "Salla Lyytikäinen",
|
||||
"phone_number": null,
|
||||
"email": null,
|
||||
"image": null
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Päätoimittaja",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Sasu Salasti" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Toimittaja",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Tuukka Syrjänen" },
|
||||
{ "name": "Ilmari Kasvi" },
|
||||
{ "name": "Elias Hirvonen" },
|
||||
{ "name": "Miika Koskela" },
|
||||
{ "name": "Taneli Myllykangas" },
|
||||
{ "name": "Emmaleena Ahonen" },
|
||||
{ "name": "Ville-Pekka Laakkonen" },
|
||||
{ "name": "Sofia Öhman" },
|
||||
{ "name": "Nestori Yrjönkoski" },
|
||||
{ "name": "Jami Hyytiäinen" },
|
||||
{ "name": "Aleksanteri Vesala" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Toimittaja & Valokuvaaja",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Kiia-Einola" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Taittaja",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Aino Suomi" },
|
||||
{ "name": "Olli Komulainen" },
|
||||
{ "name": "Emilia Kortelainen" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Taittaja & Valokuvaaja",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Jonna Tammikivi" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Valokuvaaja",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Suvi Karanta" },
|
||||
{ "name": "Mikko Haaparanta" },
|
||||
{ "name": "Johannes Viirimäki" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Valokuvaaja & Graafikko",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Kalle Petäjäaho" },
|
||||
{ "name": "Maria Pöllä" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Videokuvaaja",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Aaro Rasilainen" }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"name_fi": "Opintotoimikunta",
|
||||
"name_en": "",
|
||||
"roles": [
|
||||
{
|
||||
"name_fi": "Opintomestari",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Simo Hakanummi" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Opintovastaava",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Miina-Maija Simonen" },
|
||||
{ "name": "Tomi Valkonen" },
|
||||
{ "name": "Leo Lahti" },
|
||||
{ "name": "Ville-Pekka Laakkonen" },
|
||||
{ "name": "Samu Nyman" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Abimarkkinointi Vastaava",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Ilkka Huttu" }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
{
|
||||
"name_fi": "Ohjelmatoimikunta",
|
||||
"name_en": "",
|
||||
"roles": [
|
||||
{
|
||||
"name_fi": "Hovimestari",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Eveliina Ahonen" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Hovineuvos",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Melissa Dönmez" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Emäntä",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Oona Karjalainen" },
|
||||
{ "name": "Emilia Kortemäki" },
|
||||
{ "name": "Venla Vastamäki" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Isäntä",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Henry Jaakkola" },
|
||||
{ "name": "Sakke Kangas" },
|
||||
{ "name": "Otto Torkkeli" },
|
||||
{ "name": "Tommi Oinen" },
|
||||
{ "name": "Eero Ketonen" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Lukkari",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Tuomo Leino" },
|
||||
{ "name": "Hami Hyytinen" },
|
||||
{ "name": "Tuomas Pajunpää" },
|
||||
{ "name": "Samuel Laine" },
|
||||
{ "name": "Toni Miilunpalo" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Lukkarikisällit",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Jesse Räisänen" },
|
||||
{ "name": "Eino Laakso" },
|
||||
{ "name": "Sakari Harjunpää" },
|
||||
{ "name": "Niilo Ojala" },
|
||||
{ "name": "Ilkka Huttu" },
|
||||
{ "name": "Akseli Järvinen" }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
{
|
||||
"name_fi": "Pajatoimikunta",
|
||||
"name_en": "",
|
||||
"roles": [
|
||||
{
|
||||
"name_fi": "Pajavastaava",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Karl Lipping" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Pajakisälli",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Tommi Sytelä" },
|
||||
{ "name": "Eerikki Eskola" },
|
||||
{ "name": "Arkadii Kolchin" },
|
||||
{ "name": "Samu Nyman" },
|
||||
{ "name": "Konsta Langi" },
|
||||
{ "name": "Johannes Viirimäki" },
|
||||
{ "name": "Justus Ojala" },
|
||||
{ "name": "Ville Tujunen" },
|
||||
{ "name": "Antti Tarkka" },
|
||||
{ "name": "Pyry Vaara" }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
{
|
||||
"name_fi": "SIK100-toimikunta",
|
||||
"name_en": "",
|
||||
"roles": [
|
||||
{
|
||||
"name_fi": "Puheenjohtaja",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Erna Virtanen" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Webivastaava",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Jaakko Koskela" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Markkinointivastaava",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Sasu Salasti" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Yritysvastaava",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Juuli Leppänen" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Seminaarivastaava",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Sini Huhtinen" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Kevätkarnevaalimajuri",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Olli Komulainen" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "PoTa100-pääjuhlatirehtööri",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Emmaleena Ahonen" },
|
||||
{ "name": "Jonna Tammikivi" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "PoTa100-jatkokuvernööri",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Mikael Liimatainen" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "PoTa100-sillistirehtööri",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Tuomo Leino" }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
{
|
||||
"name_fi": "Teknologiatoimikunta",
|
||||
"name_en": "",
|
||||
"roles": [
|
||||
{
|
||||
"name_fi": "Teknologiamestari",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Oskari Ponkala" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Tekniikkavastaava",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Antti Mäki" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Web-Kisälli",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Ilari Ojakorpi" },
|
||||
{ "name": "Leo Lahti" },
|
||||
{ "name": "Jyri Korhonen" },
|
||||
{ "name": "Tuukka Syrjänen" },
|
||||
{ "name": "Emmaleena Ahonen" },
|
||||
{ "name": "Mikko Suhonen" },
|
||||
{ "name": "Jaakko Koskela" },
|
||||
{ "name": "Justus Ojala" }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
{
|
||||
"name_fi": "Ulkotoimikunta",
|
||||
"name_en": "",
|
||||
"roles": [
|
||||
{
|
||||
"name_fi": "Ulkomestari",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Oliver Hiekkamies" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Kv-ISOvastaava",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Elias Hirvonen" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "International Helper",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Ville-Pekka Laakkonen" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Ulkosuhdevastaava",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Leo Muller" },
|
||||
{ "name": "Eino Tyrvänen" },
|
||||
{ "name": "Pekka Aho" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Ulkowanhus",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Jyri Korhonen" }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"name_fi": "Yrityssuhdetoimikunta",
|
||||
"name_en": "",
|
||||
"roles": [
|
||||
{
|
||||
"name_fi": "Yrityssuhdemestari",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Otto Julkunen" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Excursiopäävastaava",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Henry Gustafsson" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name_fi": "Yrityssuhdevastaava",
|
||||
"name_en": "",
|
||||
"representatives": [
|
||||
{ "name": "Ilkka Huttu" },
|
||||
{ "name": "Arkadii Kolchin" },
|
||||
{ "name": "Oskari Luukkonen" },
|
||||
{ "name": "Niilo Ojala" },
|
||||
{ "name": "Emma Reinikainen" },
|
||||
{ "name": "Melina Sundell" },
|
||||
{ "name": "Elma Tuohimetsä" }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,18 +1,18 @@
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
import { Occupation } from "@models/Contacts";
|
||||
import ContactCard from "./ContactCard";
|
||||
import blank_profile from "@assets/img/blank_profile.png";
|
||||
import { Committee } from "@views/ContactsPage/ContactsPageView"
|
||||
import { colors } from "@theme/colors";
|
||||
|
||||
interface CommitteeContainerProps {
|
||||
name_fi: string;
|
||||
name_en: string;
|
||||
contacts: Occupation[];
|
||||
committee: Committee;
|
||||
}
|
||||
|
||||
const Container = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
color: ${colors.darkBlue};
|
||||
|
||||
@@ -28,29 +28,27 @@ const Container = styled.div`
|
||||
& > div {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: flex-start;
|
||||
justify-content: center;
|
||||
}
|
||||
`;
|
||||
|
||||
const CommitteeContainer: React.FC<CommitteeContainerProps> = ({ name_fi, name_en, contacts }) => (
|
||||
const CommitteeContainer: React.FC<CommitteeContainerProps> = ({ committee }) => (
|
||||
<Container>
|
||||
<p>
|
||||
{name_fi}
|
||||
</p>
|
||||
<p>
|
||||
{name_en}
|
||||
{committee.name_fi||committee.name_en}
|
||||
</p>
|
||||
<div>
|
||||
{contacts.map(occupation => (
|
||||
occupation.officials.map(official => (
|
||||
{committee.roles.map(role => (
|
||||
role.representatives.map(representative => (
|
||||
<ContactCard
|
||||
key={official.first_name}
|
||||
first_name={official.first_name}
|
||||
last_name={official.last_name}
|
||||
phone={official.phone_number}
|
||||
email={official.email}
|
||||
image={official.image}
|
||||
role={occupation.role}
|
||||
key={representative.name}
|
||||
name={representative.name}
|
||||
phone={representative.phone_number}
|
||||
email={representative.email}
|
||||
//conditional image for dev
|
||||
image={ !(committee.name_en === "Board") ? representative.image : blank_profile}
|
||||
role_fi={role.name_fi}
|
||||
role_en={role.name_en}
|
||||
/>
|
||||
))
|
||||
))}
|
||||
@@ -58,4 +56,4 @@ const CommitteeContainer: React.FC<CommitteeContainerProps> = ({ name_fi, name_e
|
||||
</Container>
|
||||
);
|
||||
|
||||
export default CommitteeContainer;
|
||||
export default CommitteeContainer;
|
||||
@@ -1,24 +1,24 @@
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
import blank_profile from "@assets/img/blank_profile.png";
|
||||
import { Role } from "@models/Contacts";
|
||||
import { colors } from "@theme/colors";
|
||||
|
||||
const Card = styled.article`
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-flow: row nowrap;
|
||||
padding: 0.5rem;
|
||||
color: ${colors.darkBlue};
|
||||
margin: 1rem;
|
||||
width: 19rem;
|
||||
`;
|
||||
|
||||
const ImageContainer = styled.div`
|
||||
padding: 1rem;
|
||||
padding: 0.5rem;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
max-height: 100px;
|
||||
max-width: 100px;
|
||||
height: 5rem;
|
||||
width: 5rem;
|
||||
|
||||
& > img {
|
||||
width: 100%;
|
||||
@@ -30,41 +30,49 @@ const ImageContainer = styled.div`
|
||||
const Info = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0.5rem;
|
||||
justify-content: flex-start;
|
||||
font-size: 1rem;
|
||||
font-weight: 300;
|
||||
align-items: flex-start;
|
||||
padding: 0.25rem;
|
||||
color: ${colors.darkBlue};
|
||||
|
||||
& > p {
|
||||
font-size: 0.8rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
& > h1 {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
`;
|
||||
|
||||
interface ContactCardProps {
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
phone: number;
|
||||
name: string;
|
||||
phone: string;
|
||||
email: string;
|
||||
image: string;
|
||||
role: Role;
|
||||
role_fi: string;
|
||||
role_en: string;
|
||||
}
|
||||
|
||||
const ContactCard: React.FC<ContactCardProps> = ({ first_name, last_name, phone, email, image, role }) => {
|
||||
const fullName = `${first_name} ${last_name}`;
|
||||
const ContactCard: React.FC<ContactCardProps> = ({ name, phone, email, image, role_fi, role_en }) => {
|
||||
return(
|
||||
<Card>
|
||||
<ImageContainer>
|
||||
<img
|
||||
src={image || blank_profile}
|
||||
alt={fullName}
|
||||
/>
|
||||
</ImageContainer>
|
||||
{image ?
|
||||
<ImageContainer>
|
||||
<img
|
||||
src={image}
|
||||
alt={name}
|
||||
/>
|
||||
</ImageContainer> : null
|
||||
}
|
||||
<Info>
|
||||
<p>{fullName}</p>
|
||||
<p>{phone}</p>
|
||||
<p>{email}</p>
|
||||
<p>{role.name_fi}</p>
|
||||
<p>{role.name_en}</p>
|
||||
<h1>{name}</h1>
|
||||
<p>{role_fi || role_en}</p>
|
||||
{phone ? <p>{phone}</p> : null}
|
||||
{email ? <p>{email}</p> : null}
|
||||
</Info>
|
||||
</Card>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default ContactCard;
|
||||
export default ContactCard;
|
||||
@@ -1,53 +0,0 @@
|
||||
import axios from "axios";
|
||||
|
||||
const url = `${process.env.API_URL}/contacts`;
|
||||
const committeeUrl = `${process.env.API_URL}/committees`;
|
||||
|
||||
export interface Committee {
|
||||
name_fi: string;
|
||||
name_en: string;
|
||||
}
|
||||
|
||||
export interface Role {
|
||||
name_fi: string;
|
||||
name_en: string;
|
||||
description_fi: string;
|
||||
description_en: string;
|
||||
committee: Committee;
|
||||
is_board: boolean;
|
||||
}
|
||||
|
||||
export interface Contact {
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
phone_number: number;
|
||||
email: string;
|
||||
image: string;
|
||||
}
|
||||
|
||||
export interface Occupation {
|
||||
role: Role;
|
||||
start_date: string;
|
||||
end_date: string;
|
||||
officials: Contact[];
|
||||
}
|
||||
|
||||
export async function getContacts(year: number = new Date().getFullYear()): Promise<Occupation[]> {
|
||||
try {
|
||||
const resp = await axios.get(`${url}?year=${year}`);
|
||||
return resp.data["results"];
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
export async function getCommittees(): Promise<Committee[]> {
|
||||
try {
|
||||
const resp = await axios.get(`${committeeUrl}`);
|
||||
return resp.data["results"];
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
@@ -1,86 +1,14 @@
|
||||
import React from "react";
|
||||
import { Helmet } from "react-helmet";
|
||||
import { StaticContext } from "@server/StaticContext";
|
||||
import { getContacts, Occupation, Committee, getCommittees } from "@models/Contacts";
|
||||
import ContactsPageView from "@views/ContactsPage/ContactsPageView";
|
||||
|
||||
interface ContactsPageProps {
|
||||
staticContext: StaticContext;
|
||||
}
|
||||
const ContactsPage: React.FC = () => (
|
||||
<>
|
||||
<Helmet>
|
||||
<link rel="canonical" href="https://sik.ayy.fi/INSERT_PATH_HERE!" />
|
||||
</Helmet>
|
||||
<ContactsPageView />
|
||||
</>
|
||||
);
|
||||
|
||||
interface ContactsPageState {
|
||||
contacts: Occupation[];
|
||||
committees: Committee[];
|
||||
}
|
||||
|
||||
class ContactsPage extends React.Component<ContactsPageProps, ContactsPageState> {
|
||||
constructor(props: ContactsPageProps) {
|
||||
super(props);
|
||||
const { staticContext } = props;
|
||||
|
||||
if (staticContext) {
|
||||
/* The static context is an object that manages promises when
|
||||
rendering on the server. If staticContext exists, that means
|
||||
we have to store all promises in it. Otherwise, operate
|
||||
normally. See server/index.ts. */
|
||||
if (staticContext.resolutions.getContacts) {
|
||||
const contacts = staticContext.resolutions.getContacts as Occupation[];
|
||||
const committees = staticContext.resolutions.getCommittees as Committee[];
|
||||
this.state = {
|
||||
contacts,
|
||||
committees,
|
||||
};
|
||||
} else {
|
||||
this.state = {
|
||||
contacts: [],
|
||||
committees: [],
|
||||
};
|
||||
const promiseContacts = this.fetchContacts();
|
||||
const promiseCommittees = this.fetchCommittees();
|
||||
staticContext.promises.getContacts = promiseContacts;
|
||||
staticContext.promises.getCommittees = promiseCommittees;
|
||||
}
|
||||
} else {
|
||||
this.state = {
|
||||
contacts: [],
|
||||
committees: [],
|
||||
};
|
||||
this.fetchContacts();
|
||||
this.fetchCommittees();
|
||||
}
|
||||
}
|
||||
|
||||
fetchContacts = () => {
|
||||
const getContactsPromise = getContacts();
|
||||
getContactsPromise.then(contacts => {
|
||||
this.setState({
|
||||
contacts,
|
||||
});
|
||||
});
|
||||
return getContactsPromise;
|
||||
}
|
||||
|
||||
fetchCommittees = () => {
|
||||
const getCommitteesPromise = getCommittees();
|
||||
getCommitteesPromise.then(committees => {
|
||||
this.setState({
|
||||
committees,
|
||||
});
|
||||
});
|
||||
return getCommitteesPromise;
|
||||
}
|
||||
|
||||
render() {
|
||||
const { contacts, committees } = this.state;
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<link rel="canonical" href="https://sik.ayy.fi/INSERT_PATH_HERE!" />
|
||||
</Helmet>
|
||||
<ContactsPageView contacts={contacts} committees={committees} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ContactsPage;
|
||||
export default ContactsPage;
|
||||
@@ -1,15 +1,20 @@
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
import { Occupation, Committee } from "@models/Contacts";
|
||||
import CommitteeContainer from "@components/CommitteeContainer";
|
||||
import { Divider, TextSection } from "@components/index";
|
||||
import { colors } from "@theme/colors";
|
||||
import { Link } from "@components/index";
|
||||
|
||||
interface ContactsPageViewProps {
|
||||
contacts: Occupation[];
|
||||
committees: Committee[];
|
||||
}
|
||||
import BoardJson from "@assets/json/board.json";
|
||||
import HvtmkJson from "@assets/json/hvtmk.json";
|
||||
import MtmkJson from "@assets/json/mtmk.json";
|
||||
import OptmkJson from "@assets/json/optmk.json";
|
||||
import OtmkJson from "@assets/json/otmk.json";
|
||||
import PtmkJson from "@assets/json/ptmk.json";
|
||||
import SstmkJson from "@assets/json/sstmk.json";
|
||||
import TtmkJson from "@assets/json/ttmk.json";
|
||||
import UtmkJson from "@assets/json/utmk.json";
|
||||
import YtmkJson from "@assets/json/ytmk.json";
|
||||
|
||||
const BlueLink = styled(Link)`
|
||||
color: ${colors.blue1};
|
||||
@@ -19,46 +24,120 @@ const BlueLink = styled(Link)`
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
class ContactsPageView extends React.Component<ContactsPageViewProps> {
|
||||
render() {
|
||||
const { contacts, committees } = this.props;
|
||||
const board = contacts.filter(x => x.role.is_board);
|
||||
return (
|
||||
<>
|
||||
<TextSection>
|
||||
<p>
|
||||
Asiaa olisi, mutta kehen ottaa yhteyttä?<br />
|
||||
Tämä sivu yrittää valottaa sen oikean ihmisen puhelinnumeroa ja sähköpostiosoitetta.
|
||||
</p>
|
||||
</TextSection>
|
||||
|
||||
<TextSection>
|
||||
<div>
|
||||
<CommitteeContainer name_fi="Hallitus" name_en="Board" contacts={board} />
|
||||
<p>
|
||||
{"Hallitukseen saa yhteyden lähettämällä sähköpostia "}
|
||||
<BlueLink to="mailto:sik-hallitus@list.ayy.fi">
|
||||
sik-hallitus@list.ayy.fi
|
||||
</BlueLink>
|
||||
</p>
|
||||
</div>
|
||||
</TextSection>
|
||||
<Divider />
|
||||
{committees.map((committee, index) => {
|
||||
// const order = committee.name_fi === "Toimikunnattomat" ? 1 : 0;
|
||||
return (
|
||||
<>
|
||||
<TextSection key={index}>
|
||||
<CommitteeContainer name_fi={committee.name_fi} name_en={committee.name_en} contacts={contacts.filter(x => x.role.committee.name_fi === committee.name_fi)} />
|
||||
</TextSection>
|
||||
<Divider />
|
||||
</>
|
||||
)
|
||||
})}
|
||||
</>
|
||||
);
|
||||
}
|
||||
export interface Committee {
|
||||
name_fi: string;
|
||||
name_en: string;
|
||||
roles: Array<Role>;
|
||||
}
|
||||
|
||||
export default ContactsPageView;
|
||||
export interface Role {
|
||||
name_fi: string;
|
||||
name_en: string;
|
||||
representatives: Array<Representative>
|
||||
}
|
||||
|
||||
export interface Representative {
|
||||
name: string;
|
||||
phone_number?: string;
|
||||
email?: string;
|
||||
image?: string;
|
||||
}
|
||||
|
||||
const ContactsPageView: React.FC = () => (
|
||||
<>
|
||||
<TextSection>
|
||||
<p>
|
||||
Asiaa olisi, mutta kehen ottaa yhteyttä?<br />
|
||||
Tämä sivu yrittää valottaa sen oikean ihmisen puhelinnumeroa ja sähköpostiosoitetta.
|
||||
</p>
|
||||
</TextSection>
|
||||
|
||||
<TextSection>
|
||||
<div>
|
||||
<CommitteeContainer committee={BoardJson} />
|
||||
<p>
|
||||
{"Hallitukseen saa yhteyden lähettämällä sähköpostia "}
|
||||
<BlueLink to="mailto:sik-hallitus@list.ayy.fi">
|
||||
sik-hallitus@list.ayy.fi
|
||||
</BlueLink>
|
||||
</p>
|
||||
</div>
|
||||
</TextSection>
|
||||
|
||||
<Divider />
|
||||
|
||||
<TextSection >
|
||||
<div>
|
||||
<CommitteeContainer committee={HvtmkJson} />
|
||||
</div>
|
||||
</TextSection>
|
||||
|
||||
<Divider />
|
||||
|
||||
<TextSection >
|
||||
<div>
|
||||
<CommitteeContainer committee={MtmkJson} />
|
||||
</div>
|
||||
</TextSection>
|
||||
|
||||
<Divider />
|
||||
|
||||
<TextSection >
|
||||
<div>
|
||||
<CommitteeContainer committee={OptmkJson} />
|
||||
</div>
|
||||
</TextSection>
|
||||
|
||||
<Divider />
|
||||
|
||||
<TextSection >
|
||||
<div>
|
||||
<CommitteeContainer committee={OtmkJson} />
|
||||
</div>
|
||||
</TextSection>
|
||||
|
||||
<Divider />
|
||||
|
||||
<TextSection >
|
||||
<div>
|
||||
<CommitteeContainer committee={PtmkJson} />
|
||||
</div>
|
||||
</TextSection>
|
||||
|
||||
<Divider />
|
||||
|
||||
<TextSection >
|
||||
<div>
|
||||
<CommitteeContainer committee={SstmkJson} />
|
||||
</div>
|
||||
</TextSection>
|
||||
|
||||
<Divider />
|
||||
|
||||
<TextSection >
|
||||
<div>
|
||||
<CommitteeContainer committee={TtmkJson} />
|
||||
</div>
|
||||
</TextSection>
|
||||
|
||||
<Divider />
|
||||
|
||||
<TextSection >
|
||||
<div>
|
||||
<CommitteeContainer committee={UtmkJson} />
|
||||
</div>
|
||||
</TextSection>
|
||||
|
||||
<Divider />
|
||||
|
||||
<TextSection >
|
||||
<div>
|
||||
<CommitteeContainer committee={YtmkJson} />
|
||||
</div>
|
||||
</TextSection>
|
||||
|
||||
<Divider />
|
||||
</>
|
||||
)
|
||||
|
||||
export default ContactsPageView;
|
||||
+2
-1
@@ -3,6 +3,7 @@
|
||||
"outDir": "./dist/",
|
||||
"sourceMap": true,
|
||||
"noImplicitAny": false,
|
||||
"resolveJsonModule": true,
|
||||
"esModuleInterop": true,
|
||||
"experimentalDecorators": true,
|
||||
// "emitDecoratorMetadata": true,
|
||||
@@ -60,4 +61,4 @@
|
||||
"./src/**/*",
|
||||
"./types/**/*"
|
||||
],
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user