diff --git a/k8s/deployment-eu.yaml b/k8s/deployment-eu.yaml index a3b816b..74f16a0 100644 --- a/k8s/deployment-eu.yaml +++ b/k8s/deployment-eu.yaml @@ -31,7 +31,7 @@ spec: command: - /bin/sh - -c - - 'VITE_PARLIAMENT_SEATS=21 npm run build && npm run start' + - 'VITE_EU=true npm run build && npm run start' ports: - containerPort: 80 readinessProbe: diff --git a/src/components/App.css b/src/components/App.css index c7d04bd..475e86e 100644 --- a/src/components/App.css +++ b/src/components/App.css @@ -37,7 +37,6 @@ body { } } - .App { text-align: center; } @@ -64,7 +63,7 @@ body { margin: auto; } -.App-sliders { +.App-sliders span { align-items: center; color: #fff; margin-left: auto; @@ -150,7 +149,7 @@ body { display: flex; } -.App-sliders { +.App-sliders span { background: #333; flex: 1; display: flex; @@ -220,6 +219,14 @@ body { position: relative; } +.EU .wide { + display: none; +} + +.EU .small { + display: block; +} + .party h1, .party h2 { color: #fff; @@ -291,7 +298,7 @@ body { display: block; } - .App-sliders { + .App-sliders span { padding: 0; } } @@ -343,7 +350,7 @@ body { } @media only screen and (max-width: 850px) { - .App-sliders { + .App-sliders span { flex-direction: row; margin-left: 0; margin-right: 0; diff --git a/src/components/App.jsx b/src/components/App.jsx index 8a8322f..d857399 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -13,64 +13,44 @@ import Seating from './Seating' import Sliders from './Sliders' import Polls from './Polls' import Footer from './Footer' +const EU = import.meta.env.VITE_EU === 'true' class App extends Component { - sumGroups(parties) { - const regering = parties - .filter((a) => a.affiliation === 'regering') - .sort((a, b) => b.seats - a.seats) - const opposition = parties - .filter((a) => a.affiliation === 'opposition') - .sort((a, b) => b.seats - a.seats) - const stod = parties - .filter((a) => a.affiliation === 'stod') - .sort((a, b) => b.seats - a.seats) - - return [ - { - name: 'regering', - parties: regering, - title: `Regering`, - seats: regering.reduce((t, party) => t + party.seats, 0), - percentage: - Math.round( - regering.reduce((t, party) => t + party.seatPercentage, 0) * 1000 - ) / 10, - }, + sumGroups(parties, groups) { + const partiesByGroup = Object.entries(groups).reduce( + (acc, [key, group]) => [ + ...acc, + { + ...group, + name: key, + parties: parties + .filter((a) => (EU ? a.eu === key : a.affiliation === key)) + .sort((a, b) => b.seats - a.seats), + }, + ], + [] + ) - { - name: 'stod', - parties: stod, - title: `Stödpartier`, - seats: stod.reduce((t, party) => t + party.seats, 0), - percentage: - Math.round( - stod.reduce((t, party) => t + party.seatPercentage, 0) * 1000 - ) / 10, - }, - { - name: 'opposition', - parties: opposition, - title: `Opposition`, - percentage: - Math.round( - opposition.reduce((t, party) => t + party.seatPercentage, 0) * 1000 - ) / 10, - seats: opposition.reduce((t, party) => t + party.seats, 0), - }, - ] + return partiesByGroup.map((group) => ({ + ...group, + seats: group.parties.reduce((t, party) => t + party.seats, 0), + percentage: + Math.round( + group.parties.reduce((t, party) => t + party.seatPercentage, 0) * 1000 + ) / 10, + })) } render() { const { parties, coalitions, groups, polls } = this.props - const legendGroups = this.sumGroups(parties) - const allParties = legendGroups.reduce((a, b) => a.concat(b.parties), []) + const legendGroups = this.sumGroups(parties, groups) + const allParties = legendGroups.reduce((a, b) => [...a, ...b.parties], []) const totalPercentage = Math.round( parties.reduce((t, party) => t + party.percentage, 0) ) return ( -
+
Mandatkollen logotyp @@ -139,7 +119,8 @@ class App extends Component {

Eller experimentera själv %

{totalPercentage < 99.6 || totalPercentage > 100.4 ? ( diff --git a/src/components/Seating.jsx b/src/components/Seating.jsx index 7abadc2..408fb09 100644 --- a/src/components/Seating.jsx +++ b/src/components/Seating.jsx @@ -9,7 +9,6 @@ const obj = (parties) => ) const Seating = ({ parties, seatCount = true }) => { - console.log('seating', parties, seatCount) return parliamentSVG(obj(parties), seatCount) } diff --git a/src/components/Sliders.jsx b/src/components/Sliders.jsx index 1946181..3dce05d 100644 --- a/src/components/Sliders.jsx +++ b/src/components/Sliders.jsx @@ -4,41 +4,21 @@ import pureact from 'pureact' import Mixer from './Mixer.jsx' import { dragOver, dropUpdate, dragEnter } from '../lib/draganddrop' -const Sliders = ({ parties, editCoalitions }) => ( +const Sliders = ({ groups, parties, editCoalitions }) => (
-
- {parties - .filter((x) => x.affiliation === 'regering') - .map((party) => ( - - ))} -
-
- {parties - .filter((x) => x.affiliation === 'stod') - .map((party) => ( - - ))} -
-
- {parties - .filter((x) => x.affiliation === 'opposition') - .map((party) => ( - - ))} -
+ {Object.entries(groups).map(([group, { title }]) => ( +
+ {parties + .filter((x) => x.affiliation === group || x.eu === group) + .map((party) => ( + + ))} +
+ ))}
) diff --git a/src/lib/draganddrop.mjs b/src/lib/draganddrop.mjs index 176db04..da3d261 100644 --- a/src/lib/draganddrop.mjs +++ b/src/lib/draganddrop.mjs @@ -26,13 +26,11 @@ const dropUpdate = (affiliation) => (event) => { const dragEnter = (group) => (event) => { event.preventDefault() - console.log('dropenter', group) groupEnter(group) } const dragLeave = (group) => (event) => { event.preventDefault() - console.log('dropleave', group) groupLeave(group) } diff --git a/src/reducers/groups.mjs b/src/reducers/groups.mjs index 163f095..a5af8f4 100644 --- a/src/reducers/groups.mjs +++ b/src/reducers/groups.mjs @@ -1,25 +1,35 @@ -const initialState = { - regering: { hover: false, count: 0 }, - opposition: { hover: false, count: 0 }, - stod: { hover: false, count: 0 }, -} +const EU = import.meta.env.VITE_EU === 'true' +const initialState = EU + ? { + epp: { title: 'EPP', hover: false, count: 0 }, + social: { title: 'S&D', hover: false, count: 0 }, + renew: { title: 'Renew', hover: false, count: 0 }, + greens: { title: 'Greens/EFA', hover: false, count: 0 }, + ecr: { title: 'ECR', hover: false, count: 0 }, + left: { title: 'The Left', hover: false, count: 0 }, + } + : { + regering: { title: 'Regering', hover: false, count: 0 }, + stod: { title: 'Stödpartier', hover: false, count: 0 }, + opposition: { title: 'Opposition', hover: false, count: 0 }, + } export default function (state = initialState, action) { - console.log('action', action) + const group = state[action.group] switch (action.type) { case 'GROUP_ENTER': { - const count = state[action.group].count + 1 + const count = group.count + 1 const newState = { ...state, - [action.group]: { hover: count > 0, count }, + [action.group]: { ...group, hover: count > 0, count }, } return newState } case 'GROUP_LEAVE': { - const count = state[action.group].count - 1 + const count = group.count - 1 return { ...state, - [action.group]: { hover: count > 0, count }, + [action.group]: { ...group, hover: count > 0, count }, } } default: diff --git a/src/reducers/parties.mjs b/src/reducers/parties.mjs index 97173c4..1e20889 100644 --- a/src/reducers/parties.mjs +++ b/src/reducers/parties.mjs @@ -1,6 +1,6 @@ import { Parliament } from '../lib/parliament.mjs' - -const SEATS = parseFloat(import.meta.env.VITE_PARLIAMENT_SEATS || 349) +const EU = import.meta.env.VITE_EU === 'true' +const SEATS = EU ? 21 : 349 const parties = [ { id: 1, @@ -8,6 +8,7 @@ const parties = [ percentage: 5.34, seats: 19, affiliation: 'regering', + eu: 'epp', colour: '#3163A6', abbreviation: 'KD', }, @@ -17,6 +18,7 @@ const parties = [ percentage: 19.1, seats: 68, affiliation: 'regering', + eu: 'ecr', colour: '#2F80ED', abbreviation: 'M', }, @@ -26,6 +28,7 @@ const parties = [ percentage: 4.61, seats: 16, affiliation: 'regering', + eu: 'renew', colour: '#56CCF2', abbreviation: 'L', }, @@ -35,6 +38,7 @@ const parties = [ percentage: 6.71, seats: 24, affiliation: 'opposition', + eu: 'renew', colour: '#27AE60', abbreviation: 'C', }, @@ -44,6 +48,7 @@ const parties = [ percentage: 20.54, seats: 73, affiliation: 'stod', + eu: 'ecr', colour: '#F2C94C', abbreviation: 'SD', }, @@ -53,6 +58,7 @@ const parties = [ percentage: 30.33, seats: 107, affiliation: 'opposition', + eu: 'social', colour: '#E04B49', abbreviation: 'S', }, @@ -62,6 +68,7 @@ const parties = [ percentage: 5.08, seats: 18, affiliation: 'opposition', + eu: 'greens', colour: '#219653', abbreviation: 'MP', }, @@ -71,6 +78,7 @@ const parties = [ percentage: 6.75, seats: 24, affiliation: 'opposition', + eu: 'left', colour: '#B12827', abbreviation: 'V', }, @@ -94,7 +102,11 @@ export default function (state = initialState, action) { const updatedParties = state .map((party) => party.abbreviation === action.abbreviation - ? { ...party, affiliation: action.affiliation } + ? { + ...party, + affiliation: action.affiliation, + eu: action.affiliation, + } : party ) .sort(parliament.sort)