all: san pablo november challenge (fixes #7736) (#7690)

Co-authored-by: Jesse Washburn <[email protected]> Co-authored-by: Axel Lo <[email protected]> Co-authored-by: dogi <[email protected]>
open-learning-exchange · Nov 6, 2024 · 911586e · 911586e
1 parent b5c8e4d
commit 911586e
Show file tree

Hide file tree

Showing 9 changed files with 354 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.15.36",
+  "version": "0.15.37",
   "myplanet": {
     "latest": "v0.20.86",
     "min": "v0.19.86"

diff --git a/src/app/community/community.component.ts b/src/app/community/community.component.ts
@@ -8,6 +8,7 @@ import { DialogsLoadingService } from '../shared/dialogs/dialogs-loading.service
 import { MatDialog } from '@angular/material/dialog';
 import { CommunityLinkDialogComponent } from './community-link-dialog.component';
 import { TeamsService } from '../teams/teams.service';
+import { DialogsAnnouncementComponent } from '../shared/dialogs/dialogs-announcement.component';
 import { DialogsPromptComponent } from '../shared/dialogs/dialogs-prompt.component';
 import { CouchService } from '../shared/couchdb.service';
 import { PlanetMessageService } from '../shared/planet-message.service';
@@ -48,6 +49,7 @@ export class CommunityComponent implements OnInit, OnDestroy {
   resizeCalendar: any = false;
   deviceType: DeviceType;
   deviceTypes = DeviceType;
+  challengeActive: boolean;
   isLoading: boolean;
 
   constructor(
@@ -86,6 +88,7 @@ export class CommunityComponent implements OnInit, OnDestroy {
         this.setCouncillors(users);
       }
     });
+    this.communityChallenge();
   }
 
   @HostListener('window:resize') onResize() {
@@ -97,6 +100,25 @@ export class CommunityComponent implements OnInit, OnDestroy {
     this.onDestroy$.complete();
   }
 
+  communityChallenge() {
+    const includedCodes = [ 'guatemala', 'san.pablo', 'xela', 'embakasi', 'uriur' ];
+    this.challengeActive = includedCodes.includes(this.configuration.code) &&
+    ((new Date() > new Date(2024, 9, 31)) && (new Date() < new Date(2024, 11, 1)));
+    const popupShown = localStorage.getItem('announcementPopupShown');
+
+    if (this.challengeActive && !popupShown) {
+      this.openAnnouncementDialog();
+      localStorage.setItem('announcementPopupShown', 'true');
+    }
+  }
+
+  openAnnouncementDialog() {
+    this.dialog.open(DialogsAnnouncementComponent, {
+      width: '50vw',
+      maxHeight: '100vh'
+    });
+  }
+
   getCommunityData() {
     const setShareTarget = (type) => type === 'center' ? 'nation' : type === 'nation' ? 'community' : undefined;
     this.route.paramMap.pipe(

diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
@@ -21,6 +21,9 @@ <h1 class="mat-title">
         </mat-icon>
       </span>
     </div>
+    <div class="cursor-pointer" (click)="openChallengeView()" matTooltip="challenge">
+      <mat-icon>stars</mat-icon>
+    </div>
   </div>
 </mat-card>
 <planet-dashboard-tile

diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts
@@ -15,6 +15,7 @@ import { CoursesService } from '../courses/courses.service';
 import { CoursesViewDetailDialogComponent } from '../courses/view-courses/courses-view-detail.component';
 import { foundations, foundationIcons } from '../courses/constants';
 import { CertificationsService } from '../manager-dashboard/certifications/certifications.service';
+import { DialogsAnnouncementComponent } from '../shared/dialogs/dialogs-announcement.component';
 
 @Component({
   templateUrl: './dashboard.component.html',
@@ -211,4 +212,11 @@ export class DashboardComponent implements OnInit, OnDestroy {
     this.badgeGroups = [ ...foundations, 'none' ].filter(group => this.badgesCourses[group] && this.badgesCourses[group].length);
   }
 
+  openChallengeView() {
+    this.dialog.open(DialogsAnnouncementComponent, {
+      width: '50vw',
+      maxHeight: '100vh'
+    });
+  }
+
 }
diff --git a/src/app/shared/database/pouch-auth.service.ts b/src/app/shared/database/pouch-auth.service.ts
@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { from, throwError, Observable, forkJoin } from 'rxjs';
-import { catchError, switchMap } from 'rxjs/operators';
+import { catchError, switchMap, tap } from 'rxjs/operators';
 import { PouchService } from './pouch.service';
 import { CouchService } from '../couchdb.service';
 
@@ -32,6 +32,10 @@ export class PouchAuthService {
   login(username, password) {
     this.pouchService.configureDBs();
     return from(this.authDB.logIn(username, password)).pipe(
+      tap(() => {
+        // Reset the popup flag on successful login
+        localStorage.removeItem('announcementPopupShown');
+      }),
       catchError(this.handleError)
     );
   }

diff --git a/src/app/shared/dialogs/dialogs-announcement.component.html b/src/app/shared/dialogs/dialogs-announcement.component.html
@@ -0,0 +1,52 @@
+<div class="announcement-container">
+  <img
+    src="https://res.cloudinary.com/mutugiii/image/upload/v1730395098/challenge_horizontal_new_tnco4v.jpg"
+    alt="Issues Challenge"
+    class="announcement-banner"
+  />
+
+  <div class="steps-container">
+    <div class="step">
+      <mat-icon color="primary">
+        {{ userStatus.joinedCourse ? 'check_circle' : 'radio_button_unchecked' }}
+      </mat-icon>
+      <span>Únete al curso <a href="/courses/view/{{ courseId }}">Reto de noviembre</a>.</span>
+      <a *ngIf="!userStatus.joinedCourse" mat-button mat-raised-button color="primary" type="button" (click)="joinCourse()">
+        Únete
+      </a>
+    </div>
+
+    <div class="step">
+      <mat-icon color="primary">
+        {{ userStatus.surveyComplete ? 'check_circle' : 'radio_button_unchecked' }}
+      </mat-icon>
+      <span>¡Encuesta finalizada!</span>
+      <a *ngIf="userStatus.joinedCourse && !userStatus.surveyComplete" mat-button mat-raised-button color="primary" type="button" (click)="doSurvey()">
+        Encuesta
+      </a>
+    </div>
+
+    <div class="step">
+      <mat-icon color="primary">
+        {{ userStatus.hasPost ? 'check_circle' : 'radio_button_unchecked' }}
+      </mat-icon>
+      <span>Comparte tu opinión en Nuestras Voces.</span>
+      <a *ngIf="userStatus.joinedCourse && userStatus.surveyComplete && !userStatus.hasPost" mat-button mat-raised-button color="primary" type="button" (click)="postVoice()">
+        Voces
+      </a>
+    </div>
+  </div>
+
+  <div class="thermometer-container">
+  <div class="thermometer">
+    <div class="thermometer-bar" [style.width.%]="getGoalPercentage()">
+      <div class="thermometer-label" [ngClass]="{'outside': getGoalPercentage() < 8}">
+        {{ getGoalPercentage() | number:'1.0-2' }}% ({{ '$'+ groupSummary?.length }})
+      </div>
+    </div>
+  </div>
+  <div class="thermometer-goal">
+    <span>$0</span>
+    <span>$500</span>
+  </div>
+</div>
diff --git a/src/app/shared/dialogs/dialogs-announcement.component.scss b/src/app/shared/dialogs/dialogs-announcement.component.scss
@@ -0,0 +1,79 @@
+@import '../../variables';
+
+.announcement-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+}
+
+.announcement-banner {
+  max-width: 100%;
+  margin-bottom: 20px;
+}
+
+.steps-container {
+  width: 100%;
+  max-width: 600px;
+  margin-bottom: 20px;
+}
+
+.step {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.step mat-icon {
+  margin-right: 10px;
+}
+
+.step span {
+  flex-grow: 1;
+}
+
+.thermometer-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  margin-top: 10px;
+}
+
+.thermometer {
+  width: 100%;
+  height: 30px;
+  background-color: #e0e0e0;
+  border-radius: 15px;
+  overflow: hidden;
+  position: relative;
+  margin-bottom: 10px;
+}
+
+.thermometer-bar {
+  height: 100%;
+  background-color: $primary;
+  transition: width 0.5s;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.thermometer-label {
+  color: white;
+  font-size: 12px;
+  padding: 2px;
+  border-radius: 3px;
+}
+
+.thermometer-label.outside {
+  position: absolute;
+  left: 0.5rem;
+}
+
+.thermometer-goal {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  font-size: 14px;
+}