Compare commits
3 Commits
master
...
dominika_g
Author | SHA1 | Date | |
---|---|---|---|
|
b33a61e29b | ||
|
55c2deb701 | ||
|
30f9ea4788 |
BIN
dist/client.zip
vendored
BIN
dist/client.zip
vendored
Binary file not shown.
62
dist/client/main.js
vendored
62
dist/client/main.js
vendored
@ -357,7 +357,7 @@ var AdminComponent = /** @class */ (function () {
|
|||||||
var _this = this;
|
var _this = this;
|
||||||
if (this.name.value.length > 0 && this.ip.value.length > 0) {
|
if (this.name.value.length > 0 && this.ip.value.length > 0) {
|
||||||
this.http
|
this.http
|
||||||
.post("http://192.168.8.101:3000/device", {
|
.post("http://localhost:3000/device", {
|
||||||
name: this.name.value,
|
name: this.name.value,
|
||||||
ip: this.ip.value
|
ip: this.ip.value
|
||||||
})
|
})
|
||||||
@ -371,7 +371,7 @@ var AdminComponent = /** @class */ (function () {
|
|||||||
var _this = this;
|
var _this = this;
|
||||||
if (this.ipDelete.value.length > 0) {
|
if (this.ipDelete.value.length > 0) {
|
||||||
this.http
|
this.http
|
||||||
.delete("http://192.168.8.101:3000/device/" + this.ipDelete.value)
|
.delete("http://localhost:3000/device/" + this.ipDelete.value)
|
||||||
.subscribe(function (data) {
|
.subscribe(function (data) {
|
||||||
_this.ipDelete.reset();
|
_this.ipDelete.reset();
|
||||||
});
|
});
|
||||||
@ -642,15 +642,11 @@ __webpack_require__.r(__webpack_exports__);
|
|||||||
|
|
||||||
var StatusService = /** @class */ (function () {
|
var StatusService = /** @class */ (function () {
|
||||||
function StatusService(http) {
|
function StatusService(http) {
|
||||||
var _this = this;
|
|
||||||
this.http = http;
|
this.http = http;
|
||||||
// private url_pilkarzyki1 =
|
// private url_pilkarzyki1 =
|
||||||
// "http://localhost:3000/chillroom-server?ip=192.168.8.107";
|
// "http://localhost:3000/chillroom-server?ip=192.168.8.107";
|
||||||
this.url_db = "http://192.168.8.101:3000/all";
|
this.url_db = "http://localhost:3000/all";
|
||||||
this.status_url = "http://192.168.8.101:3000/status/";
|
this.status_url = "http://localhost:3000/status/";
|
||||||
this.getStatus = function (ip) {
|
|
||||||
return _this.http.get(_this.status_url + ip);
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
// getPilkarzyki1(): Observable<any> {
|
// getPilkarzyki1(): Observable<any> {
|
||||||
// return this.http.get(this.url_pilkarzyki1);
|
// return this.http.get(this.url_pilkarzyki1);
|
||||||
@ -658,6 +654,9 @@ var StatusService = /** @class */ (function () {
|
|||||||
StatusService.prototype.getDB = function () {
|
StatusService.prototype.getDB = function () {
|
||||||
return this.http.get(this.url_db);
|
return this.http.get(this.url_db);
|
||||||
};
|
};
|
||||||
|
StatusService.prototype.getStatus = function (ip) {
|
||||||
|
return this.http.get(this.status_url + ip);
|
||||||
|
};
|
||||||
StatusService = tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"]([
|
StatusService = tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"]([
|
||||||
Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["Injectable"])({
|
Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["Injectable"])({
|
||||||
providedIn: "root"
|
providedIn: "root"
|
||||||
@ -678,7 +677,7 @@ var StatusService = /** @class */ (function () {
|
|||||||
/*! no static exports found */
|
/*! no static exports found */
|
||||||
/***/ (function(module, exports) {
|
/***/ (function(module, exports) {
|
||||||
|
|
||||||
module.exports = "<div class=\"lists\"><span>Wybierz urządzenie:</span></div>\n<div class=\"machine-list\">\n <div class=\"row row-list\">\n <div\n class=\"col-md-3 col-xs-3\"\n *ngFor=\"let device of devices; let i = index\"\n [attr.data-index]=\"i\"\n >\n <button\n class=\"room-button\"\n [ngStyle]=\"{\n color: 'white',\n backgroundColor:\n device.lastStatus == 1\n ? '#D13'\n : device.lastStatus == 0\n ? '#4CC355'\n : '#5A17ED',\n borderColor:\n device.lastStatus == 1\n ? '#D13'\n : device.lastStatus == 0\n ? '#4CC355'\n : '#5A17ED'\n }\"\n (click)=\"onChangeDevice(i)\"\n >\n {{ device.name }}\n </button>\n <b>{{\n device.lastStatus == 1\n ? \"Zajęte\"\n : device.lastStatus == 0\n ? \"Wolne\"\n : \"Brak połączenia z czujnikiem\"\n }}</b>\n </div>\n </div>\n</div>\n\n<div class=\"row machine-row\">\n <div class=\"col-md-5 col-xs-11\">\n <p class=\"text-center machine-text\">\n - <span>{{ activeDevice.name }}</span> -\n </p>\n\n <p class=\"machine-status\">\n Status:\n <img\n [src]=\"\n activeDevice.lastStatus == 1\n ? '../assets/img/busy.png'\n : '../assets/img/free.png'\n \"\n alt=\"\"\n />\n <span>{{\n activeDevice.lastStatus == 1\n ? \"Zajęte\"\n : activeDevice.lastStatus == 0\n ? \"Wolne\"\n : \"Brak połączenia z czujnikiem\"\n }}</span>\n </p>\n <p class=\"machine-status2\">\n {{\n activeDevice.lastStatus == 1\n ? \"Zajęte\"\n : activeDevice.lastStatus == 0\n ? \"Wolne\"\n : \"Brak połączenia z czujnikiem\"\n }}\n od:\n <span\n >{{ time > 60 ? this.Math.floor(time / 60) : this.Math.floor(time) }}\n {{ time > 60 ? \"min\" : \"sek\" }}\n </span>\n </p>\n </div>\n <div class=\"col-md-7 col-xs-1\">\n <img\n class=\"machine-image\"\n src=\"../assets/img/football2.jpg\"\n alt=\"{{ status }}\"\n />\n </div>\n</div>\n<div class=\"row statistics-row\">\n <div class=\"col-md-6 stat-wrapper\">\n <p class=\"stat-text\"><span>Statystyki szczegółowe:</span></p>\n <ul class=\"list-group\">\n <p style=\"margin-bottom:15px\">\n <span>Średni czas gry: </span> <span class=\"boldMe\">23</span\n ><span> min</span><br />\n </p>\n\n <span>Przewidywane zakończenie: </span>\n <span class=\"boldMe\">10</span\n ><span> min</span>\n </ul>\n </div>\n</div>\n<div class=\"row\">\n <div id=\"tabel\" class=\"col-md-6\"><canvas id=\"lineChart\"></canvas></div>\n <div id=\"tabel\" class=\"col-md-6\"><canvas id=\"barChart\"></canvas></div>\n</div>\n"
|
module.exports = "<div class=\"lists\"><span>Wybierz urządzenie:</span></div>\n<div class=\"machine-list\">\n <div class=\"row row-list\">\n <div class=\"col-md-3 col-xs-3\" *ngFor=\"let device of devices\">\n <button\n class=\"room-button\"\n [ngStyle]=\"{\n color: 'black',\n backgroundColor:\n device.lastStatus == 1\n ? 'red'\n : device.lastStatus == 0\n ? 'green'\n : 'yellow',\n borderColor:\n device.lastStatus == 1\n ? 'red'\n : device.lastStatus == 0\n ? 'green'\n : 'yellow'\n }\"\n >\n {{ device.name }}\n </button>\n <b>{{\n device.lastStatus == 1\n ? \"Zajęte\"\n : device.lastStatus == 0\n ? \"Wolne\"\n : \"Brak połączenia z czujnikiem\"\n }}</b>\n </div>\n </div>\n</div>\n\n<div class=\"row machine-row\">\n <div class=\"col-md-5 col-xs-11\">\n <p class=\"text-center machine-text\">\n - <span>{{ activeDevice.name }}</span> -\n </p>\n\n <p class=\"machine-status\">\n Status:\n <img\n [src]=\"\n activeDevice.lastStatus == 1\n ? '../assets/img/busy.png'\n : '../assets/img/free.png'\n \"\n alt=\"\"\n />\n <span>{{ activeDevice.lastStatus == 1 ? \"Zajęte\" : \"Wolne\" }}</span>\n </p>\n <p *ngIf=\"activeDevice.lastStatus == 1\" class=\"machine-status2\">\n Zajęte od: <span>{{ this.time }}</span>\n </p>\n </div>\n <div class=\"col-md-7 col-xs-1\">\n <img\n class=\"machine-image\"\n src=\"../assets/img/football2.jpg\"\n alt=\"{{ status }}\"\n />\n </div>\n</div>\n<div class=\"row statistics-row\">\n <div class=\"col-md-6 stat-wrapper\">\n <p class=\"stat-text\"><span>Statystyki szczegółowe:</span></p>\n <ul class=\"list-group\">\n <p style=\"margin-bottom:15px\">\n <span>Średni czas gry: </span> <span class=\"boldMe\">23</span\n ><span> min</span><br />\n </p>\n\n <span>Przewidywane zakończenie: </span>\n <span class=\"boldMe\">10</span\n ><span> min</span>\n </ul>\n </div>\n</div>\n<div class=\"row\">\n <div id=\"tabel\" class=\"col-md-6\"><canvas id=\"lineChart\"></canvas></div>\n <div id=\"tabel\" class=\"col-md-6\"><canvas id=\"barChart\"></canvas></div>\n</div>\n"
|
||||||
|
|
||||||
/***/ }),
|
/***/ }),
|
||||||
|
|
||||||
@ -714,7 +713,6 @@ __webpack_require__.r(__webpack_exports__);
|
|||||||
|
|
||||||
var StatusListComponent = /** @class */ (function () {
|
var StatusListComponent = /** @class */ (function () {
|
||||||
function StatusListComponent(statusService) {
|
function StatusListComponent(statusService) {
|
||||||
var _this = this;
|
|
||||||
this.statusService = statusService;
|
this.statusService = statusService;
|
||||||
//statuses: {} = {};
|
//statuses: {} = {};
|
||||||
//statusesKeys = Object.keys(this.statuses);
|
//statusesKeys = Object.keys(this.statuses);
|
||||||
@ -722,32 +720,7 @@ var StatusListComponent = /** @class */ (function () {
|
|||||||
this.BarChart = [];
|
this.BarChart = [];
|
||||||
this.devices = [];
|
this.devices = [];
|
||||||
this.activeDevice = { name: "", lastStatus: "", ip: "", _id: "" };
|
this.activeDevice = { name: "", lastStatus: "", ip: "", _id: "" };
|
||||||
this.activeID = 0;
|
|
||||||
this.time = 0;
|
this.time = 0;
|
||||||
this.onChangeDevice = function (index) {
|
|
||||||
_this.activeID = index;
|
|
||||||
_this.activeDevice = _this.devices[index];
|
|
||||||
//console.log(this.activeDevice);
|
|
||||||
_this.statusService.getStatus(_this.activeDevice._id).subscribe(function (status) {
|
|
||||||
var i = status.findIndex(function (item) {
|
|
||||||
return item.value != status[0].value;
|
|
||||||
});
|
|
||||||
//console.log(i);
|
|
||||||
var newStatus;
|
|
||||||
if (i == -1) {
|
|
||||||
newStatus = status;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
newStatus = status.splice(0, i);
|
|
||||||
}
|
|
||||||
var first = new Date(newStatus[0].time).getTime();
|
|
||||||
var last = new Date(newStatus[newStatus.length - 1].time).getTime();
|
|
||||||
var time = first - last;
|
|
||||||
//console.log(this);
|
|
||||||
_this.time = time / 1000;
|
|
||||||
//console.log(this.time);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
this.readSensors = function (data) {
|
this.readSensors = function (data) {
|
||||||
console.log(data);
|
console.log(data);
|
||||||
//const parsedData = data.split(",");
|
//const parsedData = data.split(",");
|
||||||
@ -755,20 +728,29 @@ var StatusListComponent = /** @class */ (function () {
|
|||||||
//this.statusesKeys = Object.keys(this.statuses);
|
//this.statusesKeys = Object.keys(this.statuses);
|
||||||
//this.statuses = [JSON.parse(data)];
|
//this.statuses = [JSON.parse(data)];
|
||||||
};
|
};
|
||||||
this.Math = Math;
|
|
||||||
}
|
}
|
||||||
StatusListComponent.prototype.ngOnInit = function () {
|
StatusListComponent.prototype.ngOnInit = function () {
|
||||||
var _this = this;
|
var _this = this;
|
||||||
this.statusService.getDB().subscribe(function (data) {
|
this.statusService.getDB().subscribe(function (data) {
|
||||||
_this.devices = data;
|
_this.devices = data;
|
||||||
_this.onChangeDevice(0);
|
_this.activeDevice = _this.devices[0];
|
||||||
|
_this.statusService.getStatus(_this.activeDevice._id).subscribe(function (status) {
|
||||||
|
var index = status.findIndex(function (item) {
|
||||||
|
return item.value != status[0].value;
|
||||||
|
});
|
||||||
|
var newStatus = status.splice(0, index);
|
||||||
|
var first = new Date(newStatus[0].time).getTime();
|
||||||
|
var last = new Date(newStatus[newStatus.length - 1].time).getTime();
|
||||||
|
var time = first - last;
|
||||||
|
_this.time = time / 1000;
|
||||||
|
console.log(time);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
setInterval(function () {
|
setInterval(function () {
|
||||||
_this.statusService.getDB().subscribe(function (data) {
|
return _this.statusService.getDB().subscribe(function (data) {
|
||||||
_this.devices = data;
|
_this.devices = data;
|
||||||
_this.onChangeDevice(_this.activeID);
|
|
||||||
});
|
});
|
||||||
}, 5000);
|
}, 1000);
|
||||||
this.showChart();
|
this.showChart();
|
||||||
};
|
};
|
||||||
StatusListComponent.prototype.showChart = function () {
|
StatusListComponent.prototype.showChart = function () {
|
||||||
|
2
dist/client/main.js.map
vendored
2
dist/client/main.js.map
vendored
File diff suppressed because one or more lines are too long
@ -1,3 +1,4 @@
|
|||||||
|
<a style="float: right" routerLink="/"> Wyloguj </a>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
@ -8,7 +9,7 @@
|
|||||||
<input
|
<input
|
||||||
matInput
|
matInput
|
||||||
#nameDevice
|
#nameDevice
|
||||||
maxlength="256"
|
maxlength="20"
|
||||||
placeholder="Nazwa urządzenia"
|
placeholder="Nazwa urządzenia"
|
||||||
[formControl]="name"
|
[formControl]="name"
|
||||||
/>
|
/>
|
||||||
@ -17,7 +18,7 @@
|
|||||||
>Podaj nazwę czujnika (w przypadku ESPEasy name device)</strong
|
>Podaj nazwę czujnika (w przypadku ESPEasy name device)</strong
|
||||||
>
|
>
|
||||||
</mat-hint>
|
</mat-hint>
|
||||||
<mat-hint align="end">{{ nameDevice.value.length }} / 100</mat-hint>
|
<mat-hint align="end">{{ nameDevice.value.length }} / 20</mat-hint>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
</div>
|
</div>
|
||||||
<div class="input-wrapper">
|
<div class="input-wrapper">
|
||||||
@ -25,7 +26,7 @@
|
|||||||
<input
|
<input
|
||||||
matInput
|
matInput
|
||||||
#ipDevice
|
#ipDevice
|
||||||
maxlength="256"
|
maxlength="15"
|
||||||
placeholder="Adres IP urządzenia"
|
placeholder="Adres IP urządzenia"
|
||||||
[formControl]="ip"
|
[formControl]="ip"
|
||||||
/>
|
/>
|
||||||
@ -48,7 +49,7 @@
|
|||||||
<input
|
<input
|
||||||
matInput
|
matInput
|
||||||
#ipDeviceDel
|
#ipDeviceDel
|
||||||
maxlength="256"
|
maxlength="15"
|
||||||
placeholder="Adres IP urządzenia"
|
placeholder="Adres IP urządzenia"
|
||||||
[formControl]="ipDelete"
|
[formControl]="ipDelete"
|
||||||
/>
|
/>
|
||||||
@ -64,13 +65,35 @@
|
|||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-6">
|
|
||||||
<app-form
|
|
||||||
*ngFor="let device of devices"
|
<table style="margin-top:40px;" class="table">
|
||||||
[device]="device"
|
<thead>
|
||||||
(onUpdateDeviceEmit)="onUpdateDevice($event)"
|
<tr>
|
||||||
></app-form>
|
|
||||||
</div>
|
<th scope="col">Nazwa</th>
|
||||||
</div>
|
<th scope="col">IP</th>
|
||||||
</div>
|
|
||||||
|
<th scope="col">Edytuj</th>
|
||||||
|
<th scope="col">Usuń</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
|
||||||
|
<tr *ngFor="let device of devices; let i = index"
|
||||||
|
[attr.data-index]="i"
|
||||||
|
>
|
||||||
|
|
||||||
|
|
||||||
|
<td>{{device.name}}</td>
|
||||||
|
<td>{{device.ip}}</td>
|
||||||
|
|
||||||
|
<td><button style="background-color:white;border: 1px blue solid; color: blue; opacity:0.5;" (click)="onDeviceDelete(i)">edytuj</button></td>
|
||||||
|
|
||||||
|
<td><button style="background-color:white;border: 1px red solid; color: red; opacity:0.5;" (click)="onDeviceDelete(i); deleteRow(i)">usuń</button> </td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
|
||||||
|
@ -1,8 +1,4 @@
|
|||||||
.container {
|
.container {
|
||||||
table {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row {
|
.row {
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
.admin-form {
|
.admin-form {
|
||||||
|
@ -3,6 +3,7 @@ import { FormControl } from "@angular/forms";
|
|||||||
import { HttpClient } from "@angular/common/http";
|
import { HttpClient } from "@angular/common/http";
|
||||||
import { Observable } from "rxjs/Observable";
|
import { Observable } from "rxjs/Observable";
|
||||||
import { StatusService } from "../shared/status/status.service";
|
import { StatusService } from "../shared/status/status.service";
|
||||||
|
import {UserService} from '../user.service';
|
||||||
import "rxjs/Rx";
|
import "rxjs/Rx";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
@ -15,15 +16,12 @@ export class AdminComponent implements OnInit {
|
|||||||
ip = new FormControl("");
|
ip = new FormControl("");
|
||||||
ipDelete = new FormControl("");
|
ipDelete = new FormControl("");
|
||||||
devices = [];
|
devices = [];
|
||||||
updateName = new FormControl("");
|
constructor(private http: HttpClient, private user: UserService, private statusService: StatusService) {}
|
||||||
updateID = new FormControl("");
|
|
||||||
|
|
||||||
constructor(private http: HttpClient, private statusService: StatusService) {}
|
|
||||||
|
|
||||||
onAddDevice() {
|
onAddDevice() {
|
||||||
if (this.name.value.length > 0 && this.ip.value.length > 0) {
|
if (this.name.value.length > 0 && this.ip.value.length > 0) {
|
||||||
this.http
|
this.http
|
||||||
.post("http://192.168.8.101:3000/device", {
|
.post("http://localhost:3000/device", {
|
||||||
name: this.name.value,
|
name: this.name.value,
|
||||||
ip: this.ip.value
|
ip: this.ip.value
|
||||||
})
|
})
|
||||||
@ -34,36 +32,47 @@ export class AdminComponent implements OnInit {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onDeviceDelete() {
|
onDeviceDelete(i) {
|
||||||
if (this.ipDelete.value.length > 0) {
|
|
||||||
|
if (this.devices[i].ip.length > 0) {
|
||||||
this.http
|
this.http
|
||||||
.delete("http://192.168.8.101:3000/device/" + this.ipDelete.value)
|
.delete("http://localhost:3000/device/" + this.devices[i].ip)
|
||||||
.subscribe(data => {
|
.subscribe(data => {
|
||||||
this.ipDelete.reset();
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onUpdateDevice(device) {
|
|
||||||
console.log(device);
|
deleteRow(i){
|
||||||
this.http
|
|
||||||
.put("http://localhost:3000/device/" + device.id, {
|
|
||||||
name: device.name,
|
this.devices.splice(i,1);
|
||||||
ip: device.ip
|
|
||||||
})
|
|
||||||
.subscribe(data => {
|
}
|
||||||
this.statusService.getDB().subscribe(data => {
|
|
||||||
console.log(data);
|
|
||||||
this.devices = data;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
console.log(device);
|
onDeviceEdit() {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
this.statusService.getDB().subscribe(data => {
|
|
||||||
console.log(data);
|
this.statusService.getDB().subscribe(data => {
|
||||||
this.devices = data;
|
this.devices = data;
|
||||||
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -1,5 +0,0 @@
|
|||||||
<form *ngIf="device" (ngSubmit)="onUpdateDevice(device._id)">
|
|
||||||
<input type="text" [value]="device.name" [formControl]="name" />
|
|
||||||
<input type="text" [value]="device.ip" [formControl]="ip" />
|
|
||||||
<button>Edycja</button>
|
|
||||||
</form>
|
|
@ -1,25 +0,0 @@
|
|||||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
|
||||||
|
|
||||||
import { FormComponent } from './form.component';
|
|
||||||
|
|
||||||
describe('FormComponent', () => {
|
|
||||||
let component: FormComponent;
|
|
||||||
let fixture: ComponentFixture<FormComponent>;
|
|
||||||
|
|
||||||
beforeEach(async(() => {
|
|
||||||
TestBed.configureTestingModule({
|
|
||||||
declarations: [ FormComponent ]
|
|
||||||
})
|
|
||||||
.compileComponents();
|
|
||||||
}));
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
fixture = TestBed.createComponent(FormComponent);
|
|
||||||
component = fixture.componentInstance;
|
|
||||||
fixture.detectChanges();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should create', () => {
|
|
||||||
expect(component).toBeTruthy();
|
|
||||||
});
|
|
||||||
});
|
|
@ -1,39 +0,0 @@
|
|||||||
import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";
|
|
||||||
import { FormControl } from "@angular/forms";
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: "app-form",
|
|
||||||
templateUrl: "./form.component.html",
|
|
||||||
styleUrls: ["./form.component.less"]
|
|
||||||
})
|
|
||||||
export class FormComponent implements OnInit {
|
|
||||||
_device;
|
|
||||||
get device() {
|
|
||||||
return this._device;
|
|
||||||
}
|
|
||||||
|
|
||||||
@Input()
|
|
||||||
set device(device: any) {
|
|
||||||
this._device = device;
|
|
||||||
this.name.setValue(device.name);
|
|
||||||
this.ip.setValue(device.ip);
|
|
||||||
}
|
|
||||||
@Output() onUpdateDeviceEmit = new EventEmitter();
|
|
||||||
|
|
||||||
name = new FormControl("");
|
|
||||||
ip = new FormControl("");
|
|
||||||
|
|
||||||
constructor() {}
|
|
||||||
|
|
||||||
onUpdateDevice(id: string) {
|
|
||||||
console.log(this.name.value, this.ip.value);
|
|
||||||
|
|
||||||
this.onUpdateDeviceEmit.emit({
|
|
||||||
name: this.name.value,
|
|
||||||
ip: this.ip.value,
|
|
||||||
id
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
ngOnInit() {}
|
|
||||||
}
|
|
@ -8,6 +8,7 @@ import { HttpClientModule } from "@angular/common/http";
|
|||||||
import { StatusListComponent } from "./status-list/status-list.component";
|
import { StatusListComponent } from "./status-list/status-list.component";
|
||||||
import { HeaderComponent } from "./header/header.component";
|
import { HeaderComponent } from "./header/header.component";
|
||||||
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
|
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
|
||||||
|
import {UserService} from './user.service';
|
||||||
import {
|
import {
|
||||||
MatAutocompleteModule,
|
MatAutocompleteModule,
|
||||||
MatButtonModule,
|
MatButtonModule,
|
||||||
@ -46,9 +47,23 @@ import {
|
|||||||
} from "@angular/material";
|
} from "@angular/material";
|
||||||
import { AdminComponent } from "./admin/admin.component";
|
import { AdminComponent } from "./admin/admin.component";
|
||||||
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
|
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
|
||||||
import { FormComponent } from "./admin/form/form.component";
|
import { LoginComponent } from './login/login.component';
|
||||||
import { LoginComponent } from "./login/login.component";
|
import {RouterModule, Routes} from '@angular/router';
|
||||||
import { UserService } from "./user.service";
|
import {AuthgardGuard} from './authgard.guard';
|
||||||
|
|
||||||
|
const appRoutes:Routes = [
|
||||||
|
{
|
||||||
|
path: '',
|
||||||
|
component: LoginComponent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'admin',
|
||||||
|
component: AdminComponent,
|
||||||
|
canActivate: [AuthgardGuard]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
@ -56,10 +71,10 @@ import { UserService } from "./user.service";
|
|||||||
StatusListComponent,
|
StatusListComponent,
|
||||||
HeaderComponent,
|
HeaderComponent,
|
||||||
AdminComponent,
|
AdminComponent,
|
||||||
FormComponent,
|
|
||||||
LoginComponent
|
LoginComponent
|
||||||
],
|
],
|
||||||
imports: [
|
imports: [
|
||||||
|
RouterModule.forRoot(appRoutes),
|
||||||
BrowserModule,
|
BrowserModule,
|
||||||
AppRoutingModule,
|
AppRoutingModule,
|
||||||
HttpClientModule,
|
HttpClientModule,
|
||||||
@ -78,7 +93,7 @@ import { UserService } from "./user.service";
|
|||||||
MatFormFieldModule,
|
MatFormFieldModule,
|
||||||
MatInputModule
|
MatInputModule
|
||||||
],
|
],
|
||||||
providers: [StatusService],
|
providers: [StatusService, UserService, AuthgardGuard],
|
||||||
bootstrap: [AppComponent]
|
bootstrap: [AppComponent]
|
||||||
})
|
})
|
||||||
export class AppModule {}
|
export class AppModule {}
|
||||||
|
15
src/app/authgard.guard.spec.ts
Normal file
15
src/app/authgard.guard.spec.ts
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import { TestBed, async, inject } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { AuthgardGuard } from './authgard.guard';
|
||||||
|
|
||||||
|
describe('AuthgardGuard', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
providers: [AuthgardGuard]
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should ...', inject([AuthgardGuard], (guard: AuthgardGuard) => {
|
||||||
|
expect(guard).toBeTruthy();
|
||||||
|
}));
|
||||||
|
});
|
16
src/app/authgard.guard.ts
Normal file
16
src/app/authgard.guard.ts
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
|
||||||
|
import { Observable } from 'rxjs';
|
||||||
|
import {UserService} from './user.service';
|
||||||
|
|
||||||
|
@Injectable({
|
||||||
|
providedIn: 'root'
|
||||||
|
})
|
||||||
|
export class AuthgardGuard implements CanActivate {
|
||||||
|
constructor( private user: UserService) {}
|
||||||
|
canActivate(
|
||||||
|
next: ActivatedRouteSnapshot,
|
||||||
|
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
|
||||||
|
return this.user.getUserLoggedIn();
|
||||||
|
}
|
||||||
|
}
|
@ -1,15 +0,0 @@
|
|||||||
import { TestBed, async, inject } from '@angular/core/testing';
|
|
||||||
|
|
||||||
import { AuthguardGuard } from './authguard.guard';
|
|
||||||
|
|
||||||
describe('AuthguardGuard', () => {
|
|
||||||
beforeEach(() => {
|
|
||||||
TestBed.configureTestingModule({
|
|
||||||
providers: [AuthguardGuard]
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should ...', inject([AuthguardGuard], (guard: AuthguardGuard) => {
|
|
||||||
expect(guard).toBeTruthy();
|
|
||||||
}));
|
|
||||||
});
|
|
@ -1,21 +0,0 @@
|
|||||||
import { Injectable } from "@angular/core";
|
|
||||||
import {
|
|
||||||
CanActivate,
|
|
||||||
ActivatedRouteSnapshot,
|
|
||||||
RouterStateSnapshot
|
|
||||||
} from "@angular/router";
|
|
||||||
import { Observable } from "rxjs";
|
|
||||||
import { UserService } from "./user.service";
|
|
||||||
|
|
||||||
@Injectable({
|
|
||||||
providedIn: "root"
|
|
||||||
})
|
|
||||||
export class AuthgardGuard implements CanActivate {
|
|
||||||
constructor(private user: UserService) {}
|
|
||||||
canActivate(
|
|
||||||
next: ActivatedRouteSnapshot,
|
|
||||||
state: RouterStateSnapshot
|
|
||||||
): Observable<boolean> | Promise<boolean> | boolean {
|
|
||||||
return this.user.getUserLoggedIn();
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,16 +1,22 @@
|
|||||||
<div style="margin-top:30px">
|
|
||||||
<form (submit)="loginUser($event)">
|
|
||||||
<div class="input">
|
<div style="margin-top:30px"><form (submit)="loginUser($event)">
|
||||||
<label> Nazwa użytkownika</label> <input type="text" />
|
<div class="input">
|
||||||
</div>
|
<label> Nazwa użytkownika</label>
|
||||||
<div class="input"><label>Hasło</label> <input type="password" /></div>
|
<input type="text">
|
||||||
<span style="color: red">{{
|
|
||||||
statusLog == 1
|
|
||||||
? " "
|
|
||||||
: statusLog == 2
|
|
||||||
? "Niepoprawny login lub hasło"
|
|
||||||
: " "
|
|
||||||
}}</span>
|
|
||||||
<div class="input"><input type="submit" value="Login" /></div>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="input">
|
||||||
|
<label>Hasło</label>
|
||||||
|
<input type="password">
|
||||||
|
</div>
|
||||||
|
<span style="color: red">{{ statusLog == 1
|
||||||
|
? " "
|
||||||
|
: statusLog == 2
|
||||||
|
? "Niepoprawny login lub hasło"
|
||||||
|
: " "}}</span>
|
||||||
|
<div class="input">
|
||||||
|
<input type="submit" value="Login">
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
@ -1,36 +1,37 @@
|
|||||||
:host {
|
:host {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.input {
|
div.input{
|
||||||
position: relative;
|
position:relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.input label {
|
div.input label {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top:0;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
left: 10px;
|
left:10px;
|
||||||
background: white;
|
background:white;
|
||||||
padding: 5px 2px;
|
padding: 5px 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.input input {
|
div.input input{
|
||||||
padding: 10px 10px;
|
padding:10px 10px;
|
||||||
font-size: 20px;
|
font-size:20px;
|
||||||
outline: 0px;
|
outline: 0px;
|
||||||
}
|
|
||||||
|
}
|
||||||
div {
|
|
||||||
margin-bottom: 15px;
|
div{
|
||||||
}
|
margin-bottom:15px;
|
||||||
|
}
|
||||||
input[type="submit"] {
|
|
||||||
background-color: #0099ff;
|
input[type=submit]{
|
||||||
border: none;
|
background-color: #0099ff;
|
||||||
color: white;
|
border: none;
|
||||||
border-radius: 5px;
|
color: white;
|
||||||
}
|
border-radius: 5px;
|
||||||
|
}
|
@ -1,27 +1,34 @@
|
|||||||
import { Component, OnInit } from "@angular/core";
|
import { Component, OnInit } from '@angular/core';
|
||||||
import { Router } from "@angular/router";
|
import { Router } from '@angular/router';
|
||||||
import { UserService } from "../user.service";
|
import {UserService} from '../user.service';
|
||||||
@Component({
|
@Component({
|
||||||
selector: "app-login",
|
selector: 'app-login',
|
||||||
templateUrl: "./login.component.html",
|
templateUrl: './login.component.html',
|
||||||
styleUrls: ["./login.component.less"]
|
styleUrls: ['./login.component.less']
|
||||||
})
|
})
|
||||||
export class LoginComponent implements OnInit {
|
export class LoginComponent implements OnInit {
|
||||||
constructor(private router: Router, private user: UserService) {}
|
|
||||||
|
constructor(private router: Router, private user:UserService) { }
|
||||||
statusLog = 0;
|
statusLog = 0;
|
||||||
ngOnInit() {}
|
ngOnInit() {
|
||||||
|
}
|
||||||
|
|
||||||
loginUser(e) {
|
loginUser(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
var username = e.target.elements[0].value;
|
var username = e.target.elements[0].value;
|
||||||
var password = e.target.elements[1].value;
|
var password = e.target.elements[1].value;
|
||||||
|
|
||||||
|
if(username == 'admin' && password == 'admin'){
|
||||||
|
this.user.setUserLoggedIn();
|
||||||
|
this.router.navigate(['admin']);
|
||||||
|
this.statusLog=1;
|
||||||
|
|
||||||
if (username == "admin" && password == "admin") {
|
|
||||||
this.user.setUserLoggedIn();
|
|
||||||
this.router.navigate(["admin"]);
|
|
||||||
this.statusLog = 1;
|
|
||||||
} else {
|
|
||||||
this.statusLog = 2;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
else{
|
||||||
|
this.statusLog=2;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -94,7 +94,7 @@
|
|||||||
><span> min</span><br />
|
><span> min</span><br />
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<span>Przewidywane zakończenie: </span>
|
<span>Przewidywane zakończenie za: </span>
|
||||||
<span class="boldMe">10</span
|
<span class="boldMe">10</span
|
||||||
><span> min</span>
|
><span> min</span>
|
||||||
</ul>
|
</ul>
|
||||||
|
@ -110,18 +110,7 @@ table {
|
|||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.room-button:hover {
|
|
||||||
-webkit-box-shadow: inset 0 0 0 2px #24a1fc;
|
|
||||||
box-shadow: inset 0 0 0 2px #24a1fc;
|
|
||||||
}
|
|
||||||
.room-button:active {
|
|
||||||
-webkit-box-shadow: inset 0 0 0 2px #24a1fc;
|
|
||||||
box-shadow: inset 0 0 0 2px #24a1fc;
|
|
||||||
}
|
|
||||||
.room-button:focus {
|
|
||||||
-webkit-box-shadow: inset 0 0 0 2px #24a1fc;
|
|
||||||
box-shadow: inset 0 0 0 2px #24a1fc;
|
|
||||||
}
|
|
||||||
@media only screen and (max-width: 1000px) {
|
@media only screen and (max-width: 1000px) {
|
||||||
.machine-image {
|
.machine-image {
|
||||||
margin-left: 50px;
|
margin-left: 50px;
|
||||||
|
@ -53,17 +53,11 @@ export class StatusListComponent implements OnInit {
|
|||||||
} else {
|
} else {
|
||||||
newStatus = status.splice(0, i);
|
newStatus = status.splice(0, i);
|
||||||
}
|
}
|
||||||
const first = Date.now(); //new Date(newStatus[0].time).getTime();
|
const first = new Date(newStatus[0].time).getTime();
|
||||||
const last = new Date(newStatus[0].time).getTime(); //new Date(newStatus[newStatus.length - 1].time).getTime();
|
const last = new Date(newStatus[newStatus.length - 1].time).getTime();
|
||||||
const time = first - last;
|
const time = first - last;
|
||||||
|
//console.log(this);
|
||||||
this.time = time / 1000;
|
this.time = time / 1000;
|
||||||
if (
|
|
||||||
this.activeDevice.lastStatus == "0" &&
|
|
||||||
this.time < 10000 &&
|
|
||||||
newStatus[1].value == "1"
|
|
||||||
) {
|
|
||||||
this.activeDevice.lastStatus = "1";
|
|
||||||
}
|
|
||||||
//console.log(this.time);
|
//console.log(this.time);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
@ -1,20 +1,21 @@
|
|||||||
import { Injectable } from "@angular/core";
|
import { Injectable } from '@angular/core';
|
||||||
|
|
||||||
@Injectable({
|
@Injectable({
|
||||||
providedIn: "root"
|
providedIn: 'root'
|
||||||
})
|
})
|
||||||
export class UserService {
|
export class UserService {
|
||||||
private isUserLoggedIn;
|
private isUserLoggedIn;
|
||||||
private username;
|
private username;
|
||||||
|
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
this.isUserLoggedIn = false;
|
this.isUserLoggedIn = false;
|
||||||
}
|
}
|
||||||
setUserLoggedIn() {
|
setUserLoggedIn(){
|
||||||
this.isUserLoggedIn = true;
|
this.isUserLoggedIn = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
getUserLoggedIn() {
|
getUserLoggedIn(){
|
||||||
return this.isUserLoggedIn;
|
return this.isUserLoggedIn;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user