Settings UI updates

openchargemap · Aug 25, 2023 · aeabbea · aeabbea
1 parent 5bcc0fa
commit aeabbea
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 55 deletions.
diff --git a/src/app/components/operator-lookup/operator-lookup.component.html b/src/app/components/operator-lookup/operator-lookup.component.html
@@ -11,9 +11,9 @@
 </ion-item>
 
 <ion-item *ngIf="!useFilteredOperators && !selectedOperator">
-  <ion-label>Network Operator</ion-label>
+
   <ion-searchbar
-    placeholder="Search by network name (in any country)"
+    placeholder="Search network operators"
     showCancelButton="focus"
     (ionCancel)="cancelOperatorLookup()"
     autocomplete="on"

diff --git a/src/app/model/SearchSettings.ts b/src/app/model/SearchSettings.ts
@@ -1,7 +1,7 @@
 import { GeoLatLng } from "./GeoPosition";
 import { MapType } from "../services/mapping/interfaces/mapping";
 
-export const MAX_POWER: number = 650;
+export const MAX_POWER: number = 1000;
 
 export class SearchSettings {
   OperatorList: Array<number>;

diff --git a/src/app/pages/search/search.scss b/src/app/pages/search/search.scss
@@ -1,4 +1,5 @@
 .search-page {
+
   #map-canvas {
     width: 100%;
     height: 98%;
@@ -10,16 +11,7 @@
     z-index: 100;
     width: 100%;
   }
-  ion-content {
-  }
-  ion-buttons {
-    flex: 0.4;
-  }
-  ion-grid,
-  ion-row,
-  ion-col {
-    padding: 0;
-  }
+
   scroll-content {
     overflow-y: hidden;
   }
@@ -37,22 +29,4 @@
     );
     /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   }
-  /*
-    .route {
-    
-        color: white;
-        .item {
-            background-color: transparent;
-        }
-        .route-places {
-            background-color: #8fb767;
-            ion-icon,
-            ion-list-header,
-            .item,
-            .item-input ion-label {
-                color: white;
-            }
-        }
-    }
-    */
 }
diff --git a/src/app/pages/settings/settings.html b/src/app/pages/settings/settings.html
@@ -8,64 +8,71 @@
 
 <ion-content class="settings-page ion-padding">
   <h2>Search Filters</h2>
-  <p>Note: Filters will remove usable charging locations from your search results if we do not have complete data (i.e Operator or Power Levels).</p>
+  <p>Note: Filters will remove usable charging locations from your search results if we do not have complete data (i.e
+    Operator or Power Levels).</p>
   <p *ngIf="searchSettings.HasActiveFilters==true" danger>
-    <ion-icon name="alert"></ion-icon> One or more filters are currently being applied. <ion-button size="small" color="light" (click)="clearFilters()">
+    <ion-icon name="alert"></ion-icon> One or more filters are currently being applied. <ion-button size="small"
+      color="light" (click)="clearFilters()">
       <ion-icon slot="start" name="close"></ion-icon>
       <ion-label>Clear</ion-label>
     </ion-button>
   </p>
   <ion-list>
     <ion-item *ngIf="isCountryFilterFeatureEnabled">
 
-      <ion-select [label]="'ocm.search.countries' | translate" [(ngModel)]="searchSettings.FilterOptionsByCountryId" multiple="false" cancelText="Cancel" okText="OK" (ionChange)="onCountryChange()">
+      <ion-select [label]="'ocm.search.countries' | translate" [(ngModel)]="searchSettings.FilterOptionsByCountryId"
+        multiple="false" cancelText="Cancel" okText="OK" (ionChange)="onCountryChange()">
         <ion-select value="">(All Countries)</ion-select>
         <ion-select-option *ngFor="let item of countries" [value]="item.ID">{{item.Title}}</ion-select-option>
 
       </ion-select>
-    </ion-item >
-    <ion-item lines="none">
-      <ion-label>{{'ocm.search.networkOperators' | translate}}</ion-label>
-    </ion-item>
-    <ion-item>
-
-      <app-operator-lookup mode="multi" [operatorList]="searchSettings.OperatorList"  (operatorRemoved)="onOperatorRemoved($event)" (operatorChanged)="onOperatorSelected($event)" [useFilteredOperators]="false"></app-operator-lookup>
-
     </ion-item>
 
+    <app-operator-lookup mode="multi" [operatorList]="searchSettings.OperatorList"
+      (operatorRemoved)="onOperatorRemoved($event)" (operatorChanged)="onOperatorSelected($event)"
+      [useFilteredOperators]="false"></app-operator-lookup>
     <ion-item>
 
-      <ion-select [label]="'ocm.search.usageTypes' | translate" [(ngModel)]="searchSettings.UsageTypeList" multiple="true" cancelText="Cancel" okText="OK">
-        <ion-select-option *ngFor="let item of usageTypes" [value]="item.ID">{{'ocm.reference.usageType.value_'+item.ID | nullableTranslate:item}}</ion-select-option>
+      <ion-select [label]="'ocm.search.usageTypes' | translate" [(ngModel)]="searchSettings.UsageTypeList"
+        multiple="true" cancelText="Cancel" okText="OK">
+        <ion-select-option *ngFor="let item of usageTypes" [value]="item.ID">{{'ocm.reference.usageType.value_'+item.ID
+          | nullableTranslate:item}}</ion-select-option>
 
       </ion-select>
     </ion-item>
 
     <ion-item>
-      <ion-select [label]="'ocm.search.operationalStatusTypes' | translate" [(ngModel)]="searchSettings.StatusTypeList" multiple="true" cancelText="Cancel" okText="OK">
-        <ion-select-option *ngFor="let item of statusTypes" [value]="item.ID">{{'ocm.reference.statusType.value_'+item.ID | nullableTranslate:item }}</ion-select-option>
+      <ion-select [label]="'ocm.search.operationalStatusTypes' | translate" [(ngModel)]="searchSettings.StatusTypeList"
+        multiple="true" cancelText="Cancel" okText="OK">
+        <ion-select-option *ngFor="let item of statusTypes"
+          [value]="item.ID">{{'ocm.reference.statusType.value_'+item.ID | nullableTranslate:item }}</ion-select-option>
 
       </ion-select>
     </ion-item>
 
     <ion-item>
-      <ion-select [label]="'ocm.search.connectionTypes'| translate" [(ngModel)]="searchSettings.ConnectionTypeList" multiple="true" cancelText="Cancel" okText="OK">
-        <ion-select-option *ngFor="let item of connectionTypes" [value]="item.ID">{{'ocm.reference.connectionType.value_'+item.ID | nullableTranslate:item }}</ion-select-option>
+      <ion-select [label]="'ocm.search.connectionTypes'| translate" [(ngModel)]="searchSettings.ConnectionTypeList"
+        multiple="true" cancelText="Cancel" okText="OK">
+        <ion-select-option *ngFor="let item of connectionTypes"
+          [value]="item.ID">{{'ocm.reference.connectionType.value_'+item.ID | nullableTranslate:item
+          }}</ion-select-option>
       </ion-select>
     </ion-item>
 
     <ion-item lines="none">
 
-      <ion-range dualKnobs="true" min="0" max="650" pin="true" [(ngModel)]="powerRange">
+      <ion-range dualKnobs="true" min="0" max="650" pin="true" [(ngModel)]="powerRange" [ticks]="true" [snaps]="true" [min]="powerRange.lower" [max]="powerRange.upper">
         <ion-icon slot="start" size="small" name="flash">0</ion-icon>
         <ion-icon slot="end" name="flash"></ion-icon>
       </ion-range>
 
     </ion-item>
 
     <ion-item lines="none">
-      <ion-note slot="start" style="padding-top:0;">Min. Power (kW)<br><input type="number" [(ngModel)]="powerRange.lower" min="0" [max]="powerRange.upper" style="width: 3em;border:none;"></ion-note>
-      <ion-note slot="end" style="padding-top:0;">Max. Power (kW)<br><input type="number" [(ngModel)]="powerRange.upper" [max]="maxPower" [min]="powerRange.lower" style="width: 3em;border:none;"></ion-note>
+      <ion-note slot="start" style="padding-top:0;">Min. Power (kW)<br><input type="number"
+          [(ngModel)]="powerRange.lower" min="0" [max]="powerRange.upper" style="width: 3em;border:none;"></ion-note>
+      <ion-note slot="end" style="padding-top:0;">Max. Power (kW)<br><input type="number" [(ngModel)]="powerRange.upper"
+          [max]="maxPower" [min]="powerRange.lower" style="width: 3em;border:none;"></ion-note>
     </ion-item>
 
   </ion-list>
@@ -74,14 +81,16 @@ <h2>
   </h2>
 
   <ion-item>
-    <ion-select label="Language" [(ngModel)]="searchSettings.Language" (ionChange)="onLanguageChange()" multiple="false">
+    <ion-select label="Language" [(ngModel)]="searchSettings.Language" (ionChange)="onLanguageChange()"
+      multiple="false">
       <ion-select-option *ngFor="let item of languages" [value]="item.code">{{item.title}}</ion-select-option>
     </ion-select>
   </ion-item>
 
   <ion-item>
 
-    <ion-select [label]="'ocm.details.location.map'| translate" [(ngModel)]="searchSettings.MapType" (ionChange)="onMapTypeChange()" multiple="false" cancelText="Cancel" okText="OK">
+    <ion-select [label]="'ocm.details.location.map'| translate" [(ngModel)]="searchSettings.MapType"
+      (ionChange)="onMapTypeChange()" multiple="false" cancelText="Cancel" okText="OK">
       <ion-select-option value="ROADMAP">Road Map</ion-select-option>
       <ion-select-option value="SATELLITE">Satellite</ion-select-option>
     </ion-select>
@@ -91,11 +100,12 @@ <h2>
     <ion-toggle [(ngModel)]="searchSettings.EnableAdvancedEditorFeatures">Enable Advanced Editor Options</ion-toggle>
   </ion-item>
   <ion-item>
-    <ion-toggle [(ngModel)]="searchSettings.EnablePOIPendingApproval">Show New POIs Pending Approval</ion-toggle>
+    <ion-toggle [(ngModel)]="searchSettings.EnablePOIPendingApproval">Show POIs Pending Approval</ion-toggle>
   </ion-item>
 
   <ion-item>
-    <ion-input label="Max Results" type="number" placeholder="500" [(ngModel)]="searchSettings.MaxResults" min="100" max="10000"></ion-input>
+    <ion-input label="Max Results" type="number" placeholder="500" [(ngModel)]="searchSettings.MaxResults" min="100"
+      max="10000"></ion-input>
   </ion-item>
 
 </ion-content>