#49 recurring snapshots wip

src/app/shared/components/table/table.component.html

@@ -2,25 +2,36 @@
   <thead>
   <tr>
     <th *ngIf="selectable">
-      <mdl-checkbox mdl-ripple [ngModel]="isAllSelected()" (ngModelChange)="toogleAll()"></mdl-checkbox>
+      <mdl-checkbox
+        mdl-ripple
+        [ngModel]="isAllSelected()"
+        (ngModelChange)="toogleAll()"
+      ></mdl-checkbox>
     </th>
-    <th *ngFor="let column of model.columns"
-        [ngClass]="{'mdl-data-table__cell--non-numeric': !column.numeric}">
+    <th
+      *ngFor="let column of model.columns"
+      [ngClass]="{'mdl-data-table__cell--non-numeric': !column.numeric}">
       {{column.name}}
     </th>
   </tr>
   </thead>
   <tbody>
-  <tr *ngFor="let data of model.data; let i = index" [ngClass]="{'is-selected': selectable && data.selected}">
+  <tr
+    *ngFor="let data of model.data; let i = index"
+    [ngClass]="{'is-selected': selectable && data.selected}"
+  >
     <td *ngIf="selectable">
-      <mdl-checkbox mdl-ripple
-                    [(ngModel)]="data.selected"
-                    (ngModelChange)="selectionChanged(data)"></mdl-checkbox>
-    </td>
-    <td *ngFor="let column of model.columns"
-        [ngClass]="{'mdl-data-table__cell--non-numeric': !column.numeric}"
-        [innerHTML]="data[column.key] | highlight:searchQuery">
+      <mdl-checkbox
+        mdl-ripple
+        [(ngModel)]="data.selected"
+        (ngModelChange)="selectionChanged(data)"
+      ></mdl-checkbox>
     </td>
+    <td
+      *ngFor="let column of model.columns"
+      [ngClass]="{'mdl-data-table__cell--non-numeric': !column.numeric}"
+      [innerHTML]="data[column.key] | highlight:searchQuery"
+    ></td>
   </tr>
   </tbody>
 </table>

src/app/shared/custom-query-encoder.ts

@@ -0,0 +1,25 @@
+import { QueryEncoder } from '@angular/http';
+
+
+// Default QueryEncoder used in URLSearchParams does not encode '+' and '/',
+// We have to provide a custom QueryEncoder to encode '+' and '/'
+export class CustomQueryEncoder extends QueryEncoder {
+  private static encode(v: string): string {
+    return encodeURIComponent(v)
+      .replace(/%40/gi, '@')
+      .replace(/%3A/gi, ':')
+      .replace(/%24/gi, '$')
+      .replace(/%2C/gi, ',')
+      .replace(/%3B/gi, ';')
+      .replace(/%3D/gi, '=')
+      .replace(/%3F/gi, '?');
+  }
+
+  encodeKey(k: string): string {
+    return CustomQueryEncoder.encode(k);
+  }
+
+  encodeValue(v: string): string {
+    return CustomQueryEncoder.encode(v);
+  }
+}

src/app/shared/services/base-backend.service.ts

@@ -2,10 +2,11 @@ import { Headers, Http, Response, URLSearchParams } from '@angular/http';
 import { Observable } from 'rxjs/Observable';
 
 import { BaseModel } from '../models';
-import { CacheService } from './cache.service';
 import { Cache } from './cache';
+import { CacheService } from './cache.service';
 import { ErrorService } from './error.service';
 import { ServiceLocator } from './service-locator';
+import { CustomQueryEncoder } from '../custom-query-encoder';
 
 
 export const BACKEND_API_URL = 'client/api';
@@ -80,7 +81,7 @@ export abstract class BaseBackendService<M extends BaseModel> {
   }
 
   protected buildParams(command: string, params?: {}, entity?: string): URLSearchParams {
-    const urlParams = new URLSearchParams();
+    const urlParams = new URLSearchParams(undefined, new CustomQueryEncoder());
     urlParams.append('command', this.getRequestCommand(command, entity));
 
     for (const key in params) {
@@ -89,7 +90,7 @@ export abstract class BaseBackendService<M extends BaseModel> {
       }
 
       if (!Array.isArray(params[key])) {
-        urlParams.set(key.toLowerCase(), params[key]);
+        urlParams.set(key.toLowerCase(), encodeURI(params[key]));
         continue;
       }
 
@@ -107,9 +108,16 @@ export abstract class BaseBackendService<M extends BaseModel> {
   }
 
   protected getRequest(command: string, params?: {}, entity?: string): Observable<any> {
-    return this.http.get(BACKEND_API_URL, {
-      search: this.buildParams(command, params, entity)
-    })
+    const headers = new Headers({
+      'Content-Type': 'application/x-www-form-urlencoded'
+    });
+
+    return this.http.get(BACKEND_API_URL,
+      {
+        headers,
+        search: this.buildParams(command, params, entity)
+      }
+    )
       .map((res: Response) => res.json())
       .catch(error => this.handleError(error));
   }

src/app/snapshot/recurring-snapshots/day-of-week/day-of-week.component.ts

@@ -15,7 +15,6 @@ export interface DayOfWeekName {
 @Component({
   selector: 'cs-day-of-week',
   templateUrl: 'day-of-week.component.html',
-  styleUrls: ['day-of-week.component.scss'],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,

src/app/snapshot/recurring-snapshots/policy-editor/daily/daily-policy.component.ts

@@ -12,7 +12,6 @@ export type TimeFormat = 12 | 24;
 @Component({
   selector: 'cs-daily-policy',
   templateUrl: 'daily-policy.component.html',
-  styleUrls: ['daily-policy.component.scss'],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,

src/app/snapshot/recurring-snapshots/policy-editor/monthly/monthly-policy.component.html

@@ -1,22 +1,23 @@
-<cs-time-picker
-  name="time"
-  [ngModel]="time"
-  (ngModelChange)="updateTime($event)"
-></cs-time-picker>
+<div class="flex-container">
+  <cs-time-picker
+    name="time"
+    [ngModel]="time"
+    (ngModelChange)="updateTime($event)"
+  ></cs-time-picker>
 
-<mdl-select
-  name="dayOfMonth"
-  floating-label
-  required
-  [label]="'DAY_OF_MONTH' | translate"
-  [ngModel]="dayOfMonth"
-  (ngModelChange)="updateDayOfMonth($event)"
->
-  <mdl-option
-    *ngFor="let d of daysOfMonth"
-    [value]="d"
+  <mdl-select
+    name="dayOfMonth"
+    floating-label
+    required
+    [label]="'DAY_OF_MONTH' | translate"
+    [ngModel]="dayOfMonth"
+    (ngModelChange)="updateDayOfMonth($event)"
   >
-    {{ d }}
-  </mdl-option>
-</mdl-select>
-
+    <mdl-option
+      *ngFor="let d of daysOfMonth"
+      [value]="d"
+    >
+      {{ d }}
+    </mdl-option>
+  </mdl-select>
+</div>

src/app/snapshot/recurring-snapshots/policy-editor/monthly/monthly-policy.component.scss

@@ -0,0 +1,8 @@
+.flex-container {
+  display: flex;
+  align-content: space-between;
+}
+
+.flex-container *:first-child {
+  flex: 1;
+}

src/app/snapshot/recurring-snapshots/policy-editor/monthly/monthly-policy.component.ts

@@ -14,6 +14,7 @@ export interface MonthlyPolicy extends Time {
 @Component({
   selector: 'cs-monthly-policy',
   templateUrl: 'monthly-policy.component.html',
+  styleUrls: ['monthly-policy.component.scss'],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,

src/app/snapshot/recurring-snapshots/policy-editor/policy-editor.component.html

@@ -1,41 +1,58 @@
-<div [ngSwitch]="policyMode">
-  <cs-hourly-policy
-    *ngSwitchCase="Policies.Hourly"
-    [(ngModel)]="policy"
-  ></cs-hourly-policy>
+<form
+  (ngSubmit)="save()"
+  #policyEditorForm="ngForm"
+  novalidate
+>
+  <div [ngSwitch]="policyMode">
+    <cs-hourly-policy
+      name="hourlyPolicy"
+      *ngSwitchCase="Policies.Hourly"
+      [(ngModel)]="policy"
+    ></cs-hourly-policy>
 
-  <cs-daily-policy
-    *ngSwitchCase="Policies.Daily"
-    [(ngModel)]="policy"
-  ></cs-daily-policy>
+    <cs-daily-policy
+      name="dailyPolicy"
+      *ngSwitchCase="Policies.Daily"
+      [(ngModel)]="policy"
+    ></cs-daily-policy>
 
-  <cs-weekly-policy
-    *ngSwitchCase="Policies.Weekly"
-    [(ngModel)]="policy"
-  ></cs-weekly-policy>
+    <cs-weekly-policy
+      name="weeklyPolicy"
+      *ngSwitchCase="Policies.Weekly"
+      [(ngModel)]="policy"
+    ></cs-weekly-policy>
 
-  <cs-monthly-policy
-    *ngSwitchCase="Policies.Monthly"
-    [(ngModel)]="policy"
-  ></cs-monthly-policy>
-</div>
+    <cs-monthly-policy
+      name="monthlyPolicy"
+      *ngSwitchCase="Policies.Monthly"
+      [(ngModel)]="policy"
+    ></cs-monthly-policy>
+  </div>
 
-<cs-time-zone
-  name="timeZone"
-  [(ngModel)]="timeZone"
-></cs-time-zone>
+  <div class="flex-container">
+    <cs-time-zone
+      name="timeZone"
+      [(ngModel)]="timeZone"
+    ></cs-time-zone>
 
-<cs-stored-number
-  name="storedNumber"
-  [(ngModel)]="storedSnapshots"
-></cs-stored-number>
+    <cs-stored-number
+      name="storedNumber"
+      [(ngModel)]="storedSnapshots"
+      [min]="minStoredSnapshots"
+      [max]="maxStoredSnapshots"
+      [minValue]="minStoredSnapshots"
+      [maxValue]="maxStoredSnapshots"
+    ></cs-stored-number>
+  </div>
 
-<div class="button-wrapper">
-  <button
-    mdl-button
-    mdl-colored
-    (click)="save()"
-  >
-    {{ 'SAVE' | translate }}
-  </button>
-</div>
+  <div class="button-wrapper">
+    <button
+      mdl-button
+      mdl-colored="primary"
+      type="submit"
+      [disabled]="!policyEditorForm.valid"
+    >
+      {{ 'SAVE' | translate }}
+    </button>
+  </div>
+</form>

src/app/snapshot/recurring-snapshots/policy-editor/policy-editor.component.scss

@@ -1,3 +1,12 @@
 .button-wrapper {
   text-align: right;
 }
+
+.flex-container {
+  display: flex;
+  align-content: space-between;
+}
+
+.flex-container *:first-child {
+  flex: 1;
+}

src/app/snapshot/recurring-snapshots/policy-editor/policy-editor.component.ts

@@ -5,7 +5,6 @@ import { DailyPolicy } from './daily/daily-policy.component';
 import { HourlyPolicy } from './hourly/hourly-policy.component';
 import { MonthlyPolicy } from './monthly/monthly-policy.component';
 import { WeeklyPolicy } from './weekly/weekly-policy.component';
-import { Time } from '../time-picker/time-picker.component';
 
 
 export type TimePolicy = HourlyPolicy & DailyPolicy & WeeklyPolicy & MonthlyPolicy;
@@ -32,6 +31,9 @@ export class PolicyEditorComponent {
   public policy = { minute: 0 };
 
   public timeZone: TimeZone;
+
+  public minStoredSnapshots = 1;
+  public maxStoredSnapshots = 8;
   public storedSnapshots = 1;
 
   constructor() {

src/app/snapshot/recurring-snapshots/policy-editor/weekly/weekly-policy.component.html

@@ -1,11 +1,14 @@
-<cs-time-picker
-  name="time"
-  [ngModel]="time"
-  (ngModelChange)="updateTime($event)"
-></cs-time-picker>
+<div class="flex-container">
+  <cs-time-picker
+    name="time"
+    [ngModel]="time"
+    (ngModelChange)="updateTime($event)"
+  ></cs-time-picker>
+
+  <cs-day-of-week
+    name="dayOfWeek"
+    [ngModel]="dayOfWeek"
+    (ngModelChange)="updateDayOfWeek($event)"
+  ></cs-day-of-week>
+</div>
 
-<cs-day-of-week
-  name="dayOfWeek"
-  [ngModel]="dayOfWeek"
-  (ngModelChange)="updateDayOfWeek($event)"
-></cs-day-of-week>

src/app/snapshot/recurring-snapshots/policy-editor/weekly/weekly-policy.component.scss

@@ -0,0 +1,8 @@
+.flex-container {
+  display: flex;
+  align-content: space-between;
+}
+
+.flex-container *:first-child {
+  flex: 1;
+}

src/app/snapshot/recurring-snapshots/policy-editor/weekly/weekly-policy.component.ts

@@ -12,6 +12,7 @@ export interface WeeklyPolicy extends Time {
 @Component({
   selector: 'cs-weekly-policy',
   templateUrl: 'weekly-policy.component.html',
+  styleUrls: ['weekly-policy.component.scss'],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,