Skip to content
Snippets Groups Projects
Commit cc3d414c authored by Oleksandr Husak's avatar Oleksandr Husak
Browse files

basic components

parent 4009540b
Branches
No related tags found
No related merge requests found
Showing with 480 additions and 4 deletions
...@@ -34,6 +34,7 @@ ...@@ -34,6 +34,7 @@
"src/assets" "src/assets"
], ],
"styles": [ "styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss" "src/styles.scss"
], ],
"scripts": [] "scripts": []
...@@ -102,6 +103,7 @@ ...@@ -102,6 +103,7 @@
"src/assets" "src/assets"
], ],
"styles": [ "styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss" "src/styles.scss"
], ],
"scripts": [] "scripts": []
......
...@@ -9,13 +9,17 @@ ...@@ -9,13 +9,17 @@
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"@angular/animations": "~12.2.0", "@angular/animations": "~12.2.0",
"@angular/cdk": "^12.2.9",
"@angular/common": "~12.2.0", "@angular/common": "~12.2.0",
"@angular/compiler": "~12.2.0", "@angular/compiler": "~12.2.0",
"@angular/core": "~12.2.0", "@angular/core": "~12.2.0",
"@angular/forms": "~12.2.0", "@angular/forms": "~12.2.0",
"@angular/material": "^12.2.9",
"@angular/platform-browser": "~12.2.0", "@angular/platform-browser": "~12.2.0",
"@angular/platform-browser-dynamic": "~12.2.0", "@angular/platform-browser-dynamic": "~12.2.0",
"@angular/router": "~12.2.0", "@angular/router": "~12.2.0",
"@asymmetrik/ngx-leaflet": "^8.1.0",
"leaflet": "^1.7.1",
"rxjs": "~6.6.0", "rxjs": "~6.6.0",
"tslib": "^2.3.0", "tslib": "^2.3.0",
"zone.js": "~0.11.4" "zone.js": "~0.11.4"
...@@ -25,6 +29,7 @@ ...@@ -25,6 +29,7 @@
"@angular/cli": "~12.2.9", "@angular/cli": "~12.2.9",
"@angular/compiler-cli": "~12.2.0", "@angular/compiler-cli": "~12.2.0",
"@types/jasmine": "~3.8.0", "@types/jasmine": "~3.8.0",
"@types/leaflet": "^1.7.5",
"@types/node": "^12.11.1", "@types/node": "^12.11.1",
"jasmine-core": "~3.8.0", "jasmine-core": "~3.8.0",
"karma": "~6.3.0", "karma": "~6.3.0",
...@@ -289,6 +294,28 @@ ...@@ -289,6 +294,28 @@
"@angular/core": "12.2.9" "@angular/core": "12.2.9"
} }
}, },
"node_modules/@angular/cdk": {
"version": "12.2.9",
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-12.2.9.tgz",
"integrity": "sha512-9Wgj69iGAZ4teQqW/zPbVg2RGna+m9i3v0zkWGx/+Uo95rikJCUZBQM4bfeOe+bSJrS77jV5EisBWG7ayNUSzQ==",
"dependencies": {
"tslib": "^2.2.0"
},
"optionalDependencies": {
"parse5": "^5.0.0"
},
"peerDependencies": {
"@angular/common": "^12.0.0 || ^13.0.0-0",
"@angular/core": "^12.0.0 || ^13.0.0-0",
"rxjs": "^6.5.3 || ^7.0.0"
}
},
"node_modules/@angular/cdk/node_modules/parse5": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
"integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
"optional": true
},
"node_modules/@angular/cli": { "node_modules/@angular/cli": {
"version": "12.2.9", "version": "12.2.9",
"resolved": "https://registry.npmjs.org/@angular/cli/-/cli-12.2.9.tgz", "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-12.2.9.tgz",
...@@ -427,6 +454,22 @@ ...@@ -427,6 +454,22 @@
"rxjs": "^6.5.3 || ^7.0.0" "rxjs": "^6.5.3 || ^7.0.0"
} }
}, },
"node_modules/@angular/material": {
"version": "12.2.9",
"resolved": "https://registry.npmjs.org/@angular/material/-/material-12.2.9.tgz",
"integrity": "sha512-+eM67RF038S56m3wsj37h0PyyRD18cQ8V2zmKG1UezH0nnosbmCAwzH9BfcNiIB+/V+k5QMJ/JVu5MjDQqX37w==",
"dependencies": {
"tslib": "^2.2.0"
},
"peerDependencies": {
"@angular/animations": "^12.0.0 || ^13.0.0-0",
"@angular/cdk": "12.2.9",
"@angular/common": "^12.0.0 || ^13.0.0-0",
"@angular/core": "^12.0.0 || ^13.0.0-0",
"@angular/forms": "^12.0.0 || ^13.0.0-0",
"rxjs": "^6.5.3 || ^7.0.0"
}
},
"node_modules/@angular/platform-browser": { "node_modules/@angular/platform-browser": {
"version": "12.2.9", "version": "12.2.9",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-12.2.9.tgz", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-12.2.9.tgz",
...@@ -488,6 +531,17 @@ ...@@ -488,6 +531,17 @@
"integrity": "sha512-H71nDOOL8Y7kWRLqf6Sums+01Q5msqBW2KhDUTemh1tvY04eSkSXrK0uj/4mmY0Xr16/3zyZmsrxN7CKuRbNRg==", "integrity": "sha512-H71nDOOL8Y7kWRLqf6Sums+01Q5msqBW2KhDUTemh1tvY04eSkSXrK0uj/4mmY0Xr16/3zyZmsrxN7CKuRbNRg==",
"dev": true "dev": true
}, },
"node_modules/@asymmetrik/ngx-leaflet": {
"version": "8.1.0",
"resolved": "https://registry.npmjs.org/@asymmetrik/ngx-leaflet/-/ngx-leaflet-8.1.0.tgz",
"integrity": "sha512-lq7LduBP/vXcaSEmKnx7mzCR8WsoYqh9pB6BNnq53yeCwsqRbG3GdKye1/i8VvoRzjDsmQBPQsIFZ9uclXrtgg==",
"peerDependencies": {
"@angular/common": ">=10",
"@angular/core": ">=10",
"leaflet": "1",
"tslib": "2"
}
},
"node_modules/@babel/code-frame": { "node_modules/@babel/code-frame": {
"version": "7.15.8", "version": "7.15.8",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.15.8.tgz", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.15.8.tgz",
...@@ -2486,6 +2540,12 @@ ...@@ -2486,6 +2540,12 @@
"integrity": "sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==", "integrity": "sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==",
"dev": true "dev": true
}, },
"node_modules/@types/geojson": {
"version": "7946.0.8",
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.8.tgz",
"integrity": "sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA==",
"dev": true
},
"node_modules/@types/glob": { "node_modules/@types/glob": {
"version": "7.1.4", "version": "7.1.4",
"resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.4.tgz", "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.4.tgz",
...@@ -2508,6 +2568,15 @@ ...@@ -2508,6 +2568,15 @@
"integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==", "integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==",
"dev": true "dev": true
}, },
"node_modules/@types/leaflet": {
"version": "1.7.5",
"resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.7.5.tgz",
"integrity": "sha512-+Myo00Yb5OuvUyrH+vUwn9DRgOaBJsF/etIMdMcNhWGBMo58Mo1cxLInvCd0ZpvItju/AeDYFB/Od2pLiHB3VA==",
"dev": true,
"dependencies": {
"@types/geojson": "*"
}
},
"node_modules/@types/minimatch": { "node_modules/@types/minimatch": {
"version": "3.0.5", "version": "3.0.5",
"resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
...@@ -8326,6 +8395,11 @@ ...@@ -8326,6 +8395,11 @@
"node": ">= 8" "node": ">= 8"
} }
}, },
"node_modules/leaflet": {
"version": "1.7.1",
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
"integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw=="
},
"node_modules/less": { "node_modules/less": {
"version": "4.1.1", "version": "4.1.1",
"resolved": "https://registry.npmjs.org/less/-/less-4.1.1.tgz", "resolved": "https://registry.npmjs.org/less/-/less-4.1.1.tgz",
...@@ -16055,6 +16129,23 @@ ...@@ -16055,6 +16129,23 @@
"tslib": "^2.2.0" "tslib": "^2.2.0"
} }
}, },
"@angular/cdk": {
"version": "12.2.9",
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-12.2.9.tgz",
"integrity": "sha512-9Wgj69iGAZ4teQqW/zPbVg2RGna+m9i3v0zkWGx/+Uo95rikJCUZBQM4bfeOe+bSJrS77jV5EisBWG7ayNUSzQ==",
"requires": {
"parse5": "^5.0.0",
"tslib": "^2.2.0"
},
"dependencies": {
"parse5": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
"integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
"optional": true
}
}
},
"@angular/cli": { "@angular/cli": {
"version": "12.2.9", "version": "12.2.9",
"resolved": "https://registry.npmjs.org/@angular/cli/-/cli-12.2.9.tgz", "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-12.2.9.tgz",
...@@ -16144,6 +16235,14 @@ ...@@ -16144,6 +16235,14 @@
"tslib": "^2.2.0" "tslib": "^2.2.0"
} }
}, },
"@angular/material": {
"version": "12.2.9",
"resolved": "https://registry.npmjs.org/@angular/material/-/material-12.2.9.tgz",
"integrity": "sha512-+eM67RF038S56m3wsj37h0PyyRD18cQ8V2zmKG1UezH0nnosbmCAwzH9BfcNiIB+/V+k5QMJ/JVu5MjDQqX37w==",
"requires": {
"tslib": "^2.2.0"
}
},
"@angular/platform-browser": { "@angular/platform-browser": {
"version": "12.2.9", "version": "12.2.9",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-12.2.9.tgz", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-12.2.9.tgz",
...@@ -16174,6 +16273,12 @@ ...@@ -16174,6 +16273,12 @@
"integrity": "sha512-H71nDOOL8Y7kWRLqf6Sums+01Q5msqBW2KhDUTemh1tvY04eSkSXrK0uj/4mmY0Xr16/3zyZmsrxN7CKuRbNRg==", "integrity": "sha512-H71nDOOL8Y7kWRLqf6Sums+01Q5msqBW2KhDUTemh1tvY04eSkSXrK0uj/4mmY0Xr16/3zyZmsrxN7CKuRbNRg==",
"dev": true "dev": true
}, },
"@asymmetrik/ngx-leaflet": {
"version": "8.1.0",
"resolved": "https://registry.npmjs.org/@asymmetrik/ngx-leaflet/-/ngx-leaflet-8.1.0.tgz",
"integrity": "sha512-lq7LduBP/vXcaSEmKnx7mzCR8WsoYqh9pB6BNnq53yeCwsqRbG3GdKye1/i8VvoRzjDsmQBPQsIFZ9uclXrtgg==",
"requires": {}
},
"@babel/code-frame": { "@babel/code-frame": {
"version": "7.15.8", "version": "7.15.8",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.15.8.tgz", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.15.8.tgz",
...@@ -17625,6 +17730,12 @@ ...@@ -17625,6 +17730,12 @@
"integrity": "sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==", "integrity": "sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==",
"dev": true "dev": true
}, },
"@types/geojson": {
"version": "7946.0.8",
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.8.tgz",
"integrity": "sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA==",
"dev": true
},
"@types/glob": { "@types/glob": {
"version": "7.1.4", "version": "7.1.4",
"resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.4.tgz", "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.4.tgz",
...@@ -17647,6 +17758,15 @@ ...@@ -17647,6 +17758,15 @@
"integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==", "integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==",
"dev": true "dev": true
}, },
"@types/leaflet": {
"version": "1.7.5",
"resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.7.5.tgz",
"integrity": "sha512-+Myo00Yb5OuvUyrH+vUwn9DRgOaBJsF/etIMdMcNhWGBMo58Mo1cxLInvCd0ZpvItju/AeDYFB/Od2pLiHB3VA==",
"dev": true,
"requires": {
"@types/geojson": "*"
}
},
"@types/minimatch": { "@types/minimatch": {
"version": "3.0.5", "version": "3.0.5",
"resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
...@@ -22188,6 +22308,11 @@ ...@@ -22188,6 +22308,11 @@
"integrity": "sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==", "integrity": "sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==",
"dev": true "dev": true
}, },
"leaflet": {
"version": "1.7.1",
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
"integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw=="
},
"less": { "less": {
"version": "4.1.1", "version": "4.1.1",
"resolved": "https://registry.npmjs.org/less/-/less-4.1.1.tgz", "resolved": "https://registry.npmjs.org/less/-/less-4.1.1.tgz",
<div class="wrapper">
<h1>Consumer</h1>
</div>
<app-map class="wrapper"></app-map>
<router-outlet></router-outlet> <router-outlet></router-outlet>
@import './src/variables.scss';
.wrapper {
padding: 0 calc((100% - #{$break-large})/2);
}
\ No newline at end of file
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module'; // --- Map
import { LeafletModule } from '@asymmetrik/ngx-leaflet';
// --- WS
// import * as SockJS from 'sockjs-client';
// --- Modules
import { SharedModule } from './shared/shared.module';
import { CoreModule } from './core/core.module';
// --- Services
import { ApiService } from "./core/api.service";
// import { StompService, StompConfig } from '@stomp/ng2-stompjs';
import { environment } from './../environments/environment';
// --- Components
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { MapComponent } from './components/map/map.component';
import { AppRoutingModule } from './app-routing.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({ @NgModule({
declarations: [ declarations: [
AppComponent AppComponent,
MapComponent
], ],
imports: [ imports: [
BrowserModule, BrowserModule,
AppRoutingModule AppRoutingModule,
SharedModule,
CoreModule,
LeafletModule,
BrowserAnimationsModule
], ],
providers: [], providers: [ApiService],
bootstrap: [AppComponent] bootstrap: [AppComponent]
}) })
export class AppModule { } export class AppModule { }
<div style="height: 80vh;"
leaflet
[leafletOptions]="options"
(leafletMapReady)="onMapReady($event)">
</div>
\ No newline at end of file
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MapComponent } from './map.component';
describe('MapComponent', () => {
let component: MapComponent;
let fixture: ComponentFixture<MapComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ MapComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MapComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { NONE_TYPE } from '@angular/compiler';
import { Component, OnInit } from '@angular/core';
import * as L from "leaflet";
class Location {
id: string;
type = 'position';
lat: Float32Array;
lng: Float32Array;
constructor(obj: any, id: any) {
this.id = id
this.lat = obj.lat
this.lng = obj.lng
}
}
class Measurements {
id: string
type = 'measurements'
data: number[];
constructor(dist: any, id: any) {
this.id = id
this.data = dist
}
}
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit {
_stompService: any;
map: L.Map;
constructor() {
this.map = L.map('map', {
center: [51.505, -0.09],
zoom: 13
});
}
ngOnInit(): void {
// wait on new Location
this._stompService.watch('/topic/locations').subscribe((message: any) => {
let payload = JSON.parse(message.body);
this.addNewMarker(payload)
});
// wait on new measurements
this._stompService.watch('/topic/positions').subscribe((message: any) => {
let payload = JSON.parse(message.body);
console.log('positions', payload)
this.addPosition(payload)
});
}
addPosition(point: any) {
let marker = L.marker(point.position, {
icon: L.icon({
iconSize: [25, 41],
iconAnchor: [13, 41],
iconUrl: 'assets/marker-icon-red.png',
iconRetinaUrl: 'assets/marker-icon-2x-red.png',
shadowUrl: 'assets/marker-shadow.png'
})
}).bindPopup(point.id).openPopup();
marker.addTo(this.map);
}
// --- Controllers
// @https://asymmetrik.com/ngx-leaflet-tutorial-angular-cli/
// --- Layers: Define base layers so we can reference them multiple times
streetMaps = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
detectRetina: true,
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});
wMaps = L.tileLayer('http://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png', {
detectRetina: true,
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});
satelliteMaps = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
id: 'mapbox.streets',
attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
});
options = {
layers: [this.streetMaps],
zoom: 15,
center: L.latLng([51.037845, 13.762852])
};
onMapReady(map: L.Map) {
this.map = map
// Layers control object with our two base layers and the three overlay layers
let baseLayers = {
'Street Maps': this.streetMaps,
'Wikimedia Maps': this.wMaps,
'Satellite': this.satelliteMaps
}
L.control.layers(baseLayers).addTo(this.map);
}
addNewMarker(obj: any) {
let marker = L.marker([obj.lat, obj.lng], {
icon: L.icon({
iconSize: [25, 41],
iconAnchor: [13, 41],
iconUrl: 'assets/marker-icon-grey.png',
iconRetinaUrl: 'assets/marker-icon-2x-grey.png',
shadowUrl: 'assets/marker-shadow.png'
})
}).bindPopup(obj.id).openPopup();
marker.addTo(this.map);
}
}
import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
import {TestBed} from '@angular/core/testing';
import {ApiService} from './api.service';
describe('ApiService', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [HttpClientTestingModule],
providers: [ApiService]
});
});
afterEach(() => {
const httpMock = TestBed.get(HttpTestingController);
httpMock.verify();
});
it('should be created', () => {
const service: ApiService = TestBed.get(ApiService);
expect(service).toBeTruthy();
});
});
import {HttpClient} from '@angular/common/http';
import {Injectable} from '@angular/core';
import {Observable, throwError} from 'rxjs';
import {catchError} from 'rxjs/operators';
export interface ApiError {
code: string;
message: string;
}
@Injectable({
providedIn: 'root'
})
export class ApiService {
private locationsUrl: string;
constructor(private httpClient: HttpClient) {
this.locationsUrl = 'http://localhost:8080/locations';
}
getXml(url: string): Observable<string> {
return this.httpClient
.get(url, {responseType: 'text'})
.pipe(catchError(this._handleError));
}
public findAll(): Observable<string[]> {
return this.httpClient.get<string[]>(this.locationsUrl);
}
public save(loc: string) {
return this.httpClient.post<string>(this.locationsUrl, loc);
}
private _handleError(error: ApiError) {
return throwError(error.message || 'Could not complete your request; please try again later.');
}
}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
@NgModule({
declarations: [],
imports: [
CommonModule
]
})
export class CoreModule { }
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// --- @angular/flex-layout : Layout for Angular applications; using Flexbox and a Responsive API
// import { FlexLayoutModule } from '@angular/flex-layout';
// --- Forms
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
// --- material.angular.io : Material Design components for Angular
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatMenuModule } from '@angular/material/menu';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatDialogModule } from '@angular/material/dialog';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatSelectModule } from '@angular/material/select';
import { MatCardModule } from '@angular/material/card';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatTooltipModule } from '@angular/material/tooltip';
// Animation
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [],
imports: [
FormsModule,
ReactiveFormsModule,
CommonModule,
MatButtonModule,
MatIconModule,
MatInputModule,
MatMenuModule,
MatTabsModule,
MatToolbarModule,
BrowserAnimationsModule,
MatFormFieldModule,
MatDialogModule,
MatSnackBarModule,
MatSelectModule,
MatCardModule,
MatExpansionModule,
MatSidenavModule,
MatTooltipModule
],
exports: [
FormsModule,
ReactiveFormsModule,
CommonModule,
MatButtonModule,
MatIconModule,
MatInputModule,
MatMenuModule,
MatTabsModule,
MatToolbarModule,
BrowserAnimationsModule,
MatFormFieldModule,
MatDialogModule,
MatSnackBarModule,
MatSelectModule,
MatCardModule,
MatExpansionModule,
MatSidenavModule,
MatTooltipModule
]
})
export class SharedModule { }
...@@ -6,6 +6,9 @@ ...@@ -6,6 +6,9 @@
<base href="/"> <base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head> </head>
<body> <body>
<app-root></app-root> <app-root></app-root>
......
...@@ -15,3 +15,6 @@ app-root { ...@@ -15,3 +15,6 @@ app-root {
flex-wrap: nowrap; flex-wrap: nowrap;
min-height: 100vh; min-height: 100vh;
} }
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment