kolzchut/srm#409 - results, data

projects/srm/src/app/api.service.ts

@@ -4,7 +4,7 @@ import { catchError, delay, finalize, map, switchMap, tap } from 'rxjs/operators
 
 import { environment } from '../environments/environment';
 import { HttpClient } from '@angular/common/http';
-import { Card, QueryPresetResult, Preset, AutoComplete, QueryAutoCompleteResult, QueryCardResult, CARD_SNIPPET_FIELDS, TaxonomyItem, SearchParams, DistinctItem, QueryTaxonomyItemResult, SITUATION_FILTERS } from './consts';
+import { Card, QueryPresetResult, Preset, AutoComplete, QueryAutoCompleteResult, QueryCardResult, CARD_SNIPPET_FIELDS, TaxonomyItem, SearchParams, DistinctItem, QueryTaxonomyItemResult, SITUATION_FILTERS, Place, QueryPlaceResult } from './consts';
 import { makeStateKey, TransferState} from '@angular/platform-browser';
 import { PlatformService } from './platform.service';
 import * as memoryCache from 'memory-cache';
@@ -647,5 +647,25 @@ export class ApiService {
       ), true
     );
   }
+
+  getPlaces(query: string): Observable<Place[]> {
+    const params: any = {
+      size: 50,
+      offset: 0,
+      q: query,
+      highlight: 'query',
+    };
+    return this.http.get(environment.placesURL, {params}).pipe(
+      map((res: any) => {
+        const qpr = res as QueryPlaceResult;
+        const results = qpr.search_results;
+        const ret = results.map((r: any) => {
+          return r.source;
+        });
+        return ret;
+      })
+    );
+  }
+
 }
 

projects/srm/src/app/app.module.ts

@@ -61,6 +61,11 @@ import { ResponseLinkyComponent } from './response-linky/response-linky.componen
 import { SearchBarComponent } from './search/search-bar/search-bar.component';
 import { AutocompleteResultsComponent } from './search/autocomplete-results/autocomplete-results.component';
 import { AreaSearchSelectorComponent } from './area-search-selector/area-search-selector.component';
+import { AreaSearchSelectorResultsComponent } from './area-search-selector-results/area-search-selector-results.component';
+import { AreaSearchSelectorResultComponent } from './area-search-selector-result/area-search-selector-result.component';
+import { AreaSearchSelectorResultPlaceComponent } from './area-search-selector-result-place/area-search-selector-result-place.component';
+import { AreaSearchSelectorResultNationWideComponent } from './area-search-selector-result-nation-wide/area-search-selector-result-nation-wide.component';
+import { AreaSearchSelectorResultMyLocationComponent } from './area-search-selector-result-my-location/area-search-selector-result-my-location.component';
 
 @NgModule({
   declarations: [
@@ -118,6 +123,11 @@ import { AreaSearchSelectorComponent } from './area-search-selector/area-search-
     SearchBarComponent,
     AutocompleteResultsComponent,
     AreaSearchSelectorComponent,
+    AreaSearchSelectorResultsComponent,
+    AreaSearchSelectorResultComponent,
+    AreaSearchSelectorResultPlaceComponent,
+    AreaSearchSelectorResultNationWideComponent,
+    AreaSearchSelectorResultMyLocationComponent,
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'serverApp' }),

projects/srm/src/app/area-search-selector-result-my-location/area-search-selector-result-my-location.component.html

@@ -0,0 +1 @@
+<app-area-search-selector-result icon='my-location' display='המיקום שלי' name='המיקום שלי' [state]='state'></app-area-search-selector-result>

projects/srm/src/app/area-search-selector-result-my-location/area-search-selector-result-my-location.component.ts

@@ -0,0 +1,18 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { AreaSearchState } from '../area-search-selector/area-search-selector.component';
+
+@Component({
+  selector: 'app-area-search-selector-result-my-location',
+  templateUrl: './area-search-selector-result-my-location.component.html',
+  styleUrls: ['./area-search-selector-result-my-location.component.less']
+})
+export class AreaSearchSelectorResultMyLocationComponent implements OnInit {
+
+  @Input() state: AreaSearchState;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

projects/srm/src/app/area-search-selector-result-nation-wide/area-search-selector-result-nation-wide.component.html

@@ -0,0 +1 @@
+<app-area-search-selector-result icon='nation-wide' display='בכל הארץ' name='בכל הארץ' [state]='state'></app-area-search-selector-result>

projects/srm/src/app/area-search-selector-result-nation-wide/area-search-selector-result-nation-wide.component.ts

@@ -0,0 +1,18 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { AreaSearchState } from '../area-search-selector/area-search-selector.component';
+
+@Component({
+  selector: 'app-area-search-selector-result-nation-wide',
+  templateUrl: './area-search-selector-result-nation-wide.component.html',
+  styleUrls: ['./area-search-selector-result-nation-wide.component.less']
+})
+export class AreaSearchSelectorResultNationWideComponent implements OnInit {
+
+  @Input() state: AreaSearchState;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

projects/srm/src/app/area-search-selector-result-place/area-search-selector-result-place.component.html

@@ -0,0 +1 @@
+<app-area-search-selector-result icon='place' [display]='place.display' [name]='place.name' [state]='state'></app-area-search-selector-result>

projects/srm/src/app/area-search-selector-result-place/area-search-selector-result-place.component.ts

@@ -0,0 +1,26 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { LngLatBoundsLike } from 'mapbox-gl';
+import { AreaSearchState } from '../area-search-selector/area-search-selector.component';
+
+export type PlaceResult = {
+  name: string;
+  display: string;
+  bounds: LngLatBoundsLike;
+};
+
+@Component({
+  selector: 'app-area-search-selector-result-place',
+  templateUrl: './area-search-selector-result-place.component.html',
+  styleUrls: ['./area-search-selector-result-place.component.less']
+})
+export class AreaSearchSelectorResultPlaceComponent implements OnInit {
+
+  @Input() place: PlaceResult;
+  @Input() state: AreaSearchState;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

projects/srm/src/app/area-search-selector-result/area-search-selector-result.component.html

@@ -0,0 +1,6 @@
+<div class='result'>
+    <div [class]='"icon " + icon'></div>
+    <a class='title focusable' [innerHTML]='display' clickOnReturn [attr.aria-label]='name + " - מיקוד המפה לשם"'
+        (focus)='state.focusResults()' (blur)='state.blurResults()'
+    ></a>
+</div>

projects/srm/src/app/area-search-selector-result/area-search-selector-result.component.less

@@ -0,0 +1,54 @@
+@import '../../common.less';
+
+.result {
+    width: 100%;
+    height: 56px;
+    padding: 0 12px;
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    gap: 12px;
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.10);
+    background-color: @color-white;
+
+    .icon {
+        width: 32px;
+        height: 32px;
+        .background-image;
+        background-size: 32px;
+        &.place {
+            background-image: url('../../assets/img/icon-place.svg');
+        }
+        &.nation-wide {
+            background-image: url('../../assets/img/icon-nation-wide.svg');
+        }
+        &.my-location {
+            background-image: url('../../assets/img/icon-my-location.svg');
+        }
+    }
+
+    a, a:visited, a:hover {
+        flex: 1 1 auto;
+        white-space: nowrap;
+        color: @color-blue-1;
+        .font-rag-sans;
+        font-size: 20px;
+        font-weight: 400;
+        line-height: 20px;
+        text-decoration: none;
+
+        ::ng-deep {
+            .highlight {
+                font-weight: 600;
+                em {
+                    font-weight: 300;
+                }
+            }
+        }
+    }
+
+    &:hover {
+        background-color: @color-gray-7;
+        cursor: pointer;
+    }
+}

projects/srm/src/app/area-search-selector-result/area-search-selector-result.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { AreaSearchState } from '../area-search-selector/area-search-selector.component';
+
+@Component({
+  selector: 'app-area-search-selector-result',
+  templateUrl: './area-search-selector-result.component.html',
+  styleUrls: ['./area-search-selector-result.component.less']
+})
+export class AreaSearchSelectorResultComponent implements OnInit {
+
+  @Input() icon: string;
+  @Input() name: string;
+  @Input() display: string;
+  @Input() bounds: number[][];
+  @Input() state: AreaSearchState;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

projects/srm/src/app/area-search-selector-results/area-search-selector-results.component.html

@@ -0,0 +1,12 @@
+<div class='results' [style.width]='(state.resultsWidth | async) + "px"' *ngIf='state.showResults | async'
+    (focus)='state.focusResults()' (blur)='state.blurResults()'
+>
+    <ng-container *ngIf='(state.results | async) === null'>
+        <app-area-search-selector-result-my-location [state]='state'></app-area-search-selector-result-my-location>
+        <app-area-search-selector-result-nation-wide [state]='state'></app-area-search-selector-result-nation-wide>
+        <app-area-search-selector-result-place [place]='place' [state]='state' *ngFor='let place of presets'></app-area-search-selector-result-place>
+    </ng-container>
+    <ng-container *ngIf='(state.results | async) !== null'>
+        <app-area-search-selector-result-place [place]='place' [state]='state' *ngFor='let place of (state.results | async)'></app-area-search-selector-result-place>
+    </ng-container>
+</div>

projects/srm/src/app/area-search-selector-results/area-search-selector-results.component.less

@@ -0,0 +1,11 @@
+@import '../../common.less';
+
+.results {
+    display: flex;
+    flex-flow: column;
+    background: @color-white;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px 12px 12px 0px rgba(0, 0, 0, 0.12), 0px 24px 24px 0px rgba(0, 0, 0, 0.06);
+    max-height: calc(56px * 6);
+    .no-scrollbars;
+    overflow-y: scroll;
+}

projects/srm/src/app/area-search-selector-results/area-search-selector-results.component.ts

@@ -0,0 +1,29 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { PlaceResult } from '../area-search-selector-result-place/area-search-selector-result-place.component';
+import { Subject } from 'rxjs';
+import { AreaSearchState } from '../area-search-selector/area-search-selector.component';
+
+
+
+@Component({
+  selector: 'app-area-search-selector-results',
+  templateUrl: './area-search-selector-results.component.html',
+  styleUrls: ['./area-search-selector-results.component.less']
+})
+export class AreaSearchSelectorResultsComponent implements OnInit {
+
+  @Input() state: AreaSearchState;
+
+  presets: PlaceResult[] = [
+    {name: 'גוש דן', display: 'גוש דן', bounds: [[34.6, 31.8],[35.1, 32.181]]},
+    {name: 'איזור ירושלים', display: 'איזור ירושלים', bounds: [[34.9, 31.7], [35.3, 31.9]]},
+    {name: 'איזור הצפון', display: 'איזור הצפון', bounds: [[34.5, 32.5], [35.8, 33.3]]},
+    {name: 'איזור באר-שבע', display: 'איזור באר-שבע', bounds: [[34.5, 30.8], [35.5, 31.5]]},
+  ];
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+  }
+}

projects/srm/src/app/area-search-selector/area-search-selector.component.html

@@ -1,5 +1,6 @@
 <div class='container'>
     <div class='selector'
+        [class.hide]='!(state.selectorVisible | async)'
         [style.width]='selectorWidth + "px"'
         [style.right]='selectorRight + "px"'
     ></div>
@@ -13,8 +14,11 @@
             [class.active]='isActive(true)'
             (activated)='selectNationWide()'
     >בכל הארץ</button>
-    <input class='area' #area
-           (focus)='startSearching()'
-           (blur)='stopSearching()'
+    <input class='area focusable' #area
+           [placeholder]='inputPlaceholder'
+           aria-label='חיפוש איזורים בארץ'
+           (focus)='state.focusInput()'
+           (blur)='state.blurInput()'
+           [(ngModel)]='state.area_'
     />
 </div>

projects/srm/src/app/area-search-selector/area-search-selector.component.less

@@ -24,12 +24,16 @@
             top: 0;
             border: 1px solid black;
             background: transparent;
-            transition-property: right;
+            transition-property: right opacity;
             transition-duration: 0.3s;
             transition-timing-function: ease-in-out;
             border-radius: 20px;
             border: 1px solid @color-blue-6;
             background: @color-blue-7;
+            opacity: 1;
+            &.hide {
+                opacity: 0;
+            }
         }
 
         button {
@@ -81,7 +85,51 @@
         input {
             flex: 1 1 auto;
             width: 100%;
+            height: 40px;
             z-index: 1;
+            background: none;
+            border: none;
+            padding: 0;
+            padding-left: 16px;
+            padding-right: 40px;
+            border-radius: 24px;
+            color: @color-blue-1;
+            .font-rag-sans;
+            font-size: 16px;
+            font-weight: 400;
+            line-height: 20px;
+
+            .background-image;
+            background-size: 24px;
+            background-position: right 12px center;
+            background-image: url(../../assets/img/icon-search-blue-6.svg);
+
+            &::placeholder {
+                color: @color-blue-2;
+                .font-rag-sans;
+                font-size: 16px;
+                font-weight: 400;
+                line-height: 20px;
+            }
+            &:focus {
+                outline: none;
+                border: 1px solid @color-blue-5;
+                background: @color-white;
+                box-shadow: 0px 4px 4px 0px rgba(24, 94, 235, 0.10) inset;
+                .background-image;
+                background-size: 24px;
+                background-position: right 12px center;
+                background-image: url(../../assets/img/icon-search-blue-6.svg);
+                background-image: url(../../assets/img/icon-search-blue-1.svg);
+                &::placeholder {
+                    color: @color-blue-1;
+                    .font-rag-sans;
+                    font-size: 16px;
+                    font-weight: 300;
+                    line-height: 20px;
+                }    
+            }
+
         }
     }
 }