* maintenance calendar view added

* production api url fixed

package-lock.json

@@ -2785,6 +2785,11 @@
         }
       }
     },
+    "date-fns": {
+      "version": "2.0.0-alpha.25",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.0.0-alpha.25.tgz",
+      "integrity": "sha512-iQzJkHF0L4wah9Ae9PkvwemwFz6qmRLuNZcghmvf2t+ptLs1qXzONLiGtjmPQzL6+JpC01JjlTopY2AEy4NFAg=="
+    },
     "date-format": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/date-format/-/date-format-1.2.0.tgz",

package.json

@@ -24,6 +24,7 @@
     "@auth0/angular-jwt": "^2.0.0",
     "@types/jquery": "^3.3.22",
     "core-js": "^2.5.4",
+    "date-fns": "^2.0.0-alpha.25",
     "jquery": "^3.3.1",
     "rxjs": "~6.3.3",
     "zone.js": "~0.8.26"

src/app/auth/auth/auth.component.html

@@ -2,22 +2,22 @@
   <div class="column">
     <h2 class="ui teal image header">
       <i class="circular inverted tiny olive wrench icon"></i>
-      <div class="content">
+      <span class="content">
         WN GÜLBABA Bejelentkezés
-      </div>
+      </span>
     </h2>
     <form (ngSubmit)="doSubmit()" class="ui large form" [class.error]="hasError" [class.loading]="isLoading">
       <div class="ui raised segment">
         <div class="field">
           <div class="ui left icon input">
             <i class="user icon"></i>
-            <input type="text" #loginField name="login" placeholder="E-mail cím">
+            <input type="text" #loginField name="login" placeholder="E-mail cím" autocomplete="username">
           </div>
         </div>
         <div class="field">
           <div class="ui left icon input">
             <i class="lock icon"></i>
-            <input type="password" #passwordField name="password" placeholder="Jelszó">
+            <input type="password" #passwordField name="password" placeholder="Jelszó" autocomplete="current-password">
           </div>
         </div>
         <button class="ui fluid large teal submit button">Bejelentkezés</button>

src/app/auth/role-guard.service.ts

@@ -26,6 +26,8 @@ export class RoleGuardService{
             new RegExp("/hiba/megjelenites/[\\d]+", "i"),
             new RegExp("/beallitasok", "i"),
             new RegExp("/karbantartas/(idoszeru|teljes)-lista", "i"),
+            new RegExp("/karbantartas/naptar", "i"),
+            new RegExp("/karbantartas/naptar/[\\d]+", "i"),
         ],
         'projektvezeto': [
             new RegExp("/hiba/lista", "i"),
@@ -38,6 +40,8 @@ export class RoleGuardService{
             new RegExp("/riportok/szures", "i"),
             new RegExp("/riportok/havi-zaras", "i"),
             new RegExp("/karbantartas/(idoszeru|teljes)-lista", "i"),
+            new RegExp("/karbantartas/naptar", "i"),
+            new RegExp("/karbantartas/naptar/[\\d]+", "i"),
             new RegExp("/karbantartas/szerkesztes", "i"),
         ],
 

src/app/maintenance/maintenance-calendar/maintenance-calendar.component.html

@@ -0,0 +1,8 @@
+<div class="ui main container">
+    <h1 class="ui dividing header">Karbantartási naptár</h1>
+    <div class="ui raised segments">
+        <div class="ui segment" *ngFor="let data of maintenances">
+            <app-calendar [year]="year" [month]="data[0].month" [data]="data"></app-calendar>
+        </div>
+    </div>
+</div>

src/app/maintenance/maintenance-calendar/maintenance-calendar.component.spec.ts

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

src/app/maintenance/maintenance-calendar/maintenance-calendar.component.ts

@@ -0,0 +1,43 @@
+import { Component, OnInit } from '@angular/core';
+import { DeviceGroup } from "../shared/device-group";
+import { MaintenanceManagerService } from "../maintenance-manager.service";
+import { Title } from "@angular/platform-browser";
+import { ActivatedRoute } from "@angular/router";
+
+@Component({
+    selector: 'app-maintenance-calendar',
+    templateUrl: './maintenance-calendar.component.html',
+    styleUrls: ['./maintenance-calendar.component.css']
+})
+export class MaintenanceCalendarComponent implements OnInit {
+
+    public year: number = 2018;
+
+    constructor(private maintenanceManager: MaintenanceManagerService,
+                private titleService: Title,
+                private route: ActivatedRoute) {
+    }
+
+    ngOnInit() {
+        this.titleService.setTitle('Webnapló : Éves karbantartási feladatok');
+        this.route.params.subscribe((params: {
+            year: number
+        }) => {
+            this.year = params.year ? params.year : new Date().getFullYear();
+        });
+        this.route.data.subscribe((data: {
+            maintenances: Array<DeviceGroup>,
+        }) => {
+            this.maintenances = data.maintenances;
+        });
+    }
+
+    get maintenances(): Array<DeviceGroup> {
+        return this.maintenanceManager.maintenances;
+    }
+
+    set maintenances(maintenances: Array<DeviceGroup>) {
+        this.maintenanceManager.maintenances = maintenances;
+    }
+
+}

src/app/maintenance/maintenance-manager.service.ts

@@ -1,21 +1,28 @@
 import { Injectable } from '@angular/core';
 import { Observable } from "rxjs";
-import { HttpClient, HttpHeaders, HttpRequest } from "@angular/common/http";
+import { HttpClient } from "@angular/common/http";
 
 import { environment } from "../../environments/environment";
-import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from "@angular/router";
+import { ActivatedRouteSnapshot, RouterStateSnapshot } from "@angular/router";
 import { DeviceGroup } from "./shared/device-group";
 import { MaintenanceEntity } from "./shared/maintenance-entity";
 
 @Injectable()
 export class MaintenanceManagerService {
 
-    private apiEndpoint = environment.apiUrl + '/api/maintenance';
+    static apiEndpoint = environment.apiUrl + '/api/maintenance';
-    private apiEndpointUpcoming = environment.apiUrl + '/api/maintenance/upcoming';
+    static apiEndpointUpcoming = environment.apiUrl + '/api/maintenance/upcoming';
+    static apiEndpointCalendar = environment.apiUrl + '/api/maintenance/calendar';
+
+    static endpointMap = {
+        all: MaintenanceManagerService.apiEndpoint,
+        upcoming: MaintenanceManagerService.apiEndpointUpcoming,
+        calendar: MaintenanceManagerService.apiEndpointCalendar,
+    };
+
     private cachedMaintenances: Array<DeviceGroup> = [];
 
-    constructor(private httpClient: HttpClient) {
+    constructor(private httpClient: HttpClient) {}
-    }
 
     /**
      * Resolver for the route
@@ -25,10 +32,9 @@ export class MaintenanceManagerService {
      * @returns {Promise<Array<Fault>>}
      */
     resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<Array<DeviceGroup>> {
-        let filter = route.data.filter ? route.data.filter : 'upcoming';
+        let year = route.params.year ? route.params.year : new Date().getFullYear();
-        let url = filter == 'upcoming'
+        let filter = route.data.filter ? route.data.filter : 'all';
-            ? this.apiEndpointUpcoming
+        let url = `${MaintenanceManagerService.endpointMap[filter]}/${year}`;
-            : this.apiEndpoint;
         return this.list(url).toPromise();
     }
 
@@ -42,11 +48,11 @@ export class MaintenanceManagerService {
     }
 
     public get(hash: string): Observable<MaintenanceEntity> {
-        return this.httpClient.get<MaintenanceEntity>(`${this.apiEndpoint}/${hash}`);
+        return this.httpClient.get<MaintenanceEntity>(`${MaintenanceManagerService.apiEndpoint}/${hash}`);
     }
 
     public update(maintenance: MaintenanceEntity) {
-        return this.httpClient.put<MaintenanceEntity>(`${this.apiEndpoint}/${maintenance.hash}`, maintenance);
+        return this.httpClient.put<MaintenanceEntity>(`${MaintenanceManagerService.apiEndpoint}/${maintenance.hash}`, maintenance);
     }
 
     get maintenances(): Array<DeviceGroup> {
@@ -59,10 +65,8 @@ export class MaintenanceManagerService {
 
     public setWip(id: string, page: string) {
         if(confirm("Biztos benne?")) {
-            let url = page == 'upcoming'
+            let url = MaintenanceManagerService.endpointMap[page];
-                ? this.apiEndpointUpcoming
+            this.httpClient.post<any>(`${MaintenanceManagerService.apiEndpoint}/${id}/wip`,{}).subscribe(()=>{
-                : this.apiEndpoint;
-            this.httpClient.post<any>(`${this.apiEndpoint}/${id}/wip`,{}).subscribe(()=>{
                 this.list(url).subscribe(result => this.cachedMaintenances = result);
             });
         }
@@ -70,10 +74,8 @@ export class MaintenanceManagerService {
 
     public setFin(id: string, page: string) {
         if(confirm("Biztos benne?")) {
-            let url = page == 'upcoming'
+            let url = MaintenanceManagerService.endpointMap[page];
-                ? this.apiEndpointUpcoming
+            this.httpClient.post<any>(`${MaintenanceManagerService.apiEndpoint}/${id}/fin`, {}).subscribe(() => {
-                : this.apiEndpoint;
-            this.httpClient.post<any>(`${this.apiEndpoint}/${id}/fin`, {}).subscribe(() => {
                 this.list(url).subscribe(result => this.cachedMaintenances = result);
             });
         }

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

@@ -8,9 +8,20 @@ import { ListAllMaintenancesComponent } from "./list-all-maintenances/list-all-m
 import { ListUpcomingMaintenancesComponent } from "./list-upcoming-maintenances/list-upcoming-maintenances.component";
 import { EditMaintenanceComponent } from "./edit-maintenance/edit-maintenance.component";
 import { MaintenanceResolverService } from "./maintenance-resolver.service";
+import { MaintenanceCalendarComponent } from "./maintenance-calendar/maintenance-calendar.component";
 
 const routes: Routes = [
     {
+        path: 'karbantartas/teljes-lista/:year',
+        component: ListAllMaintenancesComponent,
+        canActivate: [AuthGuardService, RoleGuardService],
+        resolve: {
+            maintenances: MaintenanceManagerService,
+        },
+        data: {
+            filter: 'all',
+        },
+    }, {
         path: 'karbantartas/teljes-lista',
         component: ListAllMaintenancesComponent,
         canActivate: [AuthGuardService, RoleGuardService],
@@ -20,6 +31,16 @@ const routes: Routes = [
         data: {
             filter: 'all',
         },
+    }, {
+        path: 'karbantartas/idoszeru-lista/:year',
+        component: ListUpcomingMaintenancesComponent,
+        canActivate: [AuthGuardService, RoleGuardService],
+        resolve: {
+            maintenances: MaintenanceManagerService,
+        },
+        data: {
+            filter: 'upcoming',
+        },
     }, {
         path: 'karbantartas/idoszeru-lista',
         component: ListUpcomingMaintenancesComponent,
@@ -30,6 +51,26 @@ const routes: Routes = [
         data: {
             filter: 'upcoming',
         },
+    }, {
+        path: 'karbantartas/naptar/:year',
+        component: MaintenanceCalendarComponent,
+        canActivate: [AuthGuardService, RoleGuardService],
+        resolve: {
+            maintenances: MaintenanceManagerService,
+        },
+        data: {
+            filter: 'calendar',
+        },
+    }, {
+        path: 'karbantartas/naptar',
+        component: MaintenanceCalendarComponent,
+        canActivate: [AuthGuardService, RoleGuardService],
+        resolve: {
+            maintenances: MaintenanceManagerService,
+        },
+        data: {
+            filter: 'calendar',
+        },
     }, {
         path: 'karbantartas/szerkesztes/:id',
         component: EditMaintenanceComponent,

src/app/maintenance/maintenance.module.ts

@@ -9,17 +9,31 @@ import { ListAllMaintenancesComponent } from './list-all-maintenances/list-all-m
 import { ListUpcomingMaintenancesComponent } from './list-upcoming-maintenances/list-upcoming-maintenances.component';
 import { EditMaintenanceComponent } from './edit-maintenance/edit-maintenance.component';
 import { MaintenanceResolverService } from './maintenance-resolver.service';
+import { SharedModule } from "../shared/shared.module";
+import { MaintenanceCalendarComponent } from './maintenance-calendar/maintenance-calendar.component';
 
 @NgModule({
     imports: [
         CommonModule,
         FormsModule,
         ReactiveFormsModule,
-        MaintenanceRoutingModule
+        SharedModule,
+        MaintenanceRoutingModule,
+    ],
+    declarations: [
+        UpcomingMaintenancesComponent,
+        ListAllMaintenancesComponent,
+        ListUpcomingMaintenancesComponent,
+        EditMaintenanceComponent,
+        MaintenanceCalendarComponent,
+    ],
+    providers: [
+        MaintenanceManagerService,
+        MaintenanceResolverService,
+    ],
+    exports: [
+        UpcomingMaintenancesComponent,
     ],
-    declarations: [UpcomingMaintenancesComponent, ListAllMaintenancesComponent, ListUpcomingMaintenancesComponent, EditMaintenanceComponent],
-    providers: [MaintenanceManagerService, MaintenanceResolverService],
-    exports: [UpcomingMaintenancesComponent],
 })
 export class MaintenanceModule {
 }

src/app/navigation/navigation/navigation.component.html

@@ -24,8 +24,9 @@
         <div class="ui simple dropdown item">
             <i class="wrench icon"></i>Karbantartás <i class="dropdown icon"></i>
             <div class="menu">
-                <a class="item" [routerLink]="['/karbantartas/idoszeru-lista']"><i class="list icon"></i>Időszerű lista</a>
+                <a class="item" [routerLink]="['/karbantartas/idoszeru-lista']"><i class="clock icon"></i>Időszerű lista</a>
                 <a class="item" [routerLink]="['/karbantartas/teljes-lista']"><i class="list icon"></i>Teljes lista</a>
+                <a class="item" [routerLink]="['/karbantartas/naptar']"><i class="calendar icon"></i>Naptár</a>
             </div>
         </div>
         <!--

src/app/shared/calendar/calendar.component.css

@@ -0,0 +1,28 @@
+.y-calendar {
+    display: grid;
+    grid-template-columns: auto auto auto auto auto auto auto;
+}
+
+.y-calendar .y-item {
+    display: block;
+    width: calc(100% - 4px);
+    height: calc(100% - 4px);
+    margin: 2px;
+    min-height: 80px;
+}
+
+.y-calendar .affix-day {
+    background-color: white;
+}
+
+.y-calendar .suffix-day {
+    background-color: white;
+}
+
+.y-calendar .day {
+    background-color: #ffcc80;
+}
+
+.y-calendar .weekend {
+    background-color: #d5d5d5;
+}

src/app/shared/calendar/calendar.component.html

@@ -0,0 +1,11 @@
+<h1 class="ui dividing header">{{formattedMonthHeader}}</h1>
+<div class="y-calendar">
+    <div *ngFor="let a of loopable(affixDayCount)" class="y-item affix-day" [attr.data-value]="a"></div>
+    <div *ngFor="let d of loopable(daysInMonth)" class="y-item day" [class.weekend]="isWeekend(d)" [attr.data-value]="d">
+        <div>{{d}}</div>
+        <div *ngFor="let task of dailyData(d)">
+            {{task.device.work}}
+        </div>
+    </div>
+    <div *ngFor="let s of loopable(suffixDayCount)" class="y-item suffix-day" [attr.data-value]="s"></div>
+</div>

src/app/shared/calendar/calendar.component.spec.ts

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

src/app/shared/calendar/calendar.component.ts

@@ -0,0 +1,68 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { format } from 'date-fns';
+import { hu } from "date-fns/locale";
+
+@Component({
+    selector: 'app-calendar',
+    templateUrl: './calendar.component.html',
+    styleUrls: ['./calendar.component.css']
+})
+export class CalendarComponent implements OnInit {
+
+    @Input('year')
+    private year: number;
+
+    @Input('month')
+    set month(month: number) {
+        this.monthIdx = month - 1;
+    }
+    private monthIdx: number;
+
+    @Input('data')
+    private data: any;
+
+    private firstDay: Date;
+    private lastDay: Date;
+
+    constructor() {}
+
+    ngOnInit() {
+        this.firstDay = new Date(this.year, this.monthIdx, 1);
+        this.lastDay = new Date(this.year, this.monthIdx + 1, 0);
+    }
+
+    public get affixDayCount(): number {
+        return this.firstDay.getDay() === 0
+            ? 6
+            : this.firstDay.getDay() - 1;
+    }
+
+    public get suffixDayCount(): number {
+        return this.lastDay.getDay() === 0
+            ? 0
+            : 7 - this.lastDay.getDay();
+    }
+
+    public get daysInMonth(): number {
+        return this.lastDay.getDate();
+    }
+
+    public loopable(number: number): Array<number> {
+        return Array(number)
+            .fill(null)
+            .map((v,i) => i + 1);
+    }
+
+    public get formattedMonthHeader(): string {
+        return format(this.firstDay, "yyyy MMMM", {locale: hu});
+    }
+
+    public isWeekend(day: number): boolean {
+        return [0,6].includes(new Date(this.year, this.monthIdx, day).getDay());
+    }
+
+    public dailyData(day: number) {
+        const actualDay = new Date(this.year, this.monthIdx, day);
+        return this.data.filter(item => item.start == format(actualDay, "yyyy-MM-dd"));
+    }
+}

src/app/shared/shared.module.ts

@@ -5,6 +5,7 @@ import { HTTP_INTERCEPTORS } from "@angular/common/http";
 import { SemanticDropdownComponent } from "./semantic-dropdown/semantic-dropdown.component";
 import { JsonRequestInterceptorService } from "./json-request-interceptor.service";
 import { CurrencyFormatPipe } from './pipe/currency-format.pipe';
+import { CalendarComponent } from './calendar/calendar.component';
 
 @NgModule({
     imports: [
@@ -13,10 +14,12 @@ import { CurrencyFormatPipe } from './pipe/currency-format.pipe';
     declarations: [
         SemanticDropdownComponent,
         CurrencyFormatPipe,
+        CalendarComponent,
     ],
     exports: [
         SemanticDropdownComponent,
         CurrencyFormatPipe,
+        CalendarComponent,
     ],
     providers: [{
         provide: HTTP_INTERCEPTORS,

src/environments/environment.prod.ts

@@ -1,4 +1,4 @@
 export const environment = {
     production: true,
-    apiUrl: 'https://api.gulbaba.lxuz.hu',
+    apiUrl: 'https://api.gulbaba.bggeneral.hu',
 };