-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
e57276f
commit 37564e6
Showing
9 changed files
with
227 additions
and
60 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| import { OpsData } from './opsData' | ||
| import { State } from './state' | ||
|
|
||
| const numberToString = function (n: number) { | ||
| if (isNaN(n)) { | ||
| return '' | ||
| } else { | ||
| return n.toString() | ||
| } | ||
| } | ||
|
|
||
| const setInnerText = function (elemId: string, textToAdd: string) { | ||
| const elem = document.getElementById(elemId) | ||
| if (elem) { | ||
| elem.innerText = textToAdd | ||
| } | ||
| } | ||
|
|
||
| const fillPopUp = function (data: OpsData) { | ||
| setInnerText('popUpTypeOps', data.typeOps) | ||
| setInnerText('popUpDate', data.date.toDateString()) | ||
| setInnerText('popUpBoatType', data.boatType) | ||
| setInnerText('popUpNbSurvivor', numberToString(data.nbSurvivor)) | ||
| setInnerText('popUpFemale', numberToString(data.female)) | ||
| setInnerText('popUpMale', numberToString(data.male)) | ||
| setInnerText('popUpMinor', numberToString(data.under18)) | ||
| setInnerText('popUpPregnant', numberToString(data.pregnantwomen)) | ||
| setInnerText('popUpUnaccompagnied', numberToString(data.under18unacc)) | ||
| setInnerText('popUpChildren', numberToString(data.under5)) | ||
| setInnerText('popUpNationalities', numberToString(data.nbNationalities)) | ||
| setInnerText('popUpWind', numberToString(data.windForce)) | ||
| setInnerText('popUpWave', numberToString(data.waveHeight)) | ||
| setInnerText('popUpLat', numberToString(data.latitude)) | ||
| setInnerText('popUpLon', numberToString(data.longitude)) | ||
| } | ||
|
|
||
| export const showPopUp = function (data: OpsData) { | ||
| const popUp = document.getElementById('popUp') | ||
| if (popUp) { | ||
| popUp.classList.add('scale-100') | ||
| } | ||
| fillPopUp(data) | ||
| } | ||
|
|
||
| export const updateStats = function (state: State) { | ||
| setInnerText('statsMinDate', state.minDate.toDateString()) | ||
| setInnerText('statsMaxDate', state.maxDate.toDateString()) | ||
| let nbSurvivor = 0 | ||
| let female = 0 | ||
| let male = 0 | ||
| let under18 = 0 | ||
| let pregnantwomen = 0 | ||
| let under18unacc = 0 | ||
| let under5 = 0 | ||
| let nbNationalities = 0 | ||
| const days = new Set() | ||
| for (const data of state.timeFilteredData) { | ||
| nbSurvivor = data.nbSurvivor ? nbSurvivor + data.nbSurvivor : nbSurvivor | ||
| female = data.female ? female + data.female : female | ||
| male = data.male ? male + data.male : male | ||
| under18 = data.under18 ? under18 + data.under18 : under18 | ||
| pregnantwomen = data.pregnantwomen ? pregnantwomen + data.pregnantwomen : pregnantwomen | ||
| under18unacc = data.under18unacc ? under18unacc + data.under18unacc : under18unacc | ||
| under5 = data.under5 ? under5 + data.under5 : under5 | ||
| nbNationalities = data.nbNationalities ? Math.max(nbNationalities, data.nbNationalities) : nbNationalities | ||
| days.add(data.date) | ||
| } | ||
| setInnerText('statsNbSurvivor', numberToString(nbSurvivor)) | ||
| setInnerText('statsFemale', numberToString(female)) | ||
| setInnerText('statsMale', numberToString(male)) | ||
| setInnerText('statsMinor', numberToString(under18)) | ||
| setInnerText('statsPregnant', numberToString(pregnantwomen)) | ||
| setInnerText('statsUnaccompagnied', numberToString(under18unacc)) | ||
| setInnerText('statsChildren', numberToString(under5)) | ||
| setInnerText('statsNationalities', numberToString(nbNationalities)) | ||
| setInnerText('statsNbDays', numberToString(days.size)) | ||
| // Mobile view | ||
| setInnerText('statsMinDate2', state.minDate.toDateString()) | ||
| setInnerText('statsMaxDate2', state.maxDate.toDateString()) | ||
| setInnerText('statsNbSurvivor2', numberToString(nbSurvivor)) | ||
| setInnerText('statsNbDays2', numberToString(days.size)) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,125 @@ | ||
| <template> | ||
|
|
||
| <!-- mobile version --> | ||
| <div id='stats' :style="style" class="bg-white rounded-xl flex flex-col justify-between w-full pb-10 z-10 position-mobile sm:invisible"> | ||
| <h1 class=' text-sm text-white text-center rounded-t mb-1'><span id='statsMinDate2'/> <span class ='icon icon-calendar'/> - <span id='statsMaxDate2'/><span class ='icon icon-calendar ml-1'/></h1> | ||
| <div class='flex flex-row justify-around'> | ||
| <div class='flex flex-col'> | ||
| <span class ='icon icon-rescue text-2xl text-center orange-color'/> | ||
| <p class='text-sm blue-color font-bold'><span id='statsNbSurvivor' class='orange-color text-lg'/> people rescued</p> | ||
| </div> | ||
| <div class='flex flex-col'> | ||
| <span class ='icon icon-sosmed-ship text-4xl leading-6 text-center detail-color'/> | ||
| <p class='text-sm text-center blue-color font-bold'><span id='statsNbDays' class='orange-color text-lg'/> operational days</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- sm version --> | ||
| <div id='stats' :style="style" class="bg-white rounded-xl flex flex-col justify-between w-1/5 h-1/2 position-desktop invisible sm:visible"> | ||
| <h1 class='text-white text-center rounded-t mb-3'><span id='statsMinDate'/> <span class ='icon icon-calendar text-sm'/> - <span id='statsMaxDate'/><span class ='icon icon-calendar text-sm ml-1'/></h1> | ||
| <div class='flex flex-col pb-6 pl-6 pr-6'> | ||
| <span class ='icon icon-rescue text-5xl text-center orange-color'/> | ||
| <p class='blue-color text-xl font-bold mb-5'><span id='statsNbSurvivor' class='orange-color'/> people rescued</p> | ||
| <div class="flex flex-row justify-around mb-5 blue-color"> | ||
| <div class="flex flex-col"> | ||
| <span class ='icon icon-female text-5xl text-center'/> | ||
| <span id='statsFemale' class='font-bold text-center'/> | ||
| <p class='text-xs uppercase text-center'>females</p> | ||
| </div> | ||
| <div class="flex flex-col"> | ||
| <span class ='icon icon-male text-5xl text-center'/> | ||
| <span id='statsMale' class='font-bold text-center'/> | ||
| <p class='text-xs uppercase text-center'>males</p> | ||
| </div> | ||
| <div class="flex flex-col"> | ||
| <span class ='icon icon-kid text-5xl text-center'/> | ||
| <span id='statsMinor' class='font-bold text-center'/> | ||
| <p class='text-xs uppercase text-center'>minors</p> | ||
| </div> | ||
| </div> | ||
| <div class="flex flex-row justify-around border-dotted border-color border-2 rounded-xl p-4 mb-5"> | ||
| <div class="flex flex-row"> | ||
| <div class="flex flex-col"> | ||
| <span id='statsPregnant' class='font-bold text-right detail-color'/> | ||
| <p class='text-3xs uppercase text-right detail-color'>pregnant</p> | ||
| </div> | ||
| <span class ='icon icon-pregnant text-4xl text-right detail-color'/> | ||
| </div> | ||
| <div class="flex flex-col"> | ||
| <span class ='icon text-4xl text-center detail-color'/> | ||
| <span id='statsUnaccompagnied' class='font-bold text-center detail-color'/> | ||
| <p class='text-3xs uppercase text-center detail-color'>unaccompagnied</p> | ||
| </div> | ||
| <div class="flex flex-row"> | ||
| <span class ='icon icon-bib text-3xl text-left detail-color'/> | ||
| <div class="flex flex-col"> | ||
| <span id='statsChildren' class='font-bold text-center detail-color'/> | ||
| <p class='text-3xs uppercase text-left detail-color'>children</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <p class='text-sm text-center orange-color'><span class ='icon icon-planet mr-3'/><span id='statsNationalities'/> nationalities</p> | ||
| <hr class='border w-1/4 ml-auto mr-auto mt-2 mb-2'/> | ||
| <span class ='icon icon-sosmed-ship text-8xl leading-6 text-center detail-color mb-2'/> | ||
| <p class='text-center blue-color text-xl font-bold'><span id='statsNbDays' class='orange-color'/> operational days</p> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script lang='ts'> | ||
| import { Colors } from '@/utils/Colors' | ||
| export default { | ||
| name: 'Stats', | ||
| computed: { | ||
| style () { | ||
| return ` | ||
| --orange-color: ${Colors.ORANGE}; | ||
| --blue-color: ${Colors.BLUE}; | ||
| ` | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <!-- Add 'scoped' attribute to limit CSS to this component only --> | ||
| <style scoped> | ||
| .position-desktop { | ||
| position: absolute; | ||
| top: 20%; | ||
| margin-left: 5%; | ||
| } | ||
| .position-mobile { | ||
| position: absolute; | ||
| bottom: 55px; | ||
| } | ||
| h1 { | ||
| background-color: var(--orange-color); | ||
| } | ||
| .blue-color { | ||
| color: var(--blue-color); | ||
| } | ||
| .orange-color { | ||
| color: var(--orange-color); | ||
| } | ||
| .detail-color { | ||
| color: var(--orange-color); | ||
| } | ||
| .border-color { | ||
| border-color: var(--orange-color); | ||
| } | ||
| .text-3xs { | ||
| font-size: 0.5rem; | ||
| line-height: 0.5rem; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters