Merge branch 'release-5.20.2'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wise",
-  "version": "5.20.1",
+  "version": "5.20.2",
   "description": "Web-based Inquiry Science Environment",
   "main": "app.js",
   "browserslist": [

pom.xml

@@ -34,7 +34,7 @@
   <artifactId>wise</artifactId>
   <packaging>war</packaging>
   <name>Web-based Inquiry Science Environment</name>
-  <version>5.20.1</version>
+  <version>5.20.2</version>
   <url>http://wise5.org</url>
   <licenses>
     <license>

scripts/beforeInstall.sh

@@ -56,7 +56,7 @@ systemctl daemon-reload
 echo "Add https to Tomcat server.xml"
 sed 's/<Connector port="8080"/<Connector port="8080" scheme="https"/' -i $CATALINA_HOME/conf/server.xml
 
-echo "Downlading setenv.sh Tomcat file"
+echo "Copying setenv.sh file to Tomcat bin folder"
 cp $BUILD_FILES/setenv.sh /usr/share/tomcat9/bin/setenv.sh
 
 echo "Restarting Tomcat"
@@ -72,7 +72,13 @@ apt-get install nginx -y
 echo "Adding Nginx www-data user to tomcat group"
 usermod -a -G tomcat www-data
 
-echo "Downloading WISE Nginx config file"
+echo "Adding ip to nginx.conf"
+sed 's/http {/http {\n        add_header ip $server_addr;/' -i /etc/nginx/nginx.conf
+
+echo "Adding gzip_types to nginx.conf"
+sed 's/gzip on;/gzip on;\n        gzip_types text\/plain text\/xml image\/gif image\/jpeg image\/png image\/svg+xml application\/json application\/javascript application\/x-javascript text\/javascript text\/css;/' -i /etc/nginx/nginx.conf
+
+echo "Copying WISE Nginx config file to Nginx sites-enabled folder"
 rm -f /etc/nginx/sites-enabled/*
 cp $BUILD_FILES/$env/wise.conf /etc/nginx/sites-enabled/wise.conf
 systemctl restart nginx
@@ -82,7 +88,7 @@ mkdir -p $HOME/build-folder/WEB-INF/classes
 sudo -u ubuntu -g ubuntu mkdir $HOME/backup
 sudo -u ubuntu -g tomcat mkdir $HOME/googleTokens
 
-echo "Downloading application.properties file"
+echo "Copying application.properties file to the build folder"
 cp $BUILD_FILES/$env/application.properties $BUILD_DIR/WEB-INF/classes/application.properties
 
 echo "Installing network drive package"
@@ -92,16 +98,24 @@ echo "Mounting network drive folders"
 cp $BUILD_FILES/$env/fstab /etc/fstab
 mount -a
 
-echo "Downloading .vimrc file"
+echo "Copying .vimrc file to the ubuntu home folder"
 sudo -u ubuntu -g ubuntu cp $BUILD_FILES/.vimrc $HOME/.vimrc
 
-echo "Downloading text to append to .bashrc"
+echo "Appending text to .bashrc"
 cat $BUILD_FILES/append-to-bashrc.txt >> ~/.bashrc
+cat $BUILD_FILES/$env/append-to-bashrc.txt >> ~/.bashrc
 source ~/.bashrc
 
+echo "Copying message of the day file to update-motd.d folder to display notes on login"
+cp $BUILD_FILES/99-notes /etc/update-motd.d/99-notes
+cat $BUILD_FILES/$env/append-to-99-notes.txt >> /etc/update-motd.d/99-notes
+chmod 755 /etc/update-motd.d/99-notes
+
+echo "Install mysql client"
+apt-get install mysql-client-core-8.0 -y
+
+echo "Install redis client"
+apt-get install redis-tools -y
+
 echo "Installing tree"
 apt-get install tree -y
-
-echo "Downloading message of the day script to display notes"
-cp $BUILD_FILES/99-notes /etc/update-motd.d/99-notes
-chmod 755 /etc/update-motd.d/99-notes

src/main/resources/version.txt

@@ -1 +1 @@
-5.20.1
+5.20.2

src/main/webapp/site/src/app/classroom-monitor/component-select/component-select.component.html

@@ -0,0 +1,21 @@
+<mat-select *ngIf="components.length > 1"
+    class="md-no-underline md-button mat-button-raised md-raised"
+    [(ngModel)]="selectedComponents"
+    (selectionChange)="selectedComponentsChange()"
+    placeholder="{{getSelectedText()}}"
+    multiple>
+  <mat-select-trigger>{{getSelectedText()}}</mat-select-trigger>
+  <mat-optgroup label="Assessment items to show" i18n-label>
+    <mat-option value="{{component.id}}" *ngFor="let component of components; let i = index">
+      {{ i+1 }}: {{ getComponentTypeLabel(component.type) }}
+    </mat-option>
+  </mat-optgroup>
+</mat-select>
+<button mat-button class="md-body-1 mat-button-raised"
+    *ngIf="components.length == 1"
+    aria-label="Assessment items to show"
+    i18n-aria-label
+    disabled
+    i18n>
+  1 assessment item
+</button>

src/main/webapp/site/src/app/classroom-monitor/component-select/component-select.component.scss

@@ -0,0 +1,7 @@
+mat-select {
+  min-width: 150px;
+}
+
+mat-select, mat-select-trigger {
+  text-transform: none;
+}

src/main/webapp/site/src/app/classroom-monitor/component-select/component-select.component.ts

@@ -0,0 +1,58 @@
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { UpgradeModule } from "@angular/upgrade/static";
+import { TeacherProjectService } from "../../../../../wise5/services/teacherProjectService";
+import { UtilService } from "../../../../../wise5/services/utilService";
+
+@Component({
+  selector: 'component-select',
+  styleUrls: ['component-select.component.scss'],
+  templateUrl: 'component-select.component.html'
+})
+export class ComponentSelectComponent {
+
+  components: any[];
+
+  @Output()
+  modelChange: EventEmitter<any> = new EventEmitter<any>();
+
+  @Input()
+  nodeId: string;
+
+  selectedComponents: any[];
+
+  constructor(private upgrade: UpgradeModule, private ProjectService: TeacherProjectService,
+      private UtilService: UtilService) {
+  }
+
+  ngOnInit() {
+    this.components = this.ProjectService.getComponentsByNodeId(this.nodeId).filter(component => {
+      return this.ProjectService.componentHasWork(component);
+    });
+    this.selectedComponents = this.components.map(component => {
+      return component.id;
+    });
+  }
+
+  getComponentTypeLabel(componentType) {
+    return this.UtilService.getComponentTypeLabel(componentType);
+  }
+
+  getSelectedText() {
+    let nComponents = this.components.length;
+    return this.upgrade.$injector.get('$filter')('translate')('selectedComponentsLabel', {
+      selected: this.selectedComponents.length,
+      total: nComponents
+    });
+  }
+
+  selectedComponentsChange() {
+    const hiddenComponents = [];
+    for (const component of this.components) {
+      const id = component.id;
+      if (this.selectedComponents.indexOf(id) < 0) {
+        hiddenComponents.push(id);
+      }
+    }
+    this.modelChange.emit(hiddenComponents);
+  }
+}

src/main/webapp/site/src/app/classroom-monitor/milestones/milestones.component.html

@@ -0,0 +1,25 @@
+<div class="view-content view-content--with-sidemenu">
+  <div class="l-constrained">
+    <div fxLayout="row wrap" fxLayoutAlign="center center" fxLayoutAlign.gt-xs="start center">
+      <mat-card *ngFor="let milestone of milestones"
+          class="milestone md-button" md-ink-ripple
+          (click)="showMilestoneDetails(milestone, $event)">
+        <mat-card-content fxLayout="column" fxLayoutAlign="center center">
+          <div class="milestone__title" md-truncate>{{ milestone.name }}</div>
+          <div class="milestone__progress">
+            <mat-progress-spinner diameter="96"
+                mode="determinate"
+                [value]="milestone.percentageCompleted"
+                [ngClass]="{ 'success': milestone.percentageCompleted === 100 }"></mat-progress-spinner>
+             <div class="milestone__progress__percent" fxLayout="row" fxLayoutAlign="center center">
+               <span *ngIf="milestone.percentageCompleted < 100">{{ milestone.percentageCompleted }}%</span>
+               <mat-icon *ngIf="milestone.percentageCompleted === 100" class="success md-48"> check </mat-icon>
+              </div>
+            </div>
+            <p class="md-body-1 text-secondary">{{ milestone.numberOfStudentsCompleted }}/{{ milestone.numberOfStudentsInRun }} teams completed</p>
+            <p *ngIf="milestone.isReportAvailable" class="md-body-2 info" i18n>~ Report Available ~</p>
+        </mat-card-content>
+      </mat-card>
+    </div>
+  </div>
+</div>

src/main/webapp/site/src/app/classroom-monitor/milestones/milestones.component.scss

@@ -0,0 +1,3 @@
+:host ::ng-deep .success circle {
+  stroke: #00C853;
+}

src/main/webapp/site/src/app/classroom-monitor/milestones/milestones.component.ts

@@ -0,0 +1,80 @@
+import { Component } from '@angular/core';
+import { AchievementService } from '../../../../../wise5/services/achievementService';
+import { AnnotationService } from '../../../../../wise5/services/annotationService';
+import { MilestoneService } from '../../../../../wise5/services/milestoneService';
+import { TeacherDataService } from '../../../../../wise5/services/teacherDataService';
+
+@Component({
+  selector: 'milestones',
+  styleUrls: ['milestones.component.scss'],
+  templateUrl: 'milestones.component.html'
+})
+export class MilestonesComponent {
+  milestones: any[];
+  annotationReceivedSubscription: any;
+  currentPeriodChangedSubscription: any;
+  newStudentAchievementSubscription: any;
+
+  constructor(private AchievementService: AchievementService,
+      private AnnotationService: AnnotationService, private MilestoneService: MilestoneService,
+      private TeacherDataService: TeacherDataService) {
+  }
+
+  ngOnInit() {
+    this.loadProjectMilestones();
+    this.newStudentAchievementSubscription =
+        this.AchievementService.newStudentAchievement$.subscribe((args: any) => {
+      const studentAchievement = args.studentAchievement;
+      this.AchievementService.addOrUpdateStudentAchievement(studentAchievement);
+      this.updateMilestoneStatus(studentAchievement.achievementId);
+    });
+
+    this.currentPeriodChangedSubscription = this.TeacherDataService.currentPeriodChanged$
+        .subscribe(() => {
+      for (const milestone of this.milestones) {
+        this.updateMilestoneStatus(milestone.id);
+      }
+    });
+
+    this.annotationReceivedSubscription =
+        this.AnnotationService.annotationReceived$.subscribe(({ annotation }) => {
+      for (const milestone of this.milestones) {
+        if (milestone.nodeId === annotation.nodeId &&
+            milestone.componentId === annotation.componentId) {
+          this.updateMilestoneStatus(milestone.id);
+        }
+      }
+    });
+  }
+
+  ngOnDestroy() {
+    this.annotationReceivedSubscription.unsubscribe();
+    this.currentPeriodChangedSubscription.unsubscribe();
+    this.newStudentAchievementSubscription.unsubscribe();
+  }
+
+  loadProjectMilestones() {
+    this.milestones = this.MilestoneService.getProjectMilestones();
+    for (let milestone of this.milestones) {
+      milestone = this.MilestoneService.getProjectMilestoneStatus(milestone.id);
+    }
+  }
+
+  updateMilestoneStatus(milestoneId) {
+    let milestone = this.getProjectMilestoneById(milestoneId);
+    milestone = this.MilestoneService.getProjectMilestoneStatus(milestoneId);
+  }
+
+  getProjectMilestoneById(milestoneId: string): any {
+    for (const milestone of this.milestones) {
+      if (milestone.id === milestoneId) {
+        return milestone;
+      }
+    }
+    return {};
+  }
+
+  showMilestoneDetails(milestone, $event) {
+    this.MilestoneService.showMilestoneDetails(milestone, $event);
+  }
+}

src/main/webapp/site/src/app/classroom-monitor/nav-item-progress/nav-item-progress.component.html

@@ -0,0 +1,19 @@
+<span fxLayout="row" fxLayoutAlign="start center">
+  <span class="progress-wrapper" tabindex="0" [ngSwitch]="period.periodId">
+    <mat-progress-bar *ngSwitchCase="-1"
+        matTooltip="{{nodeCompletion}}% completed (All periods)"
+        i18n-matTooltip
+        matTooltipPosition="above"
+        class="nav-item__progress"
+        mode="determinate"
+        value="{{nodeCompletion}}"></mat-progress-bar>
+    <mat-progress-bar *ngSwitchDefault
+        matTooltip="{{nodeCompletion}}% completed (Period: {{period.periodName}})"
+        i18n-matTooltip
+        matTooltipPosition="above"
+        class="nav-item__progress"
+        mode="determinate"
+        value="{{nodeCompletion}}"></mat-progress-bar>
+  </span>
+  <span class="nav-item__progress-value md-body-2 text-secondary" hide-xs>{{nodeCompletion}}%</span>
+</span>

src/main/webapp/site/src/app/classroom-monitor/nav-item-progress/nav-item-progress.component.scss

@@ -0,0 +1,3 @@
+mat-progress-bar {
+  height: 14px;
+}

src/main/webapp/site/src/app/classroom-monitor/nav-item-progress/nav-item-progress.component.ts

@@ -0,0 +1,15 @@
+import { Component, Input } from "@angular/core";
+
+@Component({
+  selector: 'nav-item-progress',
+  styleUrls: ['nav-item-progress.component.scss'],
+  templateUrl: 'nav-item-progress.component.html'
+})
+export class NavItemProgressComponent {
+
+  @Input()
+  nodeCompletion: string;
+
+  @Input()
+  period: any;
+}

src/main/webapp/site/src/app/classroom-monitor/step-info/step-info.component.html

@@ -0,0 +1,18 @@
+<div fxLayout="row" fxLayoutAlign="start center">
+  <node-icon [nodeId]="nodeId" size="18" fxHide.xs></node-icon>
+  <span fxHide.xs>&nbsp;&nbsp;</span>
+  <div class="heavy">
+    {{ stepTitle }}
+    <status-icon *ngIf="hasAlert"
+        [iconClass]="alertIconClass"
+        [iconName]="alertIconName"
+        [iconLabel]="alertIconLabel"
+        [iconTooltip]="alertIconLabel"></status-icon>
+    <status-icon *ngIf="hasRubrics"
+        iconClass="info"
+        iconName="info"
+        [iconLabel]="rubricIconLabel"
+        [iconTooltip]="rubricIconLabel"></status-icon>
+    <span *ngIf="hasNewWork" class="badge badge--info animate-fade" i18n>New</span>
+  </div>
+</div>

src/main/webapp/site/src/app/classroom-monitor/step-info/step-info.component.ts

@@ -0,0 +1,39 @@
+import { Component, Input } from '@angular/core';
+import { TeacherProjectService } from '../../../../../wise5/services/teacherProjectService';
+
+@Component({
+  selector: 'step-info',
+  templateUrl: 'step-info.component.html'
+})
+export class StepInfoComponent {
+  $translate: any;
+  alertIconClass: string;
+  alertIconLabel: string;
+  alertIconName: string;
+  @Input()
+  hasAlert: boolean;
+  @Input()
+  hasNewAlert: boolean;
+  @Input()
+  hasNewWork: boolean;
+  hasRubrics: boolean;
+  @Input()
+  nodeId: string;
+  rubricIconLabel: string;
+  stepTitle: string;
+
+  constructor(private ProjectService: TeacherProjectService) {
+  }
+
+  ngOnInit() {
+    this.stepTitle = this.ProjectService.getNodePositionAndTitleByNodeId(this.nodeId);
+    if (this.hasAlert) {
+      this.alertIconClass = this.hasNewAlert ? 'warn' : 'text-disabled';
+      this.alertIconName = 'notifications';
+      this.alertIconLabel = this.hasNewAlert ? $localize`Has new alert(s)`:
+          $localize`Has dismissed alert(s)`;
+    }
+    this.hasRubrics = this.ProjectService.getNumberOfRubricsByNodeId(this.nodeId) > 0;
+    this.rubricIconLabel = $localize`Step has rubrics/teaching tips`;
+  }
+}