Merge pull request #114 from e-picsa/feat/global-demo

feat: add global configuration

apps/picsa-tools/climate-tool/src/app/pages/site-view/site-view.page.html

@@ -5,7 +5,7 @@
     color="primary"
     (click)="showShareDialog()"
   >
-    <mat-icon [inline]="true">share</mat-icon>{{ 'Share' | translate }}
+    <mat-icon>share</mat-icon>{{ 'Share' | translate }}
   </button>
   <button
     mat-button
@@ -44,21 +44,11 @@
       (openedChange)="handleSidenavChange()"
       (swipeRight)="snav.toggle()"
     >
-      <div class="sidenav-buttons">
-        <button
-          *ngIf="mobileQuery.matches"
-          mat-icon-button
-          color="primary"
-          (click)="snav.toggle()"
-        >
+      <div class="sidenav-buttons" *ngIf="mobileQuery.matches">
+        <button mat-icon-button color="primary" (click)="snav.toggle()">
           <mat-icon>close</mat-icon>
         </button>
-        <button
-          *ngIf="mobileQuery.matches"
-          mat-button
-          color="primary"
-          (click)="showShareDialog()"
-        >
+        <button mat-button color="primary" (click)="showShareDialog()">
           <mat-icon>share</mat-icon>{{ 'Share' | translate }}
         </button>
       </div>

apps/picsa-tools/resources-tool/src/app/stores/resources.store.ts

@@ -84,9 +84,10 @@ export class ResourcesStore {
     const resourcesById: { [id: string]: IResource } = JSON.parse(
       JSON.stringify(RESOURCES.byId)
     );
-    // Remove any collections with country filters
+    // Remove any collections with country filters (include all resources if no countryCode provided)
     Object.entries(resourcesById).forEach(([key, resource]) => {
       if (
+        countryCode &&
         resource.appCountries &&
         !resource.appCountries.includes(countryCode)
       ) {

libs/components/src/components/configuration-select/configuration-select-dialog.html

@@ -1,15 +1,12 @@
-<h2 style="margin-top: 0">Select Country</h2>
+<h2 style="margin-top: 0">{{'Select Country' | translate}}</h2>
 <div class="country-select-container">
   <div
     *ngFor="let option of options"
     class="select-option"
     [class.selected]="option.country.code===selected.country.code ? true : undefined"
     (click)="setLocalisation(option)"
   >
-    <img
-      [src]="'assets/images/flags/' + option.country.code + '.svg'"
-      class="language-select-flag"
-    />
+    <img [src]="option.country.image" class="language-select-flag" />
     <div style="text-align: center">{{ option.country.label }}</div>
   </div>
 </div>

libs/components/src/components/configuration-select/configuration-select-dialog.scss

@@ -7,13 +7,16 @@
 
 .language-select-container {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
   gap: 5px;
   width: 220px;
+  grid-template-rows: auto;
 }
+
 img.language-select-flag {
   width: 100%;
   height: 70px;
+  object-fit: contain;
 }
 
 .select-option {

libs/components/src/components/configuration-select/configuration-select.html

@@ -1,4 +1,6 @@
 <button mat-button color="primary" (click)="openLanguageSelect()">
-  <img class="language-summary-flag" [src]="image" />
-  <span class="language-label">{{ label }}</span>
+  <div style="display: flex; align-items: center">
+    <img class="language-summary-flag" [src]="image" />
+    <span class="language-label">{{ label }}</span>
+  </div>
 </button>

libs/components/src/components/configuration-select/configuration-select.scss

@@ -1,5 +1,6 @@
 :host {
-  height: 36px;
+  display: flex;
+  justify-content: center;
 }
 img.language-summary-flag {
   height: 30px;

libs/components/src/components/configuration-select/configuration-select.ts

@@ -14,7 +14,8 @@ export class ConfigurationSelectComponent {
     public configurationService: ConfigurationService
   ) {}
   get image() {
-    return this.configurationService.activeConfiguration.meta.image;
+    return this.configurationService.activeConfiguration.localisation.country
+      .image;
   }
   get label() {
     const { country, language } =

libs/configuration/src/configurations.ts

@@ -1,6 +1,7 @@
 import mw from './configurations/mw';
 import tj from './configurations/tj';
 import zm from './configurations/zm';
+import global from './configurations/global';
 
 /** Configurations define different environments that can be set at runtime */
-export const CONFIGURATIONS = [mw, zm, tj];
+export const CONFIGURATIONS = [mw, zm, tj, global];

libs/configuration/src/configurations/default.ts

@@ -2,15 +2,14 @@ import { IConfiguration } from '../types';
 
 const configuration: IConfiguration.Settings = {
   id: '',
-  meta: { label: '', image: '' },
   android: {},
   budgetTool: {
     currency: '$',
     currencyBaseValue: 1,
   },
   climateTool: {},
   localisation: {
-    country: { label: '', code: '' },
+    country: { label: '', code: '', image: '' },
     language: {
       options: [],
       selected: undefined,

libs/configuration/src/configurations/global.ts

@@ -0,0 +1,32 @@
+import { IConfiguration } from '../types';
+
+const configuration: IConfiguration.Settings = {
+  id: 'demo',
+  android: {},
+  budgetTool: {
+    currency: '$',
+    currencyBaseValue: 1,
+  },
+  climateTool: {
+    // include all stations
+    stationFilter: () => true,
+  },
+
+  localisation: {
+    country: {
+      label: 'Global',
+      code: '',
+      image: 'assets/images/flags/global.svg',
+    },
+    language: {
+      options: [
+        { id: 'en', label: 'English', code: 'en' },
+        { id: 'ny', label: 'Chichewa', code: 'ny' },
+        { id: 'tg', label: 'Тоҷикӣ', code: 'tg' },
+      ],
+      selected: undefined,
+    },
+  },
+  theme: 'picsa-global',
+};
+export default configuration;

libs/configuration/src/configurations/mw.ts

@@ -2,15 +2,18 @@ import { IConfiguration } from '../types';
 
 const configuration: IConfiguration.Settings = {
   id: 'mw',
-  meta: { label: 'Malawi', image: 'assets/images/flags/mw.svg' },
   android: {},
   budgetTool: {
     currency: 'MK',
     currencyBaseValue: 10000,
   },
   climateTool: {},
   localisation: {
-    country: { label: 'Malawi', code: 'mw' },
+    country: {
+      label: 'Malawi',
+      code: 'mw',
+      image: 'assets/images/flags/mw.svg',
+    },
     language: {
       options: [
         { id: 'en', label: 'English', code: 'en' },
@@ -19,6 +22,6 @@ const configuration: IConfiguration.Settings = {
       selected: undefined,
     },
   },
-  theme: 'picsa-default',
+  theme: 'picsa-mw',
 };
 export default configuration;

libs/configuration/src/configurations/tj.ts

@@ -2,15 +2,18 @@ import { IConfiguration } from '../types';
 
 const configuration: IConfiguration.Settings = {
   id: 'tj',
-  meta: { label: 'Tajikistan', image: 'assets/images/flags/tj.svg' },
   android: {},
   budgetTool: {
     currency: 'TJS',
     currencyBaseValue: 10,
   },
   climateTool: {},
   localisation: {
-    country: { label: 'Tajikistan', code: 'tj' },
+    country: {
+      label: 'Tajikistan',
+      code: 'tj',
+      image: 'assets/images/flags/tj.svg',
+    },
     language: {
       options: [
         { id: 'en', label: 'English', code: 'en' },

libs/configuration/src/configurations/zm.ts

@@ -2,15 +2,18 @@ import { IConfiguration } from '../types';
 
 const configuration: IConfiguration.Settings = {
   id: 'zm',
-  meta: { label: 'Zambia', image: 'assets/images/flags/zm.svg' },
   android: {},
   budgetTool: {
     currency: 'ZMK',
     currencyBaseValue: 10,
   },
   climateTool: {},
   localisation: {
-    country: { label: 'Zambia', code: 'zm' },
+    country: {
+      label: 'Zambia',
+      code: 'zm',
+      image: 'assets/images/flags/zm.svg',
+    },
     language: {
       options: [
         { id: 'en', label: 'English', code: 'en' },

libs/configuration/src/types.ts

@@ -11,7 +11,7 @@ export namespace IConfiguration {
   }
 
   export interface Localisation {
-    country: { label: string; code: string };
+    country: { label: string; code: string; image: string };
     language: {
       options: IConfiguration.LanguageOption[];
       selected?: LanguageOption;
@@ -20,12 +20,12 @@ export namespace IConfiguration {
 
   export interface Settings {
     id: string;
-    meta: { label: string; image: string };
     android: any;
     budgetTool: IBudgetToolSettings;
     climateTool: {
       stationFilter?: (station: any) => boolean;
     };
+    resourcesTool?: {};
     localisation: IConfiguration.Localisation;
     theme: any;
   }

libs/theme/src/_index.scss

@@ -10,5 +10,7 @@
 @import 'overrides';
 
 @import './themes/picsa-default.scss';
+@import './themes/picsa-global.scss';
+@import './themes/picsa-mw.scss';
 @import './themes/picsa-tj.scss';
 @import './themes/picsa-zm.scss';

libs/theme/src/themes/picsa-global.scss

@@ -0,0 +1,99 @@
+@use '@angular/material' as mat;
+
+@include mat.core();
+
+// http://mcg.mbitson.com/#!?mcgpalette0=%23ef7d00&themename=mcgtheme
+$primary: (
+  50: #f1e5e9,
+  100: #dcbec7,
+  200: #c593a2,
+  300: #ad677c,
+  400: #9c4760,
+  500: #8a2644,
+  600: #82223e,
+  700: #771c35,
+  800: #6d172d,
+  900: #5a0d1f,
+  A100: #ff90a5,
+  A200: #ff5d7b,
+  A400: #ff2a52,
+  A700: #ff103d,
+  contrast: (
+    50: #000000,
+    100: #000000,
+    200: #000000,
+    300: #ffffff,
+    400: #ffffff,
+    500: #ffffff,
+    600: #ffffff,
+    700: #ffffff,
+    800: #ffffff,
+    900: #ffffff,
+    A100: #000000,
+    A200: #000000,
+    A400: #ffffff,
+    A700: #ffffff,
+  ),
+);
+$accent: (
+  50: #f4e4e4,
+  100: #e3baba,
+  200: #d18d8d,
+  300: #bf5f5f,
+  400: #b13c3c,
+  500: #a31a1a,
+  600: #9b1717,
+  700: #911313,
+  800: #880f0f,
+  900: #770808,
+  A100: #ffa7a7,
+  A200: #ff7474,
+  A400: #ff4141,
+  A700: #ff2727,
+  contrast: (
+    50: #000000,
+    100: #000000,
+    200: #000000,
+    300: #ffffff,
+    400: #ffffff,
+    500: #ffffff,
+    600: #ffffff,
+    700: #ffffff,
+    800: #ffffff,
+    900: #ffffff,
+    A100: #000000,
+    A200: #000000,
+    A400: #ffffff,
+    A700: #ffffff,
+  ),
+);
+
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue. Available color palettes: https://material.io/design/color/
+$palette-primary: mat.define-palette($primary);
+$palette-accent: mat.define-palette($accent, A200, A100, A400);
+
+// The warn palette is optional (defaults to red).
+$palette-warn: mat.define-palette(mat.$red-palette);
+
+// Create the theme object (a Sass map containing all of the palettes).
+$theme-global: mat.define-light-theme(
+  $palette-primary,
+  $palette-accent,
+  $palette-warn
+);
+
+// .theme-global {
+//   @include mat.all-component-themes($picsa-global);
+// }
+body[data-theme='picsa-global'] {
+  @include mat.all-component-themes($theme-global);
+
+  --color-primary: #{map-get($palette-primary, 500)};
+  --color-primary-50: #{map-get($palette-primary, 50)};
+  --color-secondary: #{map-get($palette-accent, 500)};
+  --color-black: #1a2138;
+  --color-light: #d8d8d8;
+  --color-white: #ffffff;
+}