Add cron configurator

frontend/package-lock.json

@@ -19,6 +19,7 @@
         "@angular/platform-browser-dynamic": "~13.2.0",
         "@angular/router": "~13.2.0",
         "bootstrap": "^5.1.3",
+        "ngx-cron-editor": "^0.7.3",
         "rxjs": "~7.5.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.11.4"
@@ -7869,6 +7870,24 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "dev": true
     },
+    "node_modules/ngx-cron-editor": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/ngx-cron-editor/-/ngx-cron-editor-0.7.3.tgz",
+      "integrity": "sha512-ICrikARGU5HJ9hZ8H4aGkKZP/T3U9Ym/2rIpS2wjimB3ASypp/8pAm6cEqaaJ5IHbSjgZBHEMeoomVkTa15l2g==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@angular/animations": "^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0",
+        "@angular/common": "^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0",
+        "@angular/core": "^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0",
+        "@angular/forms": "^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0",
+        "@angular/material": "^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0",
+        "@angular/platform-browser": "^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0",
+        "@angular/platform-browser-dynamic": "^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0",
+        "@angular/router": "^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0"
+      }
+    },
     "node_modules/nice-napi": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz",
@@ -17215,6 +17234,14 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "dev": true
     },
+    "ngx-cron-editor": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/ngx-cron-editor/-/ngx-cron-editor-0.7.3.tgz",
+      "integrity": "sha512-ICrikARGU5HJ9hZ8H4aGkKZP/T3U9Ym/2rIpS2wjimB3ASypp/8pAm6cEqaaJ5IHbSjgZBHEMeoomVkTa15l2g==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "nice-napi": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz",

frontend/package.json

@@ -21,6 +21,7 @@
     "@angular/platform-browser-dynamic": "~13.2.0",
     "@angular/router": "~13.2.0",
     "bootstrap": "^5.1.3",
+    "ngx-cron-editor": "^0.7.3",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"

frontend/src/app/Services/profile.service.ts

@@ -66,4 +66,23 @@ export class ProfileService {
       }
     );
   }
+
+  /**
+   * @param  {string} cronString
+   * @returns Observable
+   */
+  public addCronString(cron: string): Observable<any> {
+    return this.http.put(
+      'https://gruppe1.testsites.info/api/user' + '/setCron',
+      {
+        cron,
+      },
+      {
+        headers: new HttpHeaders({
+          'Content-Type': 'application/json',
+          Authorization: 'Bearer ' + this.tokenStorage.getToken(),
+        }),
+      }
+    );
+  }
 }

frontend/src/app/Views/profile/profile.component.html

@@ -1,6 +1,6 @@
-<mat-grid-list cols="2">
-  <mat-grid-tile>
-    <mat-card class="card">
+<mat-grid-list cols="2" rowHeight="45%">
+  <mat-grid-tile colspan="1" rowspan="2">
+    <mat-card class="card placeholder">
       <mat-card-title class="card-title">Profile Information</mat-card-title>
       <mat-card-content>
         <form
@@ -95,8 +95,8 @@
       </mat-card-content>
     </mat-card>
   </mat-grid-tile>
-  <mat-grid-tile>
-    <mat-card class="card">
+  <mat-grid-tile colspan="1" rowspan="1">
+    <mat-card class="card placeholderRHS">
       <mat-card-title class="card-title">
         <span>Connect Telegram Account</span>
       </mat-card-title>
@@ -137,4 +137,29 @@
       </mat-card-content>
     </mat-card>
   </mat-grid-tile>
+  <mat-grid-tile colspan="1" rowspan="1">
+    <mat-card class="card placeholderRHS">
+      <mat-card-title class="card-title">
+        <span>Add automatic updates</span>
+      </mat-card-title>
+      <mat-card-content class="cron-content">
+        <form
+          name="form"
+          (ngSubmit)="f.form.valid && setCronString()"
+          #f="ngForm"
+          novalidate
+          class="backgorund form"
+        >
+          <cron-editor
+            class="cron-editor"
+            [formControl]="cronForm"
+            [options]="cronOptions"
+          ></cron-editor>
+          <div class="form-group footer-buttons">
+            <button class="btn btn-primary btn-block">Add</button>
+          </div>
+        </form>
+      </mat-card-content>
+    </mat-card>
+  </mat-grid-tile>
 </mat-grid-list>

frontend/src/app/Views/profile/profile.component.scss

@@ -4,7 +4,7 @@
 
 .card {
   width: 90%;
-  height: 80%;
+  height: 90%;
   margin: 5%;
 }
 
@@ -20,3 +20,16 @@ mat-grid {
   width: 100%;
   height: 100%;
 }
+
+.placeholder {
+  height: 95%;
+}
+
+.placeholderRHS {
+  height: 90%;
+}
+
+.cron-content {
+  height: 70%;
+  overflow: auto;
+}

frontend/src/app/Views/profile/profile.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { FormControl, PatternValidator, Validators } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
+import { CronOptions } from 'ngx-cron-editor';
 import { ProfileService } from 'src/app/Services/profile.service';
 import { ConfirmationDialogComponent } from './confirmation-dialog/confirmation-dialog.component';
 import { HelpDialogComponent } from './help-dialog/help-dialog.component';
@@ -31,6 +32,26 @@ export class ProfileComponent implements OnInit {
     public dialog: MatDialog
   ) {}
 
+  cronForm = new FormControl('0 0 1/1 * *');
+  public cronOptions: CronOptions = {
+    defaultTime: '00:00:00',
+
+    hideMinutesTab: true,
+    hideHourlyTab: true,
+    hideDailyTab: false,
+    hideWeeklyTab: true,
+    hideMonthlyTab: true,
+    hideYearlyTab: true,
+    hideAdvancedTab: true,
+    hideSpecificWeekDayTab: true,
+    hideSpecificMonthWeekTab: true,
+
+    use24HourTime: true,
+    hideSeconds: true,
+
+    cronFlavor: 'quartz', //standard or quartz
+  };
+
   ngOnInit(): void {
     this.profileService.getUserData().subscribe((result) => {
       console.log(result);
@@ -77,6 +98,14 @@ export class ProfileComponent implements OnInit {
     });
   }
 
+  setCronString() {
+    this.profileService
+      .addCronString(this.cronForm.value)
+      .subscribe((result) => {
+        console.log(result);
+      });
+  }
+
   openHelp() {
     const dialogRef = this.dialog.open(HelpDialogComponent, {
       width: '50vw',

frontend/src/app/app.module.ts

@@ -14,6 +14,8 @@ import { MatDialogModule } from '@angular/material/dialog';
 import { MatInputModule } from '@angular/material/input';
 import { MatChipsModule } from '@angular/material/chips';
 
+import { CronEditorModule } from 'ngx-cron-editor';
+
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { LoginComponent } from './Views/login/login.component';
@@ -57,6 +59,7 @@ import { HelpDialogComponent } from './Views/profile/help-dialog/help-dialog.com
     MatInputModule,
     ReactiveFormsModule,
     MatChipsModule,
+    CronEditorModule,
   ],
   providers: [],
   bootstrap: [AppComponent],