src/app/app.component.html

@@ -42,6 +42,7 @@
 <m-overlay-modal></m-overlay-modal>
 <m--blockchain--transaction-overlay></m--blockchain--transaction-overlay>
 <m-modal--tos-updated *ngIf="session.isLoggedIn()"></m-modal--tos-updated>
+<m-juryDutySession__summons *ngIf="session.isLoggedIn()"></m-juryDutySession__summons>
 
 <m-modal-signup-on-scroll></m-modal-signup-on-scroll>
 

src/app/modules/report/console/appeal.component.html

@@ -13,20 +13,21 @@
     <div class="m-moderationAppeal__composer" *ngIf="!appeal.note">
       <textarea
         #appealContent
+        [(ngModel)]="note"
         placeholder="Please type in this box if you wish to appeal this decision, explaining your reasons"
         i18n="@@REPORT__CONSOLE__APPEAL_COMPOSER_PLACEHOLDER"
       ></textarea>
 
       <button class="m-moderationAppeal__button"
         [disabled]="appeal.inProgress"
-        (click)="sendAppeal(appeal, appealContent.value, i)"
+        (click)="sendAppeal()"
         i18n="@@REPORT__CONSOLE__APPEAL_ACTION"
       >
         Appeal
       </button>
     </div>
     <div class="m-moderationAppeal__appealNote" *ngIf="appeal.note">
-      <p>{{appeal.appeal_note}}</p>
+      <p>{{appeal.note}}</p>
     </div>
   </div>
 

src/app/modules/report/console/appeal.component.ts

@@ -2,6 +2,7 @@ import {
   Component,
   OnInit,
   Input,
+  ChangeDetectorRef,
 } from '@angular/core';
 
 import { Client } from '../../../services/api/client';
@@ -20,6 +21,7 @@ export class ModerationAppealComponent {
   constructor(
     private client: Client,
     public service: JurySessionService,
+    private cd: ChangeDetectorRef,
   ) { }
 
   async sendAppeal() {
@@ -31,8 +33,12 @@ export class ModerationAppealComponent {
       });
 
       this.appeal.note = this.note;
+
+      this.detectChanges();
     } catch (e) {
       alert((e && e.message) || 'Error sending appeal');
+    } finally {
+      this.appeal.inProgress = false;
     }
   }
 
@@ -42,4 +48,8 @@ export class ModerationAppealComponent {
       action;
   }
 
+  detectChanges() {
+    this.cd.markForCheck();
+    this.cd.detectChanges();
+  }
 }

src/app/modules/report/juryduty/session/content.component.html

@@ -24,13 +24,15 @@
                 class="m-btn m-btn--slim"
                 (click)="uphold()"
             >
-                Uphold Report
+              <ng-container *ngIf="report.is_appeal; else upholdLabel">Reject Appeal</ng-container>
+              <ng-template #upholdLabel>Uphold Report</ng-template>
             </button>
             <button
                 class="m-btn m-btn--slim"
                 (click)="overturn()"
             >
-                Overturn Report
+              <ng-container *ngIf="report.is_appeal; else overturnLabel">Accept Appeal</ng-container>
+              <ng-template #overturnLabel>Overturn Report</ng-template>
             </button>
         </div>
     </ng-container>

src/app/modules/report/juryduty/session/session.service.ts

@@ -15,6 +15,10 @@ export class JurySessionService {
     return await this.client.get('api/v2/moderation/jury/' + opts.juryType);
   }
 
+  async getReport(urn) {
+    return (<any>(await this.client.get('api/v2/moderation/jury/appeal/' + urn))).report;
+  }
+
   async overturn(report) {
     const juryType = report.is_appeal ? 'appeal' : 'initial';
     return await this.client.post(`api/v2/moderation/jury/${juryType}/${report.urn}`, {
@@ -32,11 +36,14 @@ export class JurySessionService {
   getReasonString(report) {
     return REASONS.filter((item) => {
       if (item.hasMore && item.reasons) {
-        return item.reasons[report.sub_reason_code].value === report.sub_reason_code;
+        return item.value === report.reason_code && item.reasons[report.sub_reason_code - 1].value === report.sub_reason_code;
       }
       return item.value === report.reason_code;
     })
     .map((item) => {
+      if (item.hasMore && item.reasons) {
+        return item.reasons[report.sub_reason_code - 1].label;
+      }
       return item.label;
     })
     .join(', ');
@@ -49,6 +56,11 @@ export class JurySessionService {
       case 2: 
         friendlyString = 'marked NSFW';
         break;
+      case 4:
+      case 8:
+        if (report.entity && report.entity.type == 'user')
+          friendlyString = 'given a strike';
+        break;
     }
 
     return friendlyString;

src/app/modules/report/juryduty/session/summons.component.html

+<m-modal
+  [open]="true"
+  (closed)="onClose($event)"
+  *ngIf="showModal"
+>
+    <div class="m-juryDutySession__summons">
+        <h2>You've been selected for Jury Duty</h2>
+
+        <p>
+          The Minds Jury decides on what content is within the terms of service.
+          We randomly select 12 members of the community to uphold or overturn decisions made. 
+        </p>
+
+        <div class="m-juryDutySessionSummons__buttons" *ngIf="!accepted">
+            <button
+              class="m-btn m-btn--slim m-btn--action"
+              (click)="accept()"
+            >
+                Accept
+            </button>
+            <button
+              class="m-btn m-btn--slim"
+              (click)="decline()"
+            >
+              <span>Decline - </span>
+              <span class="countdown">{{ expires | timediff: true }}</span>
+            </button>
+        </div>
+
+        <div *ngIf="inProgress"
+          class="mdl-spinner mdl-js-spinner is-active"
+          [mdl]
+        ></div>
+
+        <div class="m-juryDutySessionSummons__report" *ngIf="report">
+            <m-juryDutySession__content [report]="report">
+            </m-juryDutySession__content>
+        </div>
+
+    </div>
+</m-modal>

src/app/modules/report/juryduty/session/summons.component.scss

+.m-juryDutySession__summons {
+  padding: 24px 16px;
+  h2 {
+    font-weight: 600;
+    font-size: 26px;
+    line-height: 1;
+    margin: 0;
+  }
+
+  p {
+    line-height: 1.25;
+    font-size: 16px;
+    margin-top: 16px;
+    @include m-theme() {
+      color: themed($m-grey-400);
+    }
+  }
+
+  .m-btn {
+    margin: 8px;
+
+    .countdown {
+      font-weight: bold;
+    }
+  }
+}
+
+.m-juryDutySessionSummons__countdown {
+  padding: 16px 0;
+
+  span {
+    font-weight: 600;
+    font-size: 24px;
+    @include m-theme() {
+        color: themed($m-grey-300);
+    }
+  }
+}

src/app/modules/report/juryduty/session/summons.component.ts

+import { Component, Input, AfterViewInit, ViewChild, ElementRef, ChangeDetectorRef } from '@angular/core';
+import { interval, Subscription } from 'rxjs';
+import { map, take } from "rxjs/operators";
+import { OverlayModalService } from '../../../../services/ux/overlay-modal';
+import { Client } from '../../../../services/api';
+import { Session } from '../../../../services/session';
+import { REASONS } from '../../../../services/list-options';
+import { JurySessionService } from './session.service';
+import { SocketsService } from '../../../../services/sockets';
+
+@Component({
+  selector: 'm-juryDutySession__summons',
+  templateUrl: 'summons.component.html'
+})
+
+export class JuryDutySessionSummonsComponent {
+
+  showModal: boolean = false;
+  expires: number = 0;
+  expiresCountdown$: Subscription;
+  accepted: boolean = false;
+  inProgress: boolean = false;
+  summons;
+  reportUrn: string = '';
+  report;
+
+  constructor(
+    private sessionService: JurySessionService,
+    private client: Client,
+    private socketsService: SocketsService,
+    private cd: ChangeDetectorRef,
+  ) {
+    this.expires = 60; // 60 seconds
+  }
+
+  ngOnInit() {
+    this.socketsService.join(`moderation_summon`);
+    this.socketsService.subscribe(`moderation_summon`, (summons) => {
+      this.summons = JSON.parse(summons);
+      this.startSummons();
+    });
+  
+  }
+
+  startSummons() {
+    if (this.expiresCountdown$)
+      this.expiresCountdown$.unsubscribe();
+    this.expires = parseInt(this.summons.ttl) / 2;
+    this.reportUrn = this.summons.report_urn;
+    this.showModal = true;
+    this.detectChanges();
+    this.expiresCountdown$ = interval(1000)
+      .pipe(
+        take(this.expires),
+        map((v) => --this.expires)
+      )
+      .subscribe((expires) => {
+        this.expires = expires;
+        if (this.expires <= 0 && !this.accepted)
+          this.showModal = false;
+        this.detectChanges()
+      });
+  }
+
+  ngOnDestroy() {
+    if (this.expiresCountdown$)
+      this.expiresCountdown$.unsubscribe();
+  }
+
+  async accept() {
+    if (!confirm("I am 18 years old and volunteer to participate in this jury. I acknowledge that I may be exposed to content not safe for work (NSFW) and understand that the purpose of the trial is to enforce the site content policy.")) {
+      return;
+    }
+    this.accepted = true;
+    this.detectChanges();
+
+    this.inProgress = true;
+    this.report = (<any> await this.client.post(`api/v2/moderation/summons`, {
+        report_urn: this.summons.report_urn,
+        jury_type: this.summons.jury_type,
+        status: 'accepted',
+    })).report;
+    this.inProgress = false;
+  }
+
+  async decline() {
+
+    await this.client.post(`api/v2/moderation/summons`, {
+        report_urn: this.summons.report_urn,
+        jury_type: this.summons.jury_type,
+        status: 'declined',
+    }); 
+
+    this.showModal = false;
+    this.detectChanges();
+  }  
+
+  onClose(e) {
+    this.showModal = false;
+    this.detectChanges();
+  }
+
+  detectChanges() {
+    this.cd.markForCheck();
+    this.cd.detectChanges();
+  }
+
+}

src/app/modules/report/marketing/marketing.component.html

@@ -11,7 +11,7 @@
           The Minds Jury decides on what content is within the terms of service.
         </h3>
       
-        <button class="m-btn m-btn--slim" (click)="startJuryDuty()">
+        <button class="m-btn m-btn--slim" (click)="startJuryDuty()" *ngIf="session.isAdmin()">
           Start Jury Duty
         </button>
       </div>
@@ -53,11 +53,11 @@
         <span>Content Reported</span>
       </div>
       <div class="m-layout__cell">
-        <b>{{ stats.appealedPct }}%</b>
+        <b>{{ stats.appealedPct | number }}%</b>
         <span>Appealed</span>
       </div>
       <div class="m-layout__cell">
-        <b>{{ stats.upheldPct }}%</b>
+        <b>{{ stats.upheldPct | number }}%</b>
         <span>Upheld by Community Jury</span>
       </div>
     </div>

src/app/modules/report/marketing/marketing.component.scss

@@ -3,7 +3,7 @@
  
 
   .m-marketing__hero {
-    background: #132552;
+    background-color: #132552 !important;
     padding-bottom: 72px;
 
     .m-marketingHero__inner {

src/app/modules/report/marketing/marketing.component.ts

@@ -10,7 +10,7 @@ import { Router } from '@angular/router';
 import { Client } from '../../../common/api/client.service';
 import { MindsTitle } from '../../../services/ux/title';
 import { REASONS as REASONS_LIST } from '../../../services/list-options';
-
+import { Session } from '../../../services/session';
 
 @Component({
   selector: 'm-reports__marketing',
@@ -35,6 +35,7 @@ export class ReportsMarketingComponent {
     private cd: ChangeDetectorRef,
     private router: Router,
     private title: MindsTitle,
+    public session: Session,
   ) {
     title.setTitle('Community Moderation');
   }
@@ -44,7 +45,7 @@ export class ReportsMarketingComponent {
   }
 
   startJuryDuty() {
-    this.router.navigate(['/moderation/juryduty/appeal']);
+    this.router.navigate(['/moderation/juryduty/initial']);
   }
 
   async loadStats() {

src/app/modules/report/report.module.ts

@@ -14,6 +14,7 @@ import { CommentsModule } from '../comments/comments.module';
 import { JuryDutySessionListComponent } from './juryduty/session/list.component';
 import { JurySessionService } from './juryduty/session/session.service';
 import { JuryDutySessionContentComponent } from './juryduty/session/content.component';
+import { JuryDutySessionSummonsComponent } from './juryduty/session/summons.component';
 import { StrikesComponent } from './strikes/strikes.component';
 import { BannedService } from './banned/banned.service';
 import { BannedComponent } from './banned/banned.component';
@@ -43,17 +44,20 @@ import { ModerationAppealComponent } from './console/appeal.component';
     JuryDutySessionComponent,
     JuryDutySessionListComponent,
     JuryDutySessionContentComponent,
+    JuryDutySessionSummonsComponent,
     StrikesComponent,
     BannedComponent,
     ModerationAppealComponent,
   ],
   exports: [
-    ReportConsoleComponent
+    ReportConsoleComponent,
+    JuryDutySessionSummonsComponent,
   ],
   entryComponents: [
     ReportCreatorComponent,
     ReportsMarketingComponent,
     JuryDutySessionComponent,
+    JuryDutySessionSummonsComponent,
     StrikesComponent,
     BannedComponent,
   ],

src/app/modules/report/strikes/strikes.component.html

@@ -3,13 +3,13 @@
         <h2>Strikes</h2>
         <p>Strikes are imposed for violations against the terms of service. Following 3 strikes, channels are banned.</p>
 
-        <ul>
-            <li *ngFor="let strike of strikes">
-                {{ strike['@timestamp'] | date: 'medium' }}
+        <ul class="m-moderationStrike__list">
+            <li *ngFor="let strike of strikes"
+              class="m-border m-moderation__strike"
+            >
+                {{ strike['@timestamp'] * 1000 | date: 'medium' }}
         
                 <div>
-                    <b> {{ service.getAction(strike) }} </b>
-                    <span>for</span>
                     <b> {{ service.getReasonString(strike) }} </b>
                 </div>
             </li>

src/app/modules/report/strikes/strikes.component.scss

 m-moderation__strikes h2 {
   font-weight: 600;
-}
\ No newline at end of file
+}
+
+.m-moderationStrike__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.m-moderation__strike {
+  @include m-theme() {
+    background-color: themed($m-white);
+  }
+  padding: 16px;
+  margin-bottom: 16px;
+}

src/app/services/list-options.ts

@@ -46,7 +46,7 @@ export const REASONS : Array<any> = [
       { value: 1, label: 'Nudity' },
       { value: 2, label: 'Pornography' },
       { value: 3, label: 'Profanity' },
-      { value: 4, label: 'Violance and Gore' },
+      { value: 4, label: 'Violence and Gore' },
       { value: 5, label: 'Race, Religion, Gender' },
     ],
   },