trungnd
/
iot-web-ui
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 3 Releases 0 Wiki Activity
Browse Source

add layout and sound

pull/14/head
PhamY0601 1 year ago
parent
282475038c
commit
32003132f6
20 changed files with 188 additions and 326 deletions
Split View Show Diff Stats
  1. +13
    -3
      src/app/app-routing.module.ts
  2. +0
    -308
      src/app/app.constants.ts
  3. +19
    -0
      src/app/modules/homepage/home-page.module.ts
  4. +12
    -0
      src/app/modules/homepage/home-page.routing.ts
  5. +3
    -0
      src/app/modules/homepage/homepage/home-page.component.html
  6. +0
    -0
      src/app/modules/homepage/homepage/home-page.component.scss
  7. +21
    -0
      src/app/modules/homepage/homepage/home-page.component.spec.ts
  8. +10
    -0
      src/app/modules/homepage/homepage/home-page.component.ts
  9. +7
    -5
      src/app/modules/overview/map/map.component.scss
  10. +2
    -1
      src/app/modules/overview/map/map.component.ts
  11. +0
    -2
      src/app/modules/overview/overall-ground/overall-ground.component.html
  12. +15
    -0
      src/app/shared/component/layout/layout.component.html
  13. +20
    -0
      src/app/shared/component/layout/layout.component.scss
  14. +21
    -0
      src/app/shared/component/layout/layout.component.spec.ts
  15. +10
    -0
      src/app/shared/component/layout/layout.component.ts
  16. +3
    -6
      src/app/shared/component/shared-component.module.ts
  17. +29
    -0
      src/app/shared/services/alarm-sound.service.ts
  18. +3
    -1
      src/app/shared/shared-material.module.ts
  19. BIN
      src/assets/images/logo.png
  20. BIN
      src/assets/sound/alarm.mp3

+ 13
- 3
src/app/app-routing.module.ts View File

@@ -1,14 +1,24 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {LayoutComponent} from "./shared/component/layout/layout.component";

const routes: Routes = [
{ path: '',
redirectTo: '/overview',
redirectTo: '/homepage',
pathMatch: 'full'
},
{ path: 'overview',
loadChildren: () => import('./modules/overview/overview.module').then(m => m.OverviewModule)
{ path: '',
component: LayoutComponent,
children: [
{ path: 'homepage',
loadChildren: () => import('./modules/homepage/home-page.module').then(m => m.HomePageModule)
},
{ path: 'overview',
loadChildren: () => import('./modules/overview/overview.module').then(m => m.OverviewModule)
},
]
},

];

@NgModule({

+ 0
- 308
src/app/app.constants.ts View File

@@ -1,308 +0,0 @@
export const ICON = {
sensorOff: `<div style="display: flex;
flex-direction: column;
align-items: center">
<div style="display: flex; flex-direction: row; gap: 5px">
<div class="tooltip">
<img style="width: 30px; height: 30px;" src="assets/images/sensor-off.png">
<div class="tooltiptext">
<div style="display: flex;
flex-direction: row;
justify-content: space-between;">
<div style="color: #F33152;
padding: 5px 13px;
background-color: rgba(243, 49, 82, 0.1);
border-radius: 20px;
text-align: center;
width: 120px;">Hệ thống báo động 2</div>
<a href="/overview/camera-stream">
<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none">
<g stroke="currentColor" stroke-width="2">
<path d="M16 16V8a1 1 0 00-1-1H5a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1z"/>
<path stroke-linejoin="round" d="M20 7l-4 3v4l4 3V7z"/>
</g>
</svg>
</a>
</div>
<div><strong>Địa điểm:</strong> 120 Xa Lộ Hà Nội, Thành Phố, Thủ Đức, Thành phố Hồ Chí Minh</div>
<div><strong>Tọa độ:</strong> 10.8661° N, 106.8029° E</div>
<div><strong>Thời gian:</strong> 01:54, 16/05/2022</div>
<a href="/overview/overall-ground" target="_blank">Xem chi tiết</a>
</div>
</div>

<a href="/overview/camera-stream" target="_blank">
<img style="width: 30px; height: 30px;" src="assets/images/camera.png">
</a>
</div>
</div>
<style>
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 300px;
padding: 10px;
background-color: #fff;
color: black;
border-radius: 6px;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>`,
sensorOn: `<div style="display: flex;
flex-direction: column;
align-items: center">
<div style="display: flex; flex-direction: row; gap: 5px">
<div class="tooltip">
<img style="width: 30px; height: 30px;" src="assets/images/sensor-on.png">
<div class="tooltiptext">
<div style="display: flex;
flex-direction: row;
justify-content: space-between;">
<div style="color: #F33152;
padding: 5px 13px;
background-color: rgba(243, 49, 82, 0.1);
border-radius: 20px;
text-align: center;
width: 120px;">Hệ thống báo động 2</div>
<a href="/overview/camera-stream">
<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none">
<g stroke="currentColor" stroke-width="2">
<path d="M16 16V8a1 1 0 00-1-1H5a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1z"/>
<path stroke-linejoin="round" d="M20 7l-4 3v4l4 3V7z"/>
</g>
</svg>
</a>
</div>
<div><strong>Địa điểm:</strong> 120 Xa Lộ Hà Nội, Thành Phố, Thủ Đức, Thành phố Hồ Chí Minh</div>
<div><strong>Tọa độ:</strong> 10.8661° N, 106.8029° E</div>
<div><strong>Thời gian:</strong> 01:54, 16/05/2022</div>
<a href="/overview/overall-ground" target="_blank">Xem chi tiết</a>
</div>
</div>

<a href="/overview/camera-stream" target="_blank">
<img style="width: 30px; height: 30px;" src="assets/images/camera.png">
</a>
</div>
<!-- <div style="font-size: 11px"><b>ALARM: SMOKE ALERT</b></div>-->
</div>
<style>
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 300px;
padding: 10px;
background-color: #fff;
color: black;
border-radius: 6px;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>`,
sensorActive: `<div>
<div style="width: 30px; height: 30px; position: absolute; display: flex; justify-content: center; align-items: center; border-radius: 50%; background: linear-gradient(#ff0000, #C70039);">
<div style="position: absolute !important; width: 100%; height: 100%; background: #ff0000; border-radius: 50%; z-index: 1; animation: sensor-on 2s ease-out infinite;"></div>
<div style="position: absolute !important; width: 100%; height: 100%; background: #ff0000; border-radius: 50%; z-index: 1; animation: sensor-on 2s ease-out infinite; animation-delay: 1s;"></div>
<img src="assets/images/sensor-on.png" style="width: 30px; height: 30px; z-index: 9;">
</div>
<img style="width: 30px; height: 30px;margin-left: 40px;" src="assets/images/camera.png">
<style>
@keyframes sensor-on {
100% {
transform: scale(2);
opacity: 0;
}
}
</style>
</div>`,
fireContent: `<div style="display: flex;
flex-direction: row;
justify-content: space-between;">
<div style="color: #F33152;
padding: 5px 13px;
background-color: rgba(243, 49, 82, 0.1);
border-radius: 20px;
text-align: center;
width: 100px;">Sự cố cháy</div>
<a href="/overview/camera-stream" target="_blank">
<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none">
<g stroke="currentColor" stroke-width="2">
<path d="M16 16V8a1 1 0 00-1-1H5a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1z"/>
<path stroke-linejoin="round" d="M20 7l-4 3v4l4 3V7z"/>
</g>
</svg>
</a>
</div>
<div><strong>Địa điểm:</strong> 120 Xa Lộ Hà Nội, Thành Phố, Thủ Đức, Thành phố Hồ Chí Minh</div>
<div><strong>Tọa độ:</strong> 10.8661° N, 106.8029° E</div>
<div><strong>Thời gian:</strong> 01:54, 16/05/2022</div>
<a href="/overview/overall-ground" target="_blank">Xem chi tiết</a>`,

sensorActiveSmoke: `
<div style="display: flex;
flex-direction: column;
align-items: center">
<div style="display: flex; flex-direction: row; gap: 39px;width: 100%; justify-content: center;">
<div class="tooltip">
<div style="width: 30px; height: 30px; position: absolute; display: flex; justify-content: center; align-items: center; border-radius: 50%; background: linear-gradient(#ff0000, #C70039);">
<div style="position: absolute !important; width: 100%; height: 100%; background: #ff0000; border-radius: 50%; z-index: 1; animation: sensor-on 2s ease-out infinite;"></div>
<div style="position: absolute !important; width: 100%; height: 100%; background: #ff0000; border-radius: 50%; z-index: 1; animation: sensor-on 2s ease-out infinite; animation-delay: 1s;"></div>
<img src="assets/images/sensor-on.png" style="width: 30px; height: 30px; z-index: 9;">
</div>

<div class="tooltiptext">
<div style="display: flex;
flex-direction: row;
justify-content: space-between;">
<div style="color: #F33152;
padding: 5px 13px;
background-color: rgba(243, 49, 82, 0.1);
border-radius: 20px;
text-align: center;
width: 120px;">Hệ thống báo động 1</div>
<a href="/overview/camera-stream" target="_blank">
<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none">
<g stroke="currentColor" stroke-width="2">
<path d="M16 16V8a1 1 0 00-1-1H5a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1z"/>
<path stroke-linejoin="round" d="M20 7l-4 3v4l4 3V7z"/>
</g>
</svg>
</a>
</div>
<div><strong>Địa điểm:</strong> 120 Xa Lộ Hà Nội, Thành Phố, Thủ Đức, Thành phố Hồ Chí Minh</div>
<div><strong>Tọa độ:</strong> 10.8661° N, 106.8029° E</div>
<div><strong>Thời gian:</strong> 01:54, 16/05/2022</div>
<a href="/overview/overall-ground" target="_blank">Xem chi tiết</a>
</div>
</div>

<a href="/overview/camera-stream" target="_blank">
<img style="width: 30px; height: 30px;" src="assets/images/camera.png">
</a>
</div>
<div style="background: #F11E1E; color: #FFF; padding: 2px 3px; font-size: 11px"><b>ALARM: SMOKE ALERT</b></div>
</div>
<style>
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 300px;
padding: 10px;
background-color: #fff;
color: black;
border-radius: 6px;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}
@keyframes sensor-on {
100% {
transform: scale(2);
opacity: 0;
}
}
</style>`,
sensorActiveVib: `
<div style="display: flex;
flex-direction: column;
align-items: center">
<div style="display: flex; flex-direction: row; gap: 39px;width: 100%; justify-content: center;">
<div class="tooltip">
<div style="width: 30px; height: 30px; position: absolute; display: flex; justify-content: center; align-items: center; border-radius: 50%; background: linear-gradient(#ff0000, #C70039);">
<div style="position: absolute !important; width: 100%; height: 100%; background: #ff0000; border-radius: 50%; z-index: 1; animation: sensor-on 2s ease-out infinite;"></div>
<div style="position: absolute !important; width: 100%; height: 100%; background: #ff0000; border-radius: 50%; z-index: 1; animation: sensor-on 2s ease-out infinite; animation-delay: 1s;"></div>
<img src="assets/images/sensor-on.png" style="width: 30px; height: 30px; z-index: 9;">
</div>

<div class="tooltiptext">
<div style="display: flex;
flex-direction: row;
justify-content: space-between;">
<div style="color: #F33152;
padding: 5px 13px;
background-color: rgba(243, 49, 82, 0.1);
border-radius: 20px;
text-align: center;
width: 120px;">Hệ thống báo động 2</div>
<a href="/overview/camera-stream" target="_blank">
<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none">
<g stroke="currentColor" stroke-width="2">
<path d="M16 16V8a1 1 0 00-1-1H5a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1z"/>
<path stroke-linejoin="round" d="M20 7l-4 3v4l4 3V7z"/>
</g>
</svg>
</a>
</div>
<div><strong>Địa điểm:</strong> 120 Xa Lộ Hà Nội, Thành Phố, Thủ Đức, Thành phố Hồ Chí Minh</div>
<div><strong>Tọa độ:</strong> 10.8661° N, 106.8029° E</div>
<div><strong>Thời gian:</strong> 01:54, 16/05/2022</div>
<a href="/overview/overall-ground" target="_blank">Xem chi tiết</a>
</div>
</div>

<a href="/overview/camera-stream" target="_blank">
<img style="width: 30px; height: 30px;" src="assets/images/camera.png">
</a>
</div>
<div style="background: #F11E1E; color: #FFF; padding: 2px 3px; font-size: 11px"><b>ALARM: VIBRATION ALERT</b></div>
</div>
<style>
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 300px;
padding: 10px;
background-color: #fff;
color: black;
border-radius: 6px;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}
@keyframes sensor-on {
100% {
transform: scale(2);
opacity: 0;
}
}
</style>`,
}

+ 19
- 0
src/app/modules/homepage/home-page.module.ts View File

@@ -0,0 +1,19 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import {RouterModule} from "@angular/router";
import {SharedMaterialModule} from "../../shared/shared-material.module";
import { HomePageComponent } from './homepage/home-page.component';
import {homePageRoutes} from "./home-page.routing";


@NgModule({
declarations: [
HomePageComponent
],
imports: [
CommonModule,
RouterModule.forChild(homePageRoutes),
SharedMaterialModule,]
})
export class HomePageModule { }

+ 12
- 0
src/app/modules/homepage/home-page.routing.ts View File

@@ -0,0 +1,12 @@
import {Routes} from "@angular/router";
import {HomePageComponent} from "./homepage/home-page.component";


export const homePageRoutes: Routes = [
{
path: '',
component: HomePageComponent,
},

];


+ 3
- 0
src/app/modules/homepage/homepage/home-page.component.html View File

@@ -0,0 +1,3 @@
<div>

</div>

+ 0
- 0
src/app/modules/homepage/homepage/home-page.component.scss View File


+ 21
- 0
src/app/modules/homepage/homepage/home-page.component.spec.ts View File

@@ -0,0 +1,21 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { HomePageComponent } from './home-page.component';

describe('HomepageComponent', () => {
let component: HomePageComponent;
let fixture: ComponentFixture<HomePageComponent>;

beforeEach(() => {
TestBed.configureTestingModule({
declarations: [HomePageComponent]
});
fixture = TestBed.createComponent(HomePageComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});

+ 10
- 0
src/app/modules/homepage/homepage/home-page.component.ts View File

@@ -0,0 +1,10 @@
import { Component } from '@angular/core';

@Component({
selector: 'app-homepage',
templateUrl: './home-page.component.html',
styleUrls: ['./home-page.component.scss']
})
export class HomePageComponent {

}

+ 7
- 5
src/app/modules/overview/map/map.component.scss View File

@@ -1,15 +1,17 @@
.map-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 30px;
width: 100%;
height: calc(100% - 7rem);
h2 {
padding: .5rem 3rem 0 ;
text-align: center;
}
}

.map-frame {
border: 2px solid black;
height: 90%;
height: 100%;
}

#map {

+ 2
- 1
src/app/modules/overview/map/map.component.ts View File

@@ -192,7 +192,8 @@ export class MapComponent implements OnInit, AfterViewInit, OnDestroy {

constructor(private socketService$: SocketService,
private dialog: MatDialog,
private renderer: Renderer2) { }
private renderer: Renderer2,
private audioService: AudioService) { }

ngOnInit() {
this.statusSubscription = this.socketService$.status$.subscribe(isConnected => {

+ 0
- 2
src/app/modules/overview/overall-ground/overall-ground.component.html View File

@@ -2,8 +2,6 @@
<div fxFlex="50" class="map-image">
<div class="card-state">
<img src="assets/images/ground.png">


<div class="state t2" id="State2">
<div>
<div class="sensor-off" [class.sensor-on]="(state1 && state5 && isReady)">

+ 15
- 0
src/app/shared/component/layout/layout.component.html View File

@@ -0,0 +1,15 @@
<div class="layout-container">
<div class="header mat-elevation-z1">
<img src="../../../../../../assets/images/logo.png" >
<div>
<button mat-button routerLink="/home">Home</button>
<button mat-button routerLink="/overview">Overview</button>
<button mat-button>Setting</button>
</div>
</div>
<div>
<router-outlet></router-outlet>
</div>
</div>



+ 20
- 0
src/app/shared/component/layout/layout.component.scss View File

@@ -0,0 +1,20 @@
.layout-container{
display: flex;
flex-direction: column;
justify-content: space-between;
.header {
height: 3rem;
padding: .25rem 2rem;
display: flex;
flex-direction: row;
align-items: center;
img{
width: 7rem;
height: 3rem;
}
button {
width: 5rem;
}
}

}

+ 21
- 0
src/app/shared/component/layout/layout.component.spec.ts View File

@@ -0,0 +1,21 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { LayoutComponent } from './layout.component';

describe('LayoutComponent', () => {
let component: LayoutComponent;
let fixture: ComponentFixture<LayoutComponent>;

beforeEach(() => {
TestBed.configureTestingModule({
declarations: [LayoutComponent]
});
fixture = TestBed.createComponent(LayoutComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});

+ 10
- 0
src/app/shared/component/layout/layout.component.ts View File

@@ -0,0 +1,10 @@
import { Component } from '@angular/core';

@Component({
selector: 'app-layout',
templateUrl: './layout.component.html',
styleUrls: ['./layout.component.scss']
})
export class LayoutComponent {

}

+ 3
- 6
src/app/shared/component/shared-component.module.ts View File

@@ -2,15 +2,13 @@ import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common";
import {SharedMaterialModule} from "../shared-material.module";
import {RouterModule} from "@angular/router";
import { LayoutComponent } from './layout/layout.component';



const components = [
];

@NgModule({
declarations: [
// ...components,
LayoutComponent
],
imports: [
CommonModule,
@@ -18,8 +16,7 @@ const components = [
RouterModule,
],
exports: [
// ...components,

LayoutComponent
],
providers: []
})

+ 29
- 0
src/app/shared/services/alarm-sound.service.ts View File

@@ -0,0 +1,29 @@
import { Injectable } from '@angular/core';

@Injectable({
providedIn: 'root'
})
export class AlarmSoundService {

private audio: HTMLAudioElement;

constructor() {
this.audio = new Audio('assets/sound/alarm.mp3');
this.audio.loop = true;
}

playAlertSound() {
this.audio.play();
}

stopAlertSound() {
this.audio.pause();
this.audio.currentTime = 0;
}

setVolume(volume: number) {
if (volume >= 0 && volume <= 1) {
this.audio.volume = volume;
}
}
}

+ 3
- 1
src/app/shared/shared-material.module.ts View File

@@ -3,13 +3,15 @@ import { FlexLayoutModule } from "@angular/flex-layout";
import { MatButtonModule } from "@angular/material/button";
import { MatDialogModule } from "@angular/material/dialog";
import { MatIconModule } from "@angular/material/icon";
import {MatMenuModule} from "@angular/material/menu";

@NgModule({
exports: [
MatButtonModule,
FlexLayoutModule,
MatDialogModule,
MatIconModule
MatIconModule,
MatMenuModule
]
})
export class SharedMaterialModule {}

BIN
src/assets/images/logo.png View File

Before After
Width: 500  |  Height: 224  |  Size: 25KB

BIN
src/assets/sound/alarm.mp3 View File


Write Preview
Loading…
Cancel
Save