From 0a96cf91c182db55e8020fb60c7de0e1da99d40c Mon Sep 17 00:00:00 2001 From: Tykayn Date: Thu, 23 May 2024 00:46:02 +0200 Subject: [PATCH] up style, simplify ui --- ordre-du-jour/odj2/src/app/app.component.html | 90 +++++++++++----- ordre-du-jour/odj2/src/app/app.component.scss | 64 +++++++++-- ordre-du-jour/odj2/src/app/app.component.ts | 101 ++++++++++++------ ordre-du-jour/odj2/src/index.html | 3 + 4 files changed, 187 insertions(+), 71 deletions(-) diff --git a/ordre-du-jour/odj2/src/app/app.component.html b/ordre-du-jour/odj2/src/app/app.component.html index 8e84227c..9573ec58 100644 --- a/ordre-du-jour/odj2/src/app/app.component.html +++ b/ordre-du-jour/odj2/src/app/app.component.html @@ -15,15 +15,30 @@
  • + [ngClass]="{ active: (currentSubjectId === i) , 'is-finished': s.finished}"> {{s.id}}) {{ s.title }}

    - {{ s.duration }} min, par {{ s.author }}. + + {{ s.duration }} min, par {{ s.author }}. + + +
    - Reste: {{ resteTopicMinutes(s) }}. + Reste: {{ resteTopicMinutes(s) }} min.
    Passé: {{ round(s.spentSeconds) }}. + +

    + đŸ—ƒïž conclure le sujet +
    +
    + ⏰ finir +
    +
    +🔔 temps dĂ©passĂ© +
    +

    🎉

    - Sujet: {{percentDoneOfTopic(subjects[currentSubjectId])}} % +
    -

    {{ subjects[currentSubjectId].duration }} min, par {{ subjects[currentSubjectId].author }}

    - +

    + + + + {{ subjects[currentSubjectId].duration }} min, par + + {{ subjects[currentSubjectId].author }} + +

    +

    Début: {{ startTime }}, Fin: {{ endTime }}. Durée: {{round(getMinutesBetweenTwoDates(startDate, endDate))}}

    +

    + notes +

    + + +
    + @@ -154,26 +184,29 @@ - subjects[currentSubjectId].spentSeconds ) }} + +

    + proxy date of now: {{getProxyDateOfNow() | date:'YYYY-MM-dd HH:mm:ss':'Europe/Paris' }} +

    +
    +

    Durée cumulée des sujets donnée dans le pad

    + {{cumul_detected_duration}} minutes. +
    + -

    avancement: {{ getPercentProgressTimeForTopic(subjects[currentSubjectId]) }} %

    -

    - proxy date of now: {{getProxyDateOfNow() | date:'YYYY-MM-dd HH:mm:ss':'Europe/Paris' }} -

    - - -

    Représentation graphique du déroulé ({{progressTotalPercent}} %)

    + une durée de minutes est attribuée par défaut en cas de durée non précisée sur une ligne dans le pad. +     - -
    -
    -
    -
    -
    -
    + + + + + +

    @@ -203,22 +236,18 @@

    -

    - notes -

    - +

    Texte du pad

    + +

    Compte rendu du {{ (today) | date:'yyyy-MM-dd'}}

    - 
    -{{buildCompteRendu()}}
-
    @@ -226,6 +255,13 @@ télécharger le compte rendu +
    +
    +
    + 
    +{{buildCompteRendu()}}
+
    +
    diff --git a/ordre-du-jour/odj2/src/app/app.component.scss b/ordre-du-jour/odj2/src/app/app.component.scss index d0092f9b..df88b5d7 100644 --- a/ordre-du-jour/odj2/src/app/app.component.scss +++ b/ordre-du-jour/odj2/src/app/app.component.scss @@ -45,6 +45,7 @@ h1 { font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + text-overflow: ellipsis; } p { @@ -63,6 +64,12 @@ main { position: relative; } +textarea{ + border: 1px solid #dedede; + padding: 1rem; + width : 100%; + margin-bottom: 1.5em; +} .angular-logo { max-width: 9.2rem; } @@ -79,9 +86,6 @@ main { margin-top: 1.75rem; } -.content p { - margin-top: 1.5rem; -} .divider { width: 1px; @@ -164,18 +168,42 @@ main { display: block; padding: 1rem 1rem 1rem 2rem; border-left: 10px solid white; - width: 20em; - + //width: 20em; + width: 90%; &.active { border-left-color: #00b89c; word-break: break-all; word-wrap: break-word; + min-height: 3em; + + }&.is-finished { + border-left-color: #53e3a2; + color: #0d251a; + word-break: break-all; + word-wrap: break-word; + } } +li{ + & .subject{ + strong{ + width: 90%; + } + p{ + margin-top: 0.25em; + } + } +} + +a{ + color: #00b89c; +} + .is-primary { - background: rgb(47, 86, 27) + background: #00b89c + } label { @@ -185,10 +213,11 @@ label { display: inline-block; } +button, .btn { cursor: pointer; padding: 0.75rem 1.5rem; - border: solid 1px slategray; + border: 0; border-radius: 0.5rem; float: left; margin-right: 2ch; @@ -213,13 +242,18 @@ pre { } .content-current-subject { - padding-left: 5rem; + padding-left: 8rem; box-sizing: border-box; + width: 50em; + p{ + margin-top: 1.5em; + } } .rectangle-time-container{ background: grey; height: 1em; - border-radius: 0.25em; + -moz-border-radius-bottomleft: 0.25em; + -moz-border-radius-bottomright: 0.25em; padding: 0.25rem; overflow: hidden; .frise-temps-subject & { @@ -229,14 +263,22 @@ pre { .rectangle-time-done-part{ box-sizing: border-box; height: 1em; - background: chartreuse; + background: #53e3a2; text-align: right; padding: 0.25rem 0; .frise-temps-subject & { height: 0.5em; } } - +.pull-right{ + float:right; +} +.author{ + font-weight: 600; +} +.alerte-temps{ + color: cornflowerblue; +} @media screen and (max-width: 650px) { .content { flex-direction: column; diff --git a/ordre-du-jour/odj2/src/app/app.component.ts b/ordre-du-jour/odj2/src/app/app.component.ts index d0a87bc7..00cf96c1 100644 --- a/ordre-du-jour/odj2/src/app/app.component.ts +++ b/ordre-du-jour/odj2/src/app/app.component.ts @@ -12,6 +12,26 @@ interface Topic { spentSeconds: number, // nombre de secondes passĂ©es au sujet } +let texte_du_pad_par_default = `* Évolution du flyer "Ă  vous de cartographier" (claireL) + +* Point Sotm (RenĂ©cha) + +* PrĂ©paration AG (Donat) + +* Impressions qtĂ© flyers (OSM-FR, commerces et Ă©ducation si terminĂ© Ă  temps) (Donat) + +* Impression qtĂ© stickers (Florian) + +* SotM-Monde Ă  Paris en 2025 ? (Florian) + +* Point d'information sur la dĂ©marche de la FPOsm de produire du contenu pĂ©dagogique sur la licence ODbL. Une fois finalisĂ© et aprĂšs l'avoir revu, l'association pourrait contribuer de plusieurs façons en diffusant largement ce contenu et en finançant une partie des impressions (François) + +* RĂ©ponse Ă  l'appel Ă  commentaire sur le standard adresse => https://forum.openstreetmap.fr/t/geostandard-adresses-appel-a-commentaires-jusquau-17-mai-2024/22562/ (François) + +* Participation Ă  la journĂ©e nationale de gĂ©omatique d'Enedis le 28 mai prochain (François) + +* Site osm fr amĂ©lioration de la page de contact / faq / liens (Tykayn & ClaireL) +`; @Component({ selector: 'app-root', @@ -25,6 +45,8 @@ export class AppComponent implements OnInit, OnDestroy { startTime: string = "20:30"; // startTime: string = "17:00"; endTime: string = "22:00"; + cumul_detected_duration: number = 1; // cumul des minutes donnĂ©es par le pad de sujets + default_topic_duration: number = 10; // cumul des minutes donnĂ©es par le pad de sujets now: Date = new Date(); @@ -44,10 +66,7 @@ export class AppComponent implements OnInit, OnDestroy { private animator: string = 'Covid Copperfield'; presents: string = '- tykayn'; - pasteLand: string = "* PrĂ©sentation du suivi sur Nextcloud - 5min (tykayn)\n" + - "* RĂ©duction de bus factor - 10min (tykayn)\n" + - "* RĂ©union avec Wikimedia France - 25min (tykayn)\n" + - ""; + pasteLand: string = texte_du_pad_par_default; statsExplication: string = '' @@ -83,13 +102,16 @@ export class AppComponent implements OnInit, OnDestroy { topics.forEach((topic: string) => { let boom = topic.split('-') if (boom[0]) { - let duration = this.findMinutesDurationInDescription(topic) | 0 + + let duration = this.findMinutesDurationInDescription(topic) | this.default_topic_duration accumulatedDuration += duration + let title_without_parenthesis = boom[0].split('(') + newTopics.push({ id: ii, - title: boom[0], + title: title_without_parenthesis[0], duration: duration, spentSeconds: 0, author: this.findAuthorInDescription(topic), @@ -102,6 +124,7 @@ export class AppComponent implements OnInit, OnDestroy { ii += 1; }) + this.cumul_detected_duration = accumulatedDuration this.subjects = newTopics } @@ -141,30 +164,6 @@ export class AppComponent implements OnInit, OnDestroy { interval: any; - ngOnInit() { - this.parseTheListOfTopicsInPasteLand() - - this.startDate = this.makeDateFromHourToday(this.startTime); - this.endDate = this.makeDateFromHourToday(this.endTime); - - let self = this; - this.interval = setInterval(() => { - self.now = new Date() - this.subjects[this.currentSubjectId].spentSeconds += 1 - this.progressTotalPercent = this.getPercentProgressTotal() - // ajouter une minute au temps proxy Ă  chaque passage Ă  0 secondes. - - if(self.now.getSeconds() == 0){ - this.timeProxy.min++ - } - if(this.timeProxy.min == 60){ - this.timeProxy.min = 0 - this.timeProxy.hour++ - } - - }, 1000) - - } ngOnDestroy(): void { clearInterval(this.interval); @@ -237,7 +236,7 @@ export class AppComponent implements OnInit, OnDestroy { } resteTopicMinutes(topic: Topic) { - return this.round(topic.spentSeconds / (topic.duration * 60)) + return Math.round( ((topic.duration * 60) - topic.spentSeconds ) /60) } @@ -425,10 +424,46 @@ export class AppComponent implements OnInit, OnDestroy { if(rounded>100){ rounded = 100 } - - console.log('rounded', (topic.duration * 60), topic.spentSeconds, rounded) return rounded; } protected readonly clearInterval = clearInterval; + + + ngOnInit() { + this.reinitialize() + } + + reinitialize(){ + + this.now = new Date() + this.timeProxy.hour = this.now.getHours() + this.timeProxy.min = this.now.getMinutes() + + this.parseTheListOfTopicsInPasteLand() + + this.startDate = this.makeDateFromHourToday(this.startTime); + this.endDate = this.makeDateFromHourToday(this.endTime); + + let self = this; + + clearInterval(this.interval) + this.interval = setInterval(() => { + self.now = new Date() + this.subjects[this.currentSubjectId].spentSeconds += 1 + this.progressTotalPercent = this.getPercentProgressTotal() + + // ajouter une minute au temps proxy Ă  chaque passage Ă  0 secondes. + if(self.now.getSeconds() == 0){ + this.timeProxy.min++ + } + if(this.timeProxy.min == 60){ + this.timeProxy.min = 0 + this.timeProxy.hour++ + } + + }, 1000) + + } + } diff --git a/ordre-du-jour/odj2/src/index.html b/ordre-du-jour/odj2/src/index.html index 6fc2943b..20e62a88 100644 --- a/ordre-du-jour/odj2/src/index.html +++ b/ordre-du-jour/odj2/src/index.html @@ -8,6 +8,9 @@ +
    + +