feat: map integration (#1563)

closes #139

Co-authored-by: Sebastian <[email protected]>

angular.json

@@ -23,12 +23,18 @@
             "assets": [
               "src/assets",
               "src/favicon.ico",
-              "src/manifest.json"
+              "src/manifest.json",
+              {
+                "glob": "**/*",
+                "input": "node_modules/leaflet/dist/images/",
+                "output": "./assets"
+              }
             ],
             "styles": [
               "src/styles/styles.scss",
               "src/styles/themes/ndb-theme.scss",
-              "node_modules/flag-icons/css/flag-icons.min.css"
+              "node_modules/flag-icons/css/flag-icons.min.css",
+              "node_modules/leaflet/dist/leaflet.css"
             ],
             "vendorChunk": true,
             "extractLicenses": false,

build/Dockerfile

@@ -68,6 +68,8 @@ COPY --from=builder /app/dist/ /usr/share/nginx/html
 ENV PORT=80
 # The url to the CouchDB database
 ENV COUCHDB_URL="http://localhost"
+# The url to a nominatim instance, see https://nominatim.org/
+ENV NOMINATIM_URL="https://nominatim.openstreetmap.org"
 # variables are inserted into the nginx config
-CMD envsubst '$$PORT $$COUCHDB_URL' < /etc/nginx/templates/default.conf > /etc/nginx/conf.d/default.conf &&\
+CMD envsubst '$$PORT $$COUCHDB_URL $$NOMINATIM_URL' < /etc/nginx/templates/default.conf > /etc/nginx/conf.d/default.conf &&\
     nginx -g 'daemon off;'

build/default.conf

@@ -42,5 +42,15 @@ server {
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header X-Forwarded-Ssl on;
     }
+
+    location ^~ /nominatim {
+        rewrite /nominatim/(.*) /$1 break;
+        proxy_pass ${NOMINATIM_URL};
+        proxy_redirect off;
+        proxy_buffering off;
+        proxy_set_header Host $host;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Ssl on;
+    }
 }
 

e2e/integration/MarkingChildAsDropout.cy.ts

@@ -11,19 +11,21 @@ describe("Scenario: Marking a child as dropout - E2E test", function () {
     cy.contains("Dropout").click();
     cy.get("#mat-tab-label-0-7").click();
     // click on button with the content "Edit" in Dropout menu.
-    cy.contains("span", "Edit").should("be.visible").click();
+    cy.get(".form-buttons-wrapper:visible").contains("button", "Edit").click();
     // select today as the dropout date (which is initially marked as active)
-    cy.get(".mat-datepicker-toggle-default-icon").click();
-    cy.get(".mat-calendar-body-active").click();
+    cy.get(".mat-datepicker-toggle-default-icon:visible").click();
+    cy.get(".mat-calendar-body-active:visible").click();
     // click on button with the content "Save"
-    cy.contains("span", "Save").should("be.visible").click();
+    cy.get(".form-buttons-wrapper:visible").contains("button", "Save").click();
   });
 
   it("THEN I should not see this child in the list of all children at first", function () {
     // click on "Children" menu in navigation
     cy.get('[ng-reflect-angulartics-label="Children"]').click();
     // type to the input "Filter" the name of child
-    cy.get('[data-placeholder="e.g. name, age"]').type(this.childName);
+    cy.get('[data-placeholder="e.g. name, age"]').type(this.childName, {
+      force: true,
+    });
     // find at this table the name of child and it should not exist
     cy.get("table").contains(this.childName.trim()).should("not.exist");
   });

package.json

@@ -49,6 +49,7 @@
     "hammerjs": "^2.0.8",
     "json-query": "^2.2.2",
     "keycloak-js": "^20.0.1",
+    "leaflet": "^1.9.3",
     "lodash-es": "^4.17.21",
     "md5": "^2.3.0",
     "moment": "^2.29.4",
@@ -92,6 +93,7 @@
     "@types/hammerjs": "^2.0.41",
     "@types/jasmine": "~4.3.1",
     "@types/json-query": "^2.2.3",
+    "@types/leaflet": "^1.9.0",
     "@types/lodash-es": "^4.17.6",
     "@types/md5": "^2.3.2",
     "@types/node": "^16.0.0",

proxy.conf.json

@@ -7,5 +7,13 @@
     "pathRewrite": {
       "/db": ""
     }
+  },
+  "/nominatim": {
+    "target": "https://nominatim.openstreetmap.org",
+    "secure": true,
+    "changeOrigin": true,
+    "pathRewrite": {
+      "/nominatim": ""
+    }
   }
 }

src/app/app.module.ts

@@ -89,6 +89,7 @@ import {
 } from "./core/language/date-adapter-with-formatting";
 import { FileModule } from "./features/file/file.module";
 import { ConfigSetupModule } from "./core/config-setup/config-setup.module";
+import { LocationModule } from "./features/location/location.module";
 import { MatchingEntitiesModule } from "./features/matching-entities/matching-entities.module";
 
 /**
@@ -167,6 +168,7 @@ import { MatchingEntitiesModule } from "./features/matching-entities/matching-en
     HistoricalDataModule,
     SupportModule,
     DatabaseModule,
+    LocationModule,
     MatchingEntitiesModule,
   ],
   providers: [

src/app/child-dev-project/children/demo-data-generators/demo-child-generator.service.ts

@@ -48,6 +48,8 @@ export class DemoChildGenerator extends DemoDataGenerator<Child> {
 
     child.admissionDate = faker.date.past(calculateAge(child.dateOfBirth) - 4);
 
+    child["address"] = faker.geoAddress();
+
     if (faker.datatype.number(100) > 90) {
       DemoChildGenerator.makeChildDropout(child);
     }

src/app/child-dev-project/schools/demo-school-generator.service.ts

@@ -48,7 +48,6 @@ export class DemoSchoolGenerator extends DemoDataGenerator<School> {
         schoolNameWithType,
         schoolNameWithLanguage,
       ]);
-      school["address"] = faker.address.streetAddress();
       school["phone"] = faker.phone.number();
       school["privateSchool"] = faker.datatype.boolean();
       school["timing"] = faker.helpers.arrayElement([
@@ -57,6 +56,8 @@ export class DemoSchoolGenerator extends DemoDataGenerator<School> {
         $localize`:School demo timing:6:30-11:00 and 11:30-16:00`,
       ]);
 
+      school["address"] = faker.geoAddress();
+
       data.push(school);
     }
     return data;

src/app/core/config/config-fix.ts

@@ -674,16 +674,18 @@ export const defaultJsonConfig = {
                   ["name", "name"],
                   ["motherTongue", "language"],
                   ["address", "address"],
+                  [undefined, "distance"]
                 ],
                 rightSide: {
                   entityType: School.ENTITY_TYPE,
                   filters: [{ "id": "language" }]
                 },
+                showMap: ["address", "address"],
                 onMatch: {
                   newEntityType: ChildSchoolRelation.ENTITY_TYPE,
                   newEntityMatchPropertyLeft: "childId",
                   newEntityMatchPropertyRight: "schoolId",
-                  columnsToReview: ["start", "schoolClass", "childId", "schoolId" ]
+                  columnsToReview: ["start", "schoolClass", "childId", "schoolId"]
                 }
               }
             }
@@ -962,7 +964,7 @@ export const defaultJsonConfig = {
       {
         "name": "address",
         "schema": {
-          dataType: "string",
+          dataType: "location",
           label: $localize`:Label for the address of a child:Address`
         }
       },
@@ -1030,7 +1032,7 @@ export const defaultJsonConfig = {
       {
         "name": "address",
         "schema": {
-          dataType: "string",
+          dataType: "location",
           label: $localize`:Label for the address of a school:Address`
         }
       },
@@ -1124,19 +1126,20 @@ export const defaultJsonConfig = {
         ["name", "name"],
         ["motherTongue", "language"],
         ["address", "address"],
-        [null, "privateSchool"],
+        ["distance", "privateSchool"],
       ],
       rightSide: {
         entityType: School.ENTITY_TYPE,
         prefilter: { "privateSchool": true },
         filters: [{ "id": "language" }],
       },
       leftSide: { entityType: Child.ENTITY_TYPE },
+      showMap: ["address", "address"],
       onMatch: {
         newEntityType: ChildSchoolRelation.ENTITY_TYPE,
         newEntityMatchPropertyLeft: "childId",
         newEntityMatchPropertyRight: "schoolId",
-        columnsToReview: ["start", "end", "result", "childId", "schoolId" ]
+        columnsToReview: ["start", "end", "result", "childId", "schoolId"]
       }
     }
   }

src/app/core/demo-data/faker.ts

@@ -1,4 +1,5 @@
 import { faker as originalFaker } from "@faker-js/faker/locale/en_IND";
+import { GeoResult } from "../../features/location/geo.service";
 /**
  * Extension of faker.js implementing additional data generation methods.
  */
@@ -43,6 +44,17 @@ class CustomFaker {
       return date;
     }
   }
+
+  geoAddress(): GeoResult {
+    const coordinates = faker.address.nearbyGPSCoordinate([
+      52.4790412, 13.4319106,
+    ]);
+    return {
+      lat: Number.parseFloat(coordinates[0]),
+      lon: Number.parseFloat(coordinates[1]),
+      display_name: faker.address.streetAddress(true),
+    } as GeoResult;
+  }
 }
 
 /**

src/app/core/entity-components/entity-details/entity-details.component.html

@@ -57,34 +57,37 @@
   </button>
 </mat-menu>
 
-<mat-tab-group (selectedIndexChange)="trackTabChanged($event)" appTabStateMemo>
+<mat-tab-group (selectedIndexChange)="trackTabChanged($event)" appTabStateMemo [preserveContent]="true" #tabGroup>
   <mat-tab
     *ngFor="let panelConfig of panels; let i = index"
     [disabled]="creatingNew"
   >
     <ng-template mat-tab-label>
-      <span
-        [matTooltipDisabled]="!creatingNew"
-        matTooltip="Save the new record to create it before accessing other details"
-        i18n-matTooltip="
-          Tooltip explaining disabled sections when creating new entity
-        "
-      >
-        {{ panelConfig.title }}
-      </span>
+    <span
+      [matTooltipDisabled]="!creatingNew"
+      matTooltip="Save the new record to create it before accessing other details"
+      i18n-matTooltip="
+        Tooltip explaining disabled sections when creating new entity
+      "
+    >
+      {{ panelConfig.title }}
+    </span>
     </ng-template>
+
+    <ng-template matTabContent>
+      <div *ngIf="isLoading" class="process-spinner">
+        <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+      </div>
 
-    <div *ngIf="isLoading" class="process-spinner">
-      <mat-progress-bar mode="indeterminate"></mat-progress-bar>
-    </div>
+      <div *ngFor="let componentConfig of panelConfig.components; let j = index" class="padding-top-large">
+        <h3 *ngIf="componentConfig.title && componentConfig.title !== ''">
+          {{ componentConfig.title }}
+        </h3>
+        <ng-template [appDynamicComponent]="componentConfig"></ng-template>
+        <br *ngIf="j < panelConfig.components.length - 1"/>
+      </div>
+    </ng-template>
 
-    <div *ngFor="let componentConfig of panelConfig.components; let j = index" class="padding-top-large">
-      <h3 *ngIf="componentConfig.title && componentConfig.title !== ''">
-        {{ componentConfig.title }}
-      </h3>
-      <ng-template [appDynamicComponent]="componentConfig"></ng-template>
-      <br *ngIf="j < panelConfig.components.length - 1" />
-    </div>
   </mat-tab>
 </mat-tab-group>