Initial service form implementation (WiP)

frontend/src/app/_components/edit-service/edit-service.component.html

@@ -0,0 +1,93 @@
+  <form method="post">
+    <div class="container">
+      <div class="form-group">
+        <label for="date-picker">Giorno</label>
+        <input id="date-picker" type="text" placeholder="Premi per selezionare una data" class="form-control" bsDatepicker [bsConfig]="{ adaptivePosition: true }">
+      </div>
+      <div class="form-group">
+        <label for="progressivo">Progressivo</label>
+        <input id="progressivo" class="form-control" type="text" placeholder="1234/5" required>
+      </div>
+      <div class="form-group">
+        <label for="timePicker1">Ora inizio</label>
+        <input id="timePicker1" class="form-control" type="time" required>
+      </div>
+      <div class="form-group">
+        <label for="timePicker2">Ora fine</label>
+        <input id="timePicker2" class="form-control" type="time" required>
+      </div>
+      <div class="form-group">
+        <label>Caposquadra</label>
+        <br>
+        <ng-container *ngFor="let user of users">
+            <div class="form-check" *ngIf="user.chief">
+                <input class="form-check-input chief-{{ user.id }}" type="checkbox" value='{{ user.id }}'>
+                <label class="form-check-label" for="chief-{{ user.id }}">
+                  {{ user.name }}
+                </label>
+            </div>
+        </ng-container>
+      </div>
+      <div class="form-group">
+        <label>Autisti</label>
+        <br>
+        <ng-container *ngFor="let user of users">
+            <div class="form-check" *ngIf="user.driver">
+                <input class="form-check-input driver-{{ user.id }}" type="checkbox" value='{{ user.id }}'>
+                <label class="form-check-label" for="driver-{{ user.id }}">
+                  {{ user.name }}
+                </label>
+            </div>
+        </ng-container>
+      </div>
+      <div class="form-group">
+        <label>Altri membri della squadra</label>
+        <br>
+        <ng-container *ngFor="let user of users">
+            <div class="form-check" *ngIf="!user.chief && !user.driver">
+                <input class="form-check-input crew-{{ user.id }}" type="checkbox" value='{{ user.id }}'>
+                <label class="form-check-label" for="crew-{{ user.id }}">
+                  {{ user.name }}
+                </label>
+            </div>
+        </ng-container>
+      </div>
+      <label>Luogo dell'intervento</label>
+      <div id="map"></div>
+      <div id="search">
+        <div class="form-inline">
+          <div class="form-group mx-sm-3 mb-2">
+            <input type="text" class="form-control" value="" id="addr" size="50" />
+          </div>
+          <div class="form-group mx-sm-3 mb-2">
+            <button id="search_button" type="button" class="btn btn-primary mb-2">
+                Cerca
+            </button>
+          </div>
+        </div>
+        <div id="results"></div>
+      </div>
+      <div class="form-group">
+        <label for="notes">Note (es. altre informazioni)</label><br>
+        <textarea class="form-control" id="notes"></textarea>
+      </div>
+      <br>
+      <div class="form-group">
+        <label>Tipologia</label>
+        <br>
+        <!--
+        <select id="types" class="form-control" class="types">
+          {% for type in service.types %}
+          <option value='{{ type.name }}'>{{ type.name }}</option>
+          {% endfor %}
+          {% if service.types is empty %}
+          <option id="empty_option" value=''></option>
+          {% endif %}
+          <option value='add_new'>{{ 'Add type...'|t }}</option>
+        </select>
+        -->
+      </div>
+      <br>
+      <button id="submit_button" type="submit" class="btn btn-primary">Invia</button>
+    </div>
+  </form>

frontend/src/app/_components/edit-service/edit-service.component.scss

@@ -0,0 +1,6 @@
+.form-group {
+    margin-bottom: 1em;
+}
+.form-check-input[type="checkbox"] {
+    margin-top: 0.5em;
+}

frontend/src/app/_components/edit-service/edit-service.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { ApiClientService } from 'src/app/_services/api-client.service';
+
+@Component({
+  selector: 'app-edit-service',
+  templateUrl: './edit-service.component.html',
+  styleUrls: ['./edit-service.component.scss']
+})
+export class EditServiceComponent implements OnInit {
+  public serviceId: string | undefined;
+  public users: any[] = [];
+
+  constructor(private route: ActivatedRoute, private api: ApiClientService) {
+    this.route.paramMap.subscribe(params => {
+      this.serviceId = params.get('id') || undefined;
+      console.log(this.serviceId);
+    });
+    this.api.get("users").then((users) => {
+      this.users = users;
+      console.log(this.users);
+    });
+  }
+
+  ngOnInit(): void { }
+
+}

frontend/src/app/_components/services/services.component.html

@@ -1,5 +1,5 @@
 <owner-image></owner-image>
 <div class="text-center mb-4">
-    <button type="button" class="btn btn-primary" disabled>Aggiungi intervento</button>
+    <button type="button" class="btn btn-primary" (click)="addService()">Aggiungi intervento</button>
 </div>
 <app-table [sourceType]="'services'"></app-table>

frontend/src/app/_components/services/services.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-services',
@@ -7,9 +8,13 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ServicesComponent implements OnInit {
 
-  constructor() { }
+  constructor(private router: Router) { }
 
   ngOnInit(): void {
   }
 
+  addService() {
+    this.router.navigate(['services', 'new']);
+  }
+
 }

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

@@ -4,6 +4,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { ListComponent } from './_components/list/list.component';
 import { LogsComponent } from './_components/logs/logs.component';
 import { ServicesComponent } from './_components/services/services.component';
+import { EditServiceComponent } from './_components/edit-service/edit-service.component';
 import { TrainingsComponent } from './_components/trainings/trainings.component';
 
 import { AuthorizeGuard } from './_guards/authorize.guard';
@@ -13,6 +14,7 @@ const routes: Routes = [
   { path: 'list', component: ListComponent, canActivate: [AuthorizeGuard] },
   { path: 'logs', component: LogsComponent, canActivate: [AuthorizeGuard] },
   { path: 'services', component: ServicesComponent, canActivate: [AuthorizeGuard] },
+  { path: 'services/:id', component: EditServiceComponent, canActivate: [AuthorizeGuard] },
   { path: 'trainings', component: TrainingsComponent, canActivate: [AuthorizeGuard] },
   { path: "login/:redirect/:extraParam", component: LoginComponent },
   { path: "login/:redirect", component: LoginComponent },

frontend/src/app/app.module.ts

@@ -6,6 +6,7 @@ import { FormsModule } from '@angular/forms';
 import { ToastrModule } from 'ngx-toastr';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
+import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -21,6 +22,7 @@ import { LoginComponent } from './_components/login/login.component';
 import { ListComponent } from './_components/list/list.component';
 import { LogsComponent } from './_components/logs/logs.component';
 import { ServicesComponent } from './_components/services/services.component';
+import { EditServiceComponent } from './_components/edit-service/edit-service.component';
 import { TrainingsComponent } from './_components/trainings/trainings.component';
 
 import { UnauthorizedInterceptor } from './_providers/unauthorized-interceptor.provider';
@@ -38,6 +40,7 @@ import { UnauthorizedInterceptor } from './_providers/unauthorized-interceptor.p
     ListComponent,
     LogsComponent,
     ServicesComponent,
+    EditServiceComponent,
     TrainingsComponent
   ],
   imports: [
@@ -54,6 +57,7 @@ import { UnauthorizedInterceptor } from './_providers/unauthorized-interceptor.p
     }),
     ModalModule.forRoot(),
     TooltipModule.forRoot(),
+    BsDatepickerModule.forRoot(),
     ServiceWorkerModule.register('ngsw-worker.js', {
       enabled: false && environment.production,
       // Register the ServiceWorker as soon as the app is stable

frontend/src/styles.scss

@@ -3,6 +3,7 @@
 @import "~bootstrap/scss/bootstrap.scss";
 @import "~@fortawesome/fontawesome-free/css/all.css";
 @import '~ngx-toastr/toastr';
+@import '~ngx-bootstrap/datepicker/bs-datepicker.scss';
 
 .fa {
   vertical-align: middle;