feat: added expedition planning as beta feature (not finished!)

libs/model/src/calendar.model.ts

@@ -0,0 +1 @@
+export type CalendarEvent = {};

libs/model/src/expedition.model.ts

@@ -0,0 +1,20 @@
+export type Expedition = {
+  name: string;
+  beginDateTime: string;
+  participants: Participant[];
+  owner: Owner;
+};
+
+export type Participant = {
+  userId: number;
+  characterName: string;
+  discordId: string;
+  role: 'tank' | 'damage' | 'heal';
+  hasKey: boolean;
+};
+
+export type Owner = {
+  userId: number;
+  characterName: string;
+  discordId: string;
+};

libs/model/src/index.ts

@@ -1,7 +1,9 @@
 export * from './admin.model';
+export * from './calendar.model';
 export * from './character.model';
 export * from './config.model';
 export * from './discord.model';
+export * from './expedition.model';
 export * from './github.model';
 export * from './login.model';
 export * from './plugin.model';

webapp/src/app/app-routing.module.ts

@@ -31,6 +31,10 @@ export const routes: Routes = [
   {
     path: 'my-character',
     loadChildren: () => import('./pages/my-character/my-character-page.module').then((m) => m.MyCharacterPageModule)
+  },
+  {
+    path: 'expedition',
+    loadChildren: () => import('./pages/expedition/expedition-page.module').then((m) => m.ExpeditionPageModule)
   }
 ];
 

webapp/src/app/app.module.ts

@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { LOCALE_ID, NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { AppRoutingModule } from './app-routing.module';
@@ -31,6 +31,7 @@ import { FullCalendarModule } from '@fullcalendar/angular';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import timeGridPlugin from '@fullcalendar/timegrid';
 import interactionPlugin from '@fullcalendar/interaction';
+import { ExpeditionModule } from './services/expedition/expedition.module';
 
 const cookieConfig: NgcCookieConsentConfig = {
   cookie: {
@@ -79,6 +80,7 @@ FullCalendarModule.registerPlugins([dayGridPlugin, timeGridPlugin, interactionPl
     AdminModule,
     CharacterModule,
     ConfigModule,
+    ExpeditionModule,
     NavigationModule,
     PluginModule,
     SnackbarModule,
@@ -90,7 +92,7 @@ FullCalendarModule.registerPlugins([dayGridPlugin, timeGridPlugin, interactionPl
     MatButtonModule,
     MatMomentDateModule
   ],
-  providers: [AppComponent, LoginGuard, AdminGuard],
+  providers: [{ provide: LOCALE_ID, useValue: 'en-GB' }, AppComponent, LoginGuard, AdminGuard],
   bootstrap: [AppComponent],
   exports: []
 })

webapp/src/app/pages/expedition/components/expedition-create/expedition-create.component.html

@@ -0,0 +1,28 @@
+<form [formGroup]='form' (ngSubmit)='create()'>
+  <div class='flex flex-column'>
+    <mat-form-field appearance='fill'>
+      <mat-label>Date</mat-label>
+      <input matInput [matDatepicker]='picker' formControlName='date'>
+      <mat-datepicker-toggle matSuffix [for]='picker'></mat-datepicker-toggle>
+      <mat-datepicker #picker></mat-datepicker>
+    </mat-form-field>
+    <mat-form-field appearance='fill'>
+      <mat-label>Time</mat-label>
+      <input matInput type='time' formControlName='time'>
+    </mat-form-field>
+    <mat-form-field appearance='fill'>
+      <mat-label>Expedition</mat-label>
+      <mat-select formControlName='expedition'>
+        <mat-option value='one'>Expedition 1</mat-option>
+        <mat-option value='two'>Expedition 2</mat-option>
+      </mat-select>
+    </mat-form-field>
+    <mat-slide-toggle formControlName='hasKey'>I have a tuning orb</mat-slide-toggle>
+  </div>
+
+<div mat-dialog-actions class='flex flex-right'>
+  <button mat-button mat-dialog-close>Abort</button>
+  <button mat-button color='primary' type='submit'>Create</button>
+</div>
+
+</form>

webapp/src/app/pages/expedition/components/expedition-create/expedition-create.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ExpeditionCreateComponent } from './expedition-create.component';
+
+describe('ExpeditionCreateComponent', () => {
+  let component: ExpeditionCreateComponent;
+  let fixture: ComponentFixture<ExpeditionCreateComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ExpeditionCreateComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ExpeditionCreateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

webapp/src/app/pages/expedition/components/expedition-create/expedition-create.component.ts

@@ -0,0 +1,64 @@
+import { Component } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import * as moment from 'moment';
+import { Moment } from 'moment';
+import { ExpeditionService } from '../../../../services/expedition/expedition.service';
+import { MatDialogRef } from '@angular/material/dialog';
+
+type CreateExpeditionForm = {
+  date: Moment;
+  time: string;
+  expedition: string;
+  hasKey: boolean;
+};
+
+@Component({
+  selector: 'app-expedition-create',
+  templateUrl: './expedition-create.component.html',
+  styleUrls: ['./expedition-create.component.css']
+})
+export class ExpeditionCreateComponent {
+  form = new FormGroup({
+    date: new FormControl(moment(), [Validators.required]),
+    time: new FormControl(moment().format('HH:mm'), [Validators.required]),
+    expedition: new FormControl(null, [Validators.required]),
+    hasKey: new FormControl(false)
+  });
+
+  constructor(
+    public dialogRef: MatDialogRef<ExpeditionCreateComponent>,
+    private expeditionService: ExpeditionService
+  ) {}
+
+  create() {
+    this.form.markAllAsTouched();
+    const expedition: CreateExpeditionForm = this.form.value;
+
+    if (this.form.valid) {
+      this.expeditionService.createExpedition({
+        name: expedition.expedition,
+        beginDateTime: expedition.date
+          .set({
+            hour: +expedition.time.split(':')[0],
+            minute: +expedition.time.split(':')[1]
+          })
+          .format('YYYY-MM-DDTHH:mm'),
+        participants: [
+          {
+            userId: 1,
+            characterName: 'Krise',
+            discordId: '1',
+            hasKey: true,
+            role: 'damage'
+          }
+        ],
+        owner: {
+          userId: 1,
+          characterName: 'Krise',
+          discordId: '1'
+        }
+      });
+      this.dialogRef.close();
+    }
+  }
+}

webapp/src/app/pages/expedition/components/expedition-table/expedition-table.component.html

@@ -0,0 +1,43 @@
+<div class='content'>
+  <button mat-fab color="primary" (click)='createNew()'>
+    <mat-icon>add</mat-icon>
+  </button>
+</div>
+<div class='content'>
+  <mat-table [dataSource]="dataSource">
+    <!-- Planned Definition -->
+    <ng-container matColumnDef="planned">
+      <mat-header-cell *matHeaderCellDef> Begin </mat-header-cell>
+      <mat-cell *matCellDef="let row"> <input matInput type='datetime-local' value='{{row.beginDateTime}}' readonly></mat-cell>
+    </ng-container>
+
+    <!-- Name Definition -->
+    <ng-container matColumnDef="name">
+      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
+      <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+    </ng-container>
+
+    <!-- Owner Definition -->
+    <ng-container matColumnDef="owner">
+      <mat-header-cell *matHeaderCellDef> Owner </mat-header-cell>
+      <mat-cell *matCellDef="let row"> {{row.owner.characterName}} </mat-cell>
+    </ng-container>
+
+    <!-- Owner Definition -->
+    <ng-container matColumnDef="participants">
+      <mat-header-cell *matHeaderCellDef> Participants </mat-header-cell>
+      <mat-cell *matCellDef="let row">
+
+      </mat-cell>
+    </ng-container>
+
+
+    <!-- Header and Row Declarations -->
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+  </mat-table>
+
+  <mat-paginator [pageSizeOptions]="[10, 20, 50]"
+                 showFirstLastButtons>
+  </mat-paginator>
+</div>

webapp/src/app/pages/expedition/components/expedition-table/expedition-table.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ExpeditionTableComponent } from './expedition-table.component';
+
+describe('ExpeditionTableComponent', () => {
+  let component: ExpeditionTableComponent;
+  let fixture: ComponentFixture<ExpeditionTableComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ExpeditionTableComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ExpeditionTableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

webapp/src/app/pages/expedition/components/expedition-table/expedition-table.component.ts

@@ -0,0 +1,33 @@
+import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatTableDataSource } from '@angular/material/table';
+import { Expedition } from '@nw-company-tool/model';
+import { ExpeditionService } from '../../../../services/expedition/expedition.service';
+import { MatDialog } from '@angular/material/dialog';
+import { ExpeditionCreateComponent } from '../expedition-create/expedition-create.component';
+
+@Component({
+  selector: 'app-expedition-table',
+  templateUrl: './expedition-table.component.html',
+  styleUrls: ['./expedition-table.component.css']
+})
+export class ExpeditionTableComponent implements OnInit, AfterViewInit {
+  displayedColumns: string[] = ['planned', 'name', 'owner', 'participants'];
+  dataSource = new MatTableDataSource<Expedition>();
+
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+
+  constructor(private expeditionService: ExpeditionService, public dialog: MatDialog) {}
+
+  ngOnInit(): void {
+    this.expeditionService.getExpeditions().subscribe((data) => (this.dataSource.data = data));
+  }
+
+  ngAfterViewInit(): void {
+    this.dataSource.paginator = this.paginator;
+  }
+
+  createNew(): void {
+    this.dialog.open(ExpeditionCreateComponent);
+  }
+}

webapp/src/app/pages/expedition/expedition-page.module.ts

@@ -0,0 +1,37 @@
+import { NgModule } from '@angular/core';
+import { ExpeditionRoutingModule } from './expedition-routing.module';
+import { MatCardModule } from '@angular/material/card';
+import { MatButtonModule } from '@angular/material/button';
+import { ExpeditionComponent } from './routes/root/expedition.component';
+import { ExpeditionTableComponent } from './components/expedition-table/expedition-table.component';
+import { MatTableModule } from '@angular/material/table';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatInputModule } from '@angular/material/input';
+import { ExpeditionCreateComponent } from './components/expedition-create/expedition-create.component';
+import { MatIconModule } from '@angular/material/icon';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatSelectModule } from '@angular/material/select';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { ReactiveFormsModule } from '@angular/forms';
+
+@NgModule({
+  imports: [
+    ExpeditionRoutingModule,
+    MatCardModule,
+    MatButtonModule,
+    MatTableModule,
+    MatPaginatorModule,
+    MatInputModule,
+    MatIconModule,
+    MatDialogModule,
+    MatSelectModule,
+    MatDatepickerModule,
+    MatSlideToggleModule,
+    ReactiveFormsModule
+  ],
+  declarations: [ExpeditionComponent, ExpeditionTableComponent, ExpeditionCreateComponent],
+  providers: [],
+  exports: []
+})
+export class ExpeditionPageModule {}

webapp/src/app/pages/expedition/expedition-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { ExpeditionComponent } from './routes/root/expedition.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ExpeditionComponent
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ExpeditionRoutingModule {}

webapp/src/app/pages/expedition/routes/root/expedition.component.html

@@ -0,0 +1,8 @@
+<div>
+    <div class='flex flex-center'>
+        <h2>🚧 UNDER CONSTRUCTION - ONLY USE FOR DEMO PURPOSES 🚧</h2>
+    </div>
+    <mat-card class="content large-card">
+        <app-expedition-table></app-expedition-table>
+    </mat-card>
+</div>

webapp/src/app/pages/expedition/routes/root/expedition.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-expedition',
+  templateUrl: './expedition.component.html',
+  styleUrls: ['./expedition.component.css']
+})
+export class ExpeditionComponent {}