up style, simplify ui
This commit is contained in:
parent
a7e8b4cdbe
commit
0a96cf91c1
|
|
@ -15,15 +15,30 @@
|
|||
<li class="subject is-clickable is-hoverable hover:has-background-blue"
|
||||
(click)="setSubject(i)"
|
||||
*ngFor="let s of subjects; index as i"
|
||||
[ngClass]="{ active: (currentSubjectId === i) }">
|
||||
[ngClass]="{ active: (currentSubjectId === i) , 'is-finished': s.finished}">
|
||||
<strong> {{s.id}}) {{ s.title }}</strong>
|
||||
|
||||
<p class="is-small">
|
||||
{{ s.duration }} min, par {{ s.author }}.
|
||||
<span class="author-infos">
|
||||
{{ s.duration }} min, par <span class="author">{{ s.author }}</span>.
|
||||
</span>
|
||||
<span class="debug" *ngIf="debug_proxy_time">
|
||||
|
||||
<br>
|
||||
Reste: {{ resteTopicMinutes(s) }}.
|
||||
Reste: {{ resteTopicMinutes(s) }} min.
|
||||
<br>
|
||||
Passé: {{ round(s.spentSeconds) }}.
|
||||
|
||||
<div class="alerte-temps" *ngIf="resteTopicMinutes(s) < 2 && resteTopicMinutes(s) > 0">
|
||||
🗃️ conclure le sujet
|
||||
</div>
|
||||
<div class="alerte-temps" *ngIf="resteTopicMinutes(s) == 0">
|
||||
⏰ finir
|
||||
</div>
|
||||
<div class="alerte-temps" *ngIf="resteTopicMinutes(s) <0 ">
|
||||
🔔 temps dépassé
|
||||
</div>
|
||||
</span>
|
||||
</p>
|
||||
<p *ngIf="s.finished">🎉</p>
|
||||
<p class="is-info"
|
||||
|
|
@ -105,24 +120,39 @@
|
|||
{{ subjects[currentSubjectId].title }}
|
||||
</h1>
|
||||
<div class="frise-temps-subject">
|
||||
Sujet: {{percentDoneOfTopic(subjects[currentSubjectId])}} %
|
||||
<!-- Sujet: {{percentDoneOfTopic(subjects[currentSubjectId])}} %-->
|
||||
<div class="rectangle-time-container">
|
||||
<div class="rectangle-time-done-part" [style.width]="percentDoneOfTopic(subjects[currentSubjectId])+'%'">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>{{ subjects[currentSubjectId].duration }} min, par {{ subjects[currentSubjectId].author }}</p>
|
||||
<!-- <p>Reste: {{ countRemainingMinutes(subjects[currentSubjectId]) }} min</p>-->
|
||||
<p>
|
||||
<span class="duration">
|
||||
|
||||
|
||||
{{ subjects[currentSubjectId].duration }}</span> min, par
|
||||
<span class="author">
|
||||
{{ subjects[currentSubjectId].author }}
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<div class="actions">
|
||||
<p>Début: {{ startTime }}, Fin: {{ endTime }}.
|
||||
Durée: {{round(getMinutesBetweenTwoDates(startDate, endDate))}}</p>
|
||||
|
||||
<h2>
|
||||
notes
|
||||
</h2>
|
||||
<textarea name="note" id="note" cols="30" rows="10" [(ngModel)]="subjects[currentSubjectId].notes"></textarea>
|
||||
|
||||
<button class="btn btn-primary" (click)="previousSubject()">
|
||||
⏮️ précédent
|
||||
</button>
|
||||
<button class="btn is-primary" (click)="nextSubject()">
|
||||
⏭️ suivant
|
||||
</button>
|
||||
<br>
|
||||
|
||||
<button class="btn is-success" (click)="finishTopic(currentSubjectId)">
|
||||
🎉 fini
|
||||
</button>
|
||||
|
|
@ -154,26 +184,29 @@
|
|||
- subjects[currentSubjectId].spentSeconds
|
||||
)
|
||||
}}
|
||||
|
||||
<p>
|
||||
proxy date of now: {{getProxyDateOfNow() | date:'YYYY-MM-dd HH:mm:ss':'Europe/Paris' }}
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Durée cumulée des sujets donnée dans le pad</h2>
|
||||
{{cumul_detected_duration}} minutes.
|
||||
<br>
|
||||
<sub>
|
||||
|
||||
<p>avancement: {{ getPercentProgressTimeForTopic(subjects[currentSubjectId]) }} %</p>
|
||||
<p>
|
||||
proxy date of now: {{getProxyDateOfNow() | date:'YYYY-MM-dd HH:mm:ss':'Europe/Paris' }}
|
||||
</p>
|
||||
<!-- <p>avancement: {{ getPercentProgressTotal() }} %</p>-->
|
||||
|
||||
<h2>Représentation graphique du déroulé ({{progressTotalPercent}} %)</h2>
|
||||
une durée de <input type="number" min="1" [(ngModel)]="default_topic_duration"> minutes est attribuée par défaut en cas de durée non précisée sur une ligne dans le pad.
|
||||
</sub>
|
||||
|
||||
|
||||
|
||||
<div class="frise-temps-total">
|
||||
<div class="rectangle-time-container">
|
||||
<div class="rectangle-time-done-part" [style.width]="progressTotalPercent+'%'">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="frise-temps-total">-->
|
||||
<!-- <div class="rectangle-time-container">-->
|
||||
<!-- <div class="rectangle-time-done-part" [style.width]="progressTotalPercent+'%'">-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<div class="debug_time_proxy" *ngIf="debug_proxy_time">
|
||||
<h2>
|
||||
|
|
@ -203,22 +236,18 @@
|
|||
</div>
|
||||
<div class="pad">
|
||||
|
||||
<h2>
|
||||
notes
|
||||
</h2>
|
||||
<textarea name="note" id="note" cols="30" rows="10" [(ngModel)]="subjects[currentSubjectId].notes"></textarea>
|
||||
|
||||
<h2>
|
||||
Texte du pad
|
||||
</h2>
|
||||
<button (click)="reinitialize()">réinitialiser</button>
|
||||
<br>
|
||||
<textarea name="note" id="pasteland" cols="30" rows="10" class="textarea mx-2 is-full" [(ngModel)]="pasteLand"
|
||||
id="pasteland"
|
||||
(ngModelChange)="parseTheListOfTopicsInPasteLand()"></textarea>
|
||||
<h2>
|
||||
Compte rendu du {{ (today) | date:'yyyy-MM-dd'}}
|
||||
</h2>
|
||||
<pre>
|
||||
{{buildCompteRendu()}}
|
||||
</pre>
|
||||
<button class="btn is-primary" (click)="copyCompteRenduToClipboard()">
|
||||
copier
|
||||
</button>
|
||||
|
|
@ -226,6 +255,13 @@
|
|||
télécharger le compte rendu
|
||||
</button>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<pre>
|
||||
{{buildCompteRendu()}}
|
||||
</pre>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,9 @@
|
|||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
|
||||
<app-root></app-root>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue