bootstrap and material design added + grid change

This commit is contained in:
Dawid Kubicki 2019-01-07 16:34:57 +01:00
parent 37f1ed12a7
commit ae91beb640
32 changed files with 177 additions and 18 deletions

3
src/.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
"git.ignoreLimitWarning": true
}

View File

@ -1,2 +1,5 @@
<router-outlet></router-outlet> <div class="container">
<app-status-list> </app-status-list> <router-outlet></router-outlet>
<app-header></app-header>
<app-status-list> </app-status-list>
</div>

View File

@ -5,11 +5,36 @@ import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component"; import { AppComponent } from "./app.component";
import { StatusService } from "./shared/status/status.service"; import { StatusService } from "./shared/status/status.service";
import { HttpClientModule } from "@angular/common/http"; 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 { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import {
MatButtonModule,
MatCardModule,
MatMenuModule,
MatToolbarModule,
MatIconModule,
MatSidenavModule,
MatListModule
} from "@angular/material";
@NgModule({ @NgModule({
declarations: [AppComponent, StatusListComponent], declarations: [AppComponent, StatusListComponent, HeaderComponent],
imports: [BrowserModule, AppRoutingModule, HttpClientModule], imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
BrowserModule,
BrowserAnimationsModule,
HttpClientModule,
MatButtonModule,
MatMenuModule,
MatCardModule,
MatToolbarModule,
MatIconModule,
MatSidenavModule,
MatListModule
],
providers: [StatusService], providers: [StatusService],
bootstrap: [AppComponent] bootstrap: [AppComponent]
}) })

View File

@ -0,0 +1,17 @@
<nav class="navbar">
<div class="row">
<div class="logo col-md-4 col-xs-5">
<a routerLinkActive="/">
<img
src="/assets/img/logo.png"
routerLink="/"
class="logo-img"
alt="logo"
/>
</a>
</div>
<div class="col-md-5 col-xs-5">
<p><span matBadge="4" matBadgeOverlap="false">Status serwerals</span></p>
</div>
</div>
</nav>

View File

@ -0,0 +1,66 @@
.navbar {
margin-top: 30px;
outline: none !important;
.row {
span {
font-size: 20px;
font-weight: 200;
color: #000000;
}
.logo-img {
width: 200px;
margin-top: -1px;
cursor: pointer;
}
.battery-img {
width: 13px;
margin-top: -6px;
position: relative;
}
.battery {
.battery-percent {
position: relative;
display: inline-block;
margin-left: 10px;
}
}
.flag {
outline: none !important;
cursor: pointer;
.flag-img {
width: 28px;
}
.lang-change {
position: relative;
display: inline-block;
outline: none !important;
.active {
border-bottom: 1px solid black;
outline: none !important;
}
span {
font-size: 15px;
font-weight: 300;
color: #000000;
margin-left: 5px;
margin-right: 5px;
outline: none !important;
}
span:hover {
opacity: 0.5;
cursor: pointer;
outline: none !important;
}
}
}
.menu-img {
cursor: pointer;
float: right;
margin-top: 5px;
}
}
}

View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { HeaderComponent } from './header.component';
describe('HeaderComponent', () => {
let component: HeaderComponent;
let fixture: ComponentFixture<HeaderComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ HeaderComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(HeaderComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,12 @@
import { Component, OnInit } from "@angular/core";
@Component({
selector: "app-header",
templateUrl: "./header.component.html",
styleUrls: ["./header.component.less"]
})
export class HeaderComponent implements OnInit {
constructor() {}
ngOnInit() {}
}

View File

@ -8,11 +8,16 @@ import "rxjs/Rx";
}) })
export class StatusService { export class StatusService {
private url_pilkarzyki1 = private url_pilkarzyki1 =
"http://localhost:3000/chillroom-server?ip=http://172.20.10.7"; "http://localhost:3000/chillroom-server?ip=http://192.168.8.106/json";
private url_db = "http://localhost:3000/all";
constructor(private http: HttpClient) {} constructor(private http: HttpClient) {}
getPilkarzyki1(): Observable<any> { getPilkarzyki1(): Observable<any> {
return this.http.get(this.url_pilkarzyki1); return this.http.get(this.url_pilkarzyki1);
} }
getDB(): Observable<any> {
return this.http.get(this.url_db);
}
} }

View File

@ -1,5 +1,5 @@
<h2>Lista urządzeń</h2> <h2>Lista urządzeń</h2>
<div *ngFor="let key of statusesKeys"> <!--<div *ngFor="let key of statusesKeys">
Status: {{ statuses[key] == "1.00" ? "Zajete" : "Wolne" }} Status: {{ statuses[key] == "1.00" ? "Zajete" : "Wolne" }}
</div> </div>-->

View File

@ -9,16 +9,16 @@ import { Time } from "@angular/common";
styleUrls: ["./status-list.component.less"] styleUrls: ["./status-list.component.less"]
}) })
export class StatusListComponent implements OnInit { export class StatusListComponent implements OnInit {
statuses: {} = {}; //statuses: {} = {};
statusesKeys = Object.keys(this.statuses); //statusesKeys = Object.keys(this.statuses);
constructor(private statusService: StatusService) {} constructor(private statusService: StatusService) {}
readSensors = data => { readSensors = data => {
console.log(data); console.log(data);
const parsedData = data.split(","); //const parsedData = data.split(",");
this.statuses = { ...this.statuses, [parsedData[0]]: parsedData[1] }; //this.statuses = { ...this.statuses, [parsedData[0]]: parsedData[1] };
this.statusesKeys = Object.keys(this.statuses); //this.statusesKeys = Object.keys(this.statuses);
//this.statuses = [JSON.parse(data)]; //this.statuses = [JSON.parse(data)];
}; };
@ -27,5 +27,8 @@ export class StatusListComponent implements OnInit {
() => this.statusService.getPilkarzyki1().subscribe(this.readSensors), () => this.statusService.getPilkarzyki1().subscribe(this.readSensors),
1000 1000
); );
this.statusService.getDB().subscribe(data => {
console.log(data);
});
} }
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 158 KiB

BIN
src/assets/img/battery.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 500 B

BIN
src/assets/img/busy.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 692 B

BIN
src/assets/img/dartm.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 727 B

BIN
src/assets/img/flag.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 235 B

BIN
src/assets/img/footb.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 628 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 207 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 207 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 537 KiB

BIN
src/assets/img/football.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 537 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
src/assets/img/free.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/assets/img/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 73 KiB

BIN
src/assets/img/masage 2.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 241 KiB

BIN
src/assets/img/masage.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 241 KiB

BIN
src/assets/img/menu.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 137 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 676 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 202 KiB

View File

@ -1 +1,2 @@
/* You can add global styles to this file, and also import other style files */ /* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";

View File

@ -2,10 +2,9 @@
"extends": "../tsconfig.json", "extends": "../tsconfig.json",
"compilerOptions": { "compilerOptions": {
"outDir": "../out-tsc/app", "outDir": "../out-tsc/app",
"types": [] "types": [],
"experimentalDecorators": true,
"allowJs": true
}, },
"exclude": [ "exclude": ["test.ts", "**/*.spec.ts"]
"test.ts",
"**/*.spec.ts"
]
} }