Add fmPackageExists directive

package.json

@@ -1,6 +1,6 @@
 {
   "name": "farmmaps-lib-app",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

projects/common/src/fm/actions/app-common.actions.ts

@@ -12,6 +12,9 @@ export const INITUSERSUCCESS = '[AppCommon] InitUserSuccess';
 export const INITUSERPACKAGES = '[AppCommon] InitUserPackages';
 export const INITUSERPACKAGESSUCCESS = '[AppCommon] InitUserPackagesSuccess';
 
+export const INITPACKAGES = '[AppCommon] InitPackages';
+export const INITPACKAGESSUCCESS = '[AppCommon] InitPackagesSuccess';
+
 export const INITUSERSETTINGSROOT = '[AppCommon] InitUserSettingsRoot';
 export const INITUSERSETTINGSROOTSUCCESS = '[AppCommon] InitUserSettingsRootSuccess';
 
@@ -102,6 +105,18 @@ export class InitUserPackagesSuccess implements Action {
   constructor(public items:IItem[] ) { }
 }
 
+export class InitPackages implements Action {
+  readonly type = INITPACKAGES;
+
+  constructor() {}
+}
+
+export class InitPackagesSuccess implements Action {
+  readonly type = INITPACKAGESSUCCESS;
+
+  constructor(public items:IItem[] ) { }
+}
+
 export class InitUserSettingsRoot implements Action {
   readonly type = INITUSERSETTINGSROOT;
 
@@ -381,6 +396,8 @@ export type Actions = OpenModal
   | SetMenuVisible
   | InitUserPackages
   | InitUserPackagesSuccess
+  | InitPackages
+  | InitPackagesSuccess
   | InitUserSettingsRoot
   | InitUserSettingsRootSuccess
   | ToggleAccountMenu

projects/common/src/fm/common-service.module.ts

@@ -35,6 +35,7 @@ import { PackageService } from './services/package.service';
 import { PackagePreloadStrategy } from './services/package-preload-strategy.service';
 import { SenmlService } from './services/senml-service';
 import { DeviceService } from './services/device.service';
+import { GradientService} from './services/gradient.service';
 
 export {
   FolderService,
@@ -61,7 +62,8 @@ export {
   PackageService,
   SenmlService,
   PackagePreloadStrategy,
-  DeviceService
+  DeviceService,
+  GradientService
 };
 
 @NgModule({

projects/common/src/fm/common.module.ts

@@ -32,6 +32,7 @@ import { TimespanComponent } from './components/timespan/timespan.component';
 import { TagInputComponent } from './components/tag-input/tag-input.component';
 import { MenuBackgroundComponent } from './components/menu-background/menu-background.component';
 import { HasPackageDirective} from './components/has-package/has-package.directive';
+import { PackageExistsDirective} from './components/package-exists/package-exists.directive';
 import { HasClaimDirective} from './components/has-claim/has-claim.directive';
 import { UserMenuComponent} from './components/user-menu/user-menu.component';
 import { ThumbnailComponent } from './components/thumbnail/thumbnail.component';
@@ -82,6 +83,7 @@ export {
   UserMenuComponent,
   ThumbnailComponent,
   HasPackageDirective,
+  PackageExistsDirective,
   HasClaimDirective,
   Alert,
   IEventMessage,
@@ -144,6 +146,7 @@ export {
     SessionClearedComponent,
     MenuBackgroundComponent,
     HasPackageDirective,
+    PackageExistsDirective,
     HasClaimDirective,
     UserMenuComponent,
     GradientComponent,
@@ -174,6 +177,7 @@ export {
     SessionClearedComponent,
     MenuBackgroundComponent,
     HasPackageDirective,
+    PackageExistsDirective,
     HasClaimDirective,
     UserMenuComponent,
     GradientComponent,

projects/common/src/fm/components/gradient/gradient.component.ts

@@ -1,6 +1,7 @@
 import { Component, Input, OnInit ,OnChanges, SimpleChanges,ChangeDetectorRef} from '@angular/core';
 import { IItem} from '../../models/item'
 import { IGradientstop } from '../../models/gradient';
+import { GradientService } from '../../common-service.module';
 
 
 
@@ -14,23 +15,12 @@ export class GradientComponent implements OnInit,OnChanges {
   @Input() gradientItem:IItem;
   public gradientStyle:any = {};
 
-  constructor(private ref: ChangeDetectorRef) { }
+  constructor(private ref: ChangeDetectorRef,private gradientService:GradientService) { }
 
   getGradientStyle(item:IItem):any {
     if(item.data && item.data.gradient) {
       let gradient = item.data.gradient as IGradientstop[];
-      let gd = '{ "background": "linear-gradient(to right,';
-      for(var i=0;i<gradient.length;i++) {
-        let gs = gradient[i];
-        if(i>0) gd+=",";
-        gd += `rgba(${gs.color.red},${gs.color.green},${gs.color.blue},${gs.color.alpha/255})`;          
-        gd +=` ${gs.relativestop*100}%`
-      }
-      gradient.forEach((gs) => {
-      });
-      gd+=')"}';
-      
-      return JSON.parse(gd);
+      return this.gradientService.getGradientStyle(gradient);
     }
   }
 
@@ -49,5 +39,4 @@ export class GradientComponent implements OnInit,OnChanges {
       }      
     }
   }
-
 }

projects/common/src/fm/components/package-exists/package-exists.directive.ts

@@ -0,0 +1,61 @@
+import {AfterViewInit, Directive, Input, OnDestroy, TemplateRef, ViewContainerRef} from '@angular/core';
+import {Subscription} from 'rxjs';
+import {PackageService} from '../../services/package.service';
+import * as appCommonReducer from '../../reducers/app-common.reducer';
+import {Store} from '@ngrx/store';
+
+@Directive({
+  selector: '[fmPackageExists]',
+})
+export class PackageExistsDirective implements OnDestroy, AfterViewInit {
+
+  @Input()
+  set fmPackageExists(packageIdentifier: string) {
+    this.packageIdentifier = packageIdentifier;
+    this.updateView();
+  }
+
+  @Input()
+  set fmPackageExistsThen(thenTemplate: TemplateRef<any>) {
+    this.thenTemplate = thenTemplate;
+    this.updateView();
+  }
+
+  @Input()
+  set fmPackageExistsElse(thenTemplate: TemplateRef<any>) {
+    this.elseTemplate = thenTemplate;
+    this.updateView();
+  }
+
+  private packageIdentifier: string;
+  private thenTemplate: TemplateRef<any>;
+  private elseTemplate: TemplateRef<any>;
+  private packSub: Subscription;
+
+  constructor(private hostTemplateRef: TemplateRef<any>, private viewContainerRef: ViewContainerRef,
+              private store: Store<appCommonReducer.State>, private packageService: PackageService) {
+    this.thenTemplate = hostTemplateRef;
+    this.packSub = this.store.select(appCommonReducer.SelectGetPackages).subscribe((_) => {
+      this.updateView();
+    });
+  }
+
+  ngAfterViewInit() {
+    this.updateView();
+  }
+
+  updateView() {
+    this.viewContainerRef.clear();
+    if (this.packageService.packageExists(this.packageIdentifier)) {
+      this.viewContainerRef.createEmbeddedView(this.thenTemplate);
+    } else if (this.elseTemplate) {
+      this.viewContainerRef.createEmbeddedView(this.elseTemplate);
+    }
+  }
+
+  ngOnDestroy() {
+    if (this.packSub) {
+      this.packSub.unsubscribe();
+    }
+  }
+}

projects/common/src/fm/effects/app-common.effects.ts

@@ -62,6 +62,15 @@ export class AppCommonEffects {
       )
     })
   ));
+  initPackages$ =  createEffect(() => this.actions$.pipe(
+    ofType(appCommonActions.INITPACKAGES),
+    switchMap(() => {
+      return this.itemService$.getItemList('vnd.farmmaps.itemtype.package.template').pipe(
+        switchMap((items) => of(new appCommonActions.InitPackagesSuccess(items))),
+        catchError(error =>  of(new appCommonActions.Fail(error)))
+      )
+    })
+  ));
 
   userPackagesChanged$ =  createEffect(() => this.actions$.pipe(
     ofType(appCommonActions.ITEMCHANGEDEVENT),
@@ -99,7 +108,7 @@ export class AppCommonEffects {
   initUserSuccess$ =  createEffect(() => this.actions$.pipe(
     ofType(appCommonActions.INITUSERSUCCESS),
     switchMap(() => {
-      return [new appCommonActions.InitRoot(),new appCommonActions.InitUserPackages(),new appCommonActions.InitUserSettingsRoot()];
+      return [new appCommonActions.InitRoot(),new appCommonActions.InitUserPackages(),new appCommonActions.InitPackages(),new appCommonActions.InitUserSettingsRoot()];
     }
     )));
 

projects/common/src/fm/models/package.ts

@@ -9,3 +9,8 @@ export interface IPackage {
 export interface IPackages {
     [id: string]: IPackage[];
 }
+
+export interface IPackageMap {
+    [id: string]: IPackage;
+}
+

projects/common/src/fm/reducers/app-common.reducer.ts

@@ -2,7 +2,7 @@ import { tassign } from 'tassign';
 import { IItemTypes} from '../models/item.types';
 import { IListItem } from '../models/list.item';
 import { IUser } from '../models/user';
-import { IPackage,IPackages} from '../models/package';
+import { IPackage,IPackageMap,IPackages} from '../models/package';
 import * as appCommonActions from '../actions/app-common.actions';
 import { createSelector, createFeatureSelector, ActionReducerMap } from '@ngrx/store';
 
@@ -20,6 +20,7 @@ export interface State {
   routeLoading:boolean,
   menuVisible: boolean,
   userPackages: IPackages,
+  packages: IPackageMap,
   userSettingsRoot: IItem,
   accountMenuVisible: boolean,
   appMenuVisible: boolean,
@@ -40,6 +41,7 @@ export const initialState: State = {
   routeLoading: false,
   menuVisible: false,
   userPackages: {},
+  packages: {},
   userSettingsRoot: null,
   accountMenuVisible: false,
   appMenuVisible: false,
@@ -140,6 +142,15 @@ export function reducer(state = initialState, action: appCommonActions.Actions )
 
       return tassign(state,{userPackages:packages});
     }
+    case appCommonActions.INITPACKAGESSUCCESS:{
+      let a = action as appCommonActions.InitPackagesSuccess;
+      let packages = {}
+      a.items.forEach((item) => {
+        packages[item.data.id] = item.data;
+      });
+
+      return tassign(state,{packages:packages});
+    }
     case appCommonActions.INITUSERSETTINGSROOTSUCCESS:{
       let a = action as appCommonActions.InitUserSettingsRootSuccess;
       return tassign(state, { userSettingsRoot : a.item });
@@ -187,6 +198,7 @@ export const getRouteLoading = (state: State) => state.routeLoading;
 export const getMenuVisible = (state: State) => state.menuVisible;
 export const getUser = (state: State) => state.user;
 export const getUserPackages = (state: State) => state.userPackages;
+export const getPackages = (state: State) => state.packages;
 export const getUserSettingsRoot = (state: State) => state.userSettingsRoot;
 export const getAccountMenuVisible = (state: State) => state.accountMenuVisible;
 export const getAppMenuVisible = (state: State) => state.appMenuVisible;
@@ -207,6 +219,7 @@ export const selectGetRouteLoading = createSelector(selectAppCommonState, getRou
 export const SelectGetMenuVisible = createSelector(selectAppCommonState,getMenuVisible);
 export const SelectGetUser = createSelector(selectAppCommonState,getUser);
 export const SelectGetUserPackages = createSelector(selectAppCommonState,getUserPackages);
+export const SelectGetPackages = createSelector(selectAppCommonState,getPackages);
 export const SelectGetValidUserPackages = createSelector(SelectGetUserPackages, (packageMap) => {
   return getValidPackages(packageMap);
 });

projects/common/src/fm/services/gradient.service.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import {IGradientstop } from '../models/gradient'
+
+@Injectable({
+  providedIn: 'root',
+})
+export class GradientService {
+  constructor() {
+  }
+
+  getGradientStyle(gradient:IGradientstop[],portrait:boolean = false ):any {
+      let gd = '{ "background": "linear-gradient(to ' + (portrait?'bottom':'right') +',';
+      for(var i=0;i<gradient.length;i++) {
+        let gs = gradient[i];
+        if(i>0) gd+=",";
+        gd += `rgba(${gs.color.red},${gs.color.green},${gs.color.blue},${gs.color.alpha/255})`;          
+        gd +=` ${gs.relativestop*100}%`
+      }
+      gradient.forEach((gs) => {
+      });
+      gd+=')"}';
+      
+      return JSON.parse(gd);
+    }  
+}

projects/common/src/fm/services/package.service.ts

@@ -14,10 +14,14 @@ import {Observable} from 'rxjs';
 })
 
 export class PackageService {
+  private userPackages: { [key: string]: IPackage } = {};
   private packages: { [key: string]: IPackage } = {};
 
   constructor(private store$: Store<appCommonReducer.State>, public httpClient: HttpClient, public appConfig: AppConfig) {
     store$.select(appCommonReducer.SelectGetValidUserPackages).subscribe((packages) => {
+      this.userPackages = packages;
+    });
+    store$.select(appCommonReducer.SelectGetPackages).subscribe((packages) => {
       this.packages = packages;
     });
   }
@@ -27,6 +31,10 @@ export class PackageService {
   }
 
   hasPackage(id: string): boolean {
+    return id in this.userPackages;
+  }
+
+  packageExists(id: string): boolean {
     return id in this.packages;
   }
 

src/app/test/test.component.html

@@ -2,7 +2,7 @@
     <div class="row">
         <fm-gradient-select [gradientItems]="gradientItems|async" [showLabel]="false" [showAdd]="true"></fm-gradient-select>
     </div>
-    <div class="row mt-3">
+    <div class="row mt-3" *fmPackageExists="'vnd.farmmaps.itemtype.package.dacom'">
         <button class="btn btn-primary" (click)="onTest($event)">Test</button>
     </div>
 </div>