added plugins to dashboard

angular.json

@@ -38,11 +38,11 @@
             "scripts": [
               "node_modules/jquery/dist/jquery.js",
               "node_modules/popper.js/dist/umd/popper.js",
-              "node_modules/bootstrap-material-design/dist/js/bootstrap-material-design.min.js",
               "node_modules/arrive/src/arrive.js",
               "node_modules/moment/moment.js",
               "node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js",
-              "node_modules/datatables.net/js/jquery.dataTables.js"
+              "node_modules/datatables.net/js/jquery.dataTables.js",
+              "node_modules/bootstrap-material-design/dist/js/bootstrap-material-design.min.js",
             ]
           },
           "configurations": {
@@ -116,11 +116,12 @@
             "scripts": [
               "node_modules/jquery/dist/jquery.js",
               "node_modules/popper.js/dist/umd/popper.js",
-              "node_modules/bootstrap-material-design/dist/js/bootstrap-material-design.min.js",
               "node_modules/arrive/src/arrive.js",
               "node_modules/moment/moment.js",
               "node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js",
-              "node_modules/datatables.net/js/jquery.dataTables.js"
+              "node_modules/datatables.net/js/jquery.dataTables.js",
+              "node_modules/chart.js/src/chart.js",
+              "node_modules/bootstrap-material-design/dist/js/bootstrap-material-design.min.js",
             ]
           }
         },

package-lock.json

@@ -7076,9 +7076,9 @@
       "dev": true
     },
     "ng2-charts": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/ng2-charts/-/ng2-charts-2.2.4.tgz",
-      "integrity": "sha512-rUT/bBs70S4nbzrrPKaafCDhcPccWp0X9j8kw7Ppjzz5UAdeeI54yT21qrhjjAPqhnLEj4F2C8t8y9WzmGzcQQ==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/ng2-charts/-/ng2-charts-2.3.0.tgz",
+      "integrity": "sha512-D5K7OqF0m5lOBYvNOsraoEo4OPHja9zfGNj+HWy2nUcP0LP2s+Y/QaQlkG/1rHlwXq9HPm8rLxzSutA0eLHxGQ==",
       "requires": {
         "@types/chart.js": "^2.7.48",
         "lodash": "^4.17.11",

package.json

@@ -40,7 +40,7 @@
     "leaflet": "^1.5.1",
     "leaflet-routing-machine": "^3.2.12",
     "moment": "^2.24.0",
-    "ng2-charts": "^2.2.4",
+    "ng2-charts": "^2.3.0",
     "ngx-bootstrap": "^5.1.1",
     "perfect-scrollbar": "^1.4.0",
     "popper.js": "^1.15.0",

src/app/app.module.ts

@@ -4,8 +4,14 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { registerLocaleData } from '@angular/common';
 import { RouterModule } from '@angular/router';
 
+// Internationalization i18n
+import localeEs from '@angular/common/locales/es';
+import localeEsExtra from '@angular/common/locales/extra/es';
+registerLocaleData(localeEs, 'es-Es', localeEsExtra);
+
 // used to create fake backend
 import { fakeBackendProvider } from './helpers';
 import { JwtInterceptor, ErrorInterceptor } from './helpers';
@@ -14,13 +20,14 @@ import { JwtInterceptor, ErrorInterceptor } from './helpers';
 import { AppRoutingModule } from './app.routing';
 import { AppComponent } from './app.component';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { ChartsModule } from 'ng2-charts';
 import { SharedModule } from './components/shared/shared.module';
+
 import { AdminComponent } from './layouts/admin/admin.component';
 
 
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 
-import { MDBBootstrapModule } from 'angular-bootstrap-md';
 //import { DashboardComponent } from './dashboard/dashboard.component';
 //import { AgmCoreModule } from '@agm/core';
 import { PluginsModule } from './components/plugins/plugins.module';
@@ -39,6 +46,7 @@ import { AuthenticationService } from './services/authentication.service';
   imports: [
     BrowserModule,
     NgbModule,
+    ChartsModule,
     BrowserAnimationsModule,
     FormsModule,
     ReactiveFormsModule,
@@ -48,7 +56,6 @@ import { AuthenticationService } from './services/authentication.service';
     AppRoutingModule,
     PluginsModule,
     NgxDatatableModule,
-    MDBBootstrapModule.forRoot(),
   ],
   providers: [
     { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },

src/app/components/dashboard/dashboard.component.html

@@ -1,16 +1,13 @@
 <div class="main-content">
   <div class="container-fluid">
     <div class="row">
-      <div class="col-lg-6 col-md-6 col-sm-12">
+      <div class="col-lg-6 col-md-6 col-sm-6">
         <div class="row">
 
           <div class="col-lg-6 col-md-6 col-sm-6">
             <div class="widget">
-							<div class="widget-controls">
-								<span class="refresh-content"><i class="fa fa-bolt"></i></span>
-							</div><!-- Widget Controls -->
 							<div class="mini-stats ">
-								<span class="yellow-skin"><i class="fa fa-bolt"></i></span>
+								<span class="sky-skin"><i class="fa fa-bolt"></i></span>
 								<p>Capacidad instalada</p>
 								<h3>
                   369.6
@@ -22,11 +19,8 @@
 
           <div class="col-lg-6 col-md-6 col-sm-6">
             <div class="widget">
-							<div class="widget-controls">
-								<span class="refresh-content"><i class="fa fa-bolt"></i></span>
-							</div><!-- Widget Controls -->
 							<div class="mini-stats ">
-								<span class="yellow-skin"><i class="fa fa-bolt"></i></span>
+								<span class="dark-yellow-skin"><i class="fa fa-bolt"></i></span>
 								<p>Ultimos 365 días</p>
                 <h3>
                   270.83
@@ -36,13 +30,8 @@
 						</div>
           </div>
 
-
-
           <div class="col-lg-6 col-md-6 col-sm-6">
             <div class="widget">
-							<div class="widget-controls">
-								<span class="refresh-content"><i class="fa fa-bolt"></i></span>
-							</div><!-- Widget Controls -->
 							<div class="mini-stats ">
 								<span class="yellow-skin"><i class="fa fa-bolt"></i></span>
 								<p>Ultimos 30 días</p>
@@ -54,13 +43,32 @@
 						</div>
           </div>
 
+          <div class="col-lg-6 col-md-6 col-sm-6">
+            <div class="widget">
+              <div class="mini-stats ">
+                <span class="cream-skin"><i class="fa fa-bolt"></i></span>
+                <p>Ultimos 24 horas</p>
+                <h3>
+                  1.55
+                  <small>MWh</small>
+                </h3>
+              </div>
+            </div>
+          </div>
+        </div>
+        <br>
+        <div class="row">
+          <div class="col-lg-12">
+            <app-weather-card></app-weather-card>
+          </div>
+        </div>
       </div>
       <div class="col-lg-6 col-md-6 col-sm-12">
         Grafico
       </div>
     </div>
   </div>
-
+  <br>
   <div class="d-none d-md-block">
     <app-plants-datatables></app-plants-datatables>
   </div>
@@ -72,7 +80,6 @@
 
   <app-maps></app-maps>
 
-
 </div>
 
 

src/app/components/dashboard/dashboard.component.scss

@@ -36,7 +36,7 @@ agm-map {
     background: #ffffff none repeat scroll 0 0;
     border-radius: 5px;
     float: left;
-    padding: 25px 30px;
+    padding: 15px 20px;
     position: relative;
     width: 100%;
 
@@ -65,21 +65,5 @@ agm-map {
     h3 {
       margin: 0;
     }
-
-    .sky-skin {
-      background-color: #63d6ff;
-      border-color: #28c4fc !important;
-    }
-
-    .yellow-skin {
-      background-color: #fea11d;
-      border-color: #e58d12;
-    }
-
-    .red-skin {
-      background-color: #ff6b6b;
-      border-color: #ff6262 !important;
-    }
-
   }
 }

src/app/components/plugins/plugins.module.ts

@@ -20,6 +20,7 @@ import {
 } from '@angular/material';
 import {  } from '@angular/material/table';
 import { PlantsDatatablesComponent } from './plants-datatables/plants-datatables.component';
+import { WeatherCardComponent } from './weather-card/weather-card.component';
 
 /*import { BoxModule } from "angular-admin-lte";
 import { LineChartComponent } from "./line-chart/line-chart.component";
@@ -40,6 +41,7 @@ export const MQTT_SERVICE_OPTIONS: IMqttServiceOptions = {
     PlantDetailComponent,
     PlantsStatusComponent,
     PlantsDatatablesComponent,
+    WeatherCardComponent,
   ],
   imports: [
     CommonModule,
@@ -61,6 +63,7 @@ export const MQTT_SERVICE_OPTIONS: IMqttServiceOptions = {
     PlantDetailComponent,
     PlantsStatusComponent,
     PlantsDatatablesComponent,
+    WeatherCardComponent,
   ]
 })
 export class PluginsModule {}

src/app/components/plugins/weather-card/weather-card.component.html

@@ -0,0 +1,21 @@
+<div class="widget">
+  <div class="row">
+    <div class="col-lg-6 col-md-6 col-xs-12">
+      <div class="date">
+        {{currentDate}}
+      </div>
+      <div class="city">
+          San Salvador
+      </div>
+      <div class="date">
+        Parcialmente nublado
+      </div>
+    </div>
+    <div class="col-lg-6 col-md-6 col-xs-12">
+      <div class="temp">
+         <img src="https://s5.postimg.cc/yzcm7htyb/image.png" alt="" width="60">
+         27&deg;
+      </div>
+    </div>
+  </div>
+</div>

src/app/components/plugins/weather-card/weather-card.component.scss

@@ -0,0 +1,49 @@
+div.widget
+{
+  position: relative;
+  width: 100%;
+  //margin: 150px auto;
+  background-color: #fcfdfd;
+  border-radius: 9px;
+  padding: 15px 20px;
+  box-shadow: 0px 31px 35px -26px #080c21;
+}
+
+div.date
+{
+  font-size: .9em;
+  font-weight: bold;
+  color: rgba(0,0,0,0.5);
+}
+
+div.city
+{
+  font-size: 1.3em;
+  font-weight: bold;
+  text-transform: uppercase;
+  padding-top: 5px;
+  color: #000;
+  margin: 5px 0 10px;
+}
+
+div.temp
+{
+  font-size: 5em;
+  color: rgba(0,0,0,0.9);
+  font-weight: 400;
+  padding: 10px;
+}
+
+div.panel
+{
+  display: inline-block;
+}
+
+div.right-panel
+{
+  position: absolute;
+  float: right;
+  top: 0;
+  margin-top: 35px;
+  padding-left: 10px;
+}

src/app/components/plugins/weather-card/weather-card.component.spec.ts

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

src/app/components/plugins/weather-card/weather-card.component.ts

@@ -0,0 +1,52 @@
+import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
+import {Router} from '@angular/router';
+import {DatePipe} from '@angular/common';
+
+import { WeatherService } from 'src/app/services/weather.service';
+import { Subscription } from 'rxjs';
+import {first} from 'rxjs/operators';
+
+@Component({
+  selector: 'app-weather-card',
+  templateUrl: './weather-card.component.html',
+  styleUrls: ['./weather-card.component.scss']
+})
+
+export class WeatherCardComponent implements OnInit {
+  listData: any;
+  citesWeather: Object;
+  darkMode: boolean;
+  sub1: Subscription;
+  state: string;
+  temp: number;
+  maxTemp: number;
+  minTemp: number;
+  errorMessage: string;
+  cityName;
+  cityAdded = false;
+
+  pipe = new DatePipe('es-ES')
+  newDate = Date.now();
+  currentDate = this.pipe.transform(this.newDate, 'fullDate')
+
+  constructor(public weather: WeatherService, public router: Router) {
+
+  }
+
+  ngOnInit() {
+    this.weather.getWeather("San%20Salvador")
+         .pipe(first())
+         .subscribe((payload) => {
+           this.state = payload.weather[0].main;
+           this.temp = Math.ceil(payload.main.temp);
+           console.log(payload);
+         }, (err) => {
+           this.errorMessage = err.error.message;
+           setTimeout(() => {
+             this.errorMessage = '';
+           }, 3000);
+         });
+
+  }
+
+}

src/app/components/shared/navbar/navbar.component.ts

@@ -154,7 +154,6 @@ export class NavbarComponent implements OnInit {
       }
 
       for(var item = 0; item < this.leTitles.length; item++){
-        console.log(this.leTitles[1].path);
 
         if("/"+this.leTitles[item].path === titlee){
           return this.leTitles[item].data['title'];

src/app/layouts/admin/admin.routing.ts

@@ -17,7 +17,7 @@ export const AdminLayoutRoutes: Routes = [
   },
   { path: 'profile',
     component: ProfileComponent,
-    data: {title: "Perfile de usuario"}
+    data: {title: "Perfil de usuario"}
   }
   /*
   { path: 'table-list',     component: TableListComponent },

src/app/services/weather.service.ts

@@ -0,0 +1,46 @@
+import {Injectable} from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+import {Observable} from 'rxjs';
+import {environment} from '@environments/environment';
+import {first, map} from 'rxjs/operators';
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class WeatherService {
+
+  private readonly baseURL = 'https://api.openweathermap.org/data/2.5/weather?q=';
+  private readonly forcastURL = 'https://api.openweathermap.org/data/2.5/forecast?q=';
+  private readonly appID = environment.appID;
+
+  constructor(public http: HttpClient) {
+  }
+
+  getWeather(city: string, metric: 'metric' | 'imperial' = 'metric'): Observable<any> {
+    return this.http.get(
+      `${this.baseURL}${city}&units=${metric}&APPID=${this.appID}&lang=ES`).pipe();
+  }
+
+  getForecast(city: string, metric: 'metric' | 'imperial' = 'metric'): Observable<any> {
+    return this.http.get(
+      `${this.forcastURL}${city}&units=${metric}&APPID=${this.appID}`)
+      .pipe(first(), map((weather) => weather['list']));
+  }
+
+  // [0].main
+  // getWeatherState
+  //
+  // getCurrentTemp
+  // Math.round(Number(weather.main.temp))
+  //
+  //
+  // getCurrentHum
+  // weather.main.humidity
+  //
+  //
+  // getCurrentWind
+  // Math.round(Math.round(weather.wind.speed))
+
+
+}

src/assets/scss/core/_sidebar-and-main-panel.scss

@@ -411,7 +411,7 @@
 
      .main-content{
         margin-top: 70px;
-        padding: 30px 15px;
+        padding: 20px 10px;
         min-height: calc(100vh - 123px);
     }
 

src/assets/scss/core/variables/_colors.scss

@@ -323,3 +323,10 @@ $gray:                   lighten($gray-base, 33.5%) !default; // #555
 $gray-light:             #999999 !default; // #999999
 $gray-lighter:           lighten($gray-base, 93.5%) !default; // #eee
 $gray-custom:            #80888f !default;
+
+
+$palette-blue:          #0d3b66;
+$palette-cream:         #faf0ca;
+$palette-yellow:        #fad35e;
+$palette-dark-yellow:   #ee964b;
+$palette-orange:        #f95738;

src/assets/scss/material-dashboard.scss

@@ -56,3 +56,23 @@
  @import "core/responsive";
 
 @import "core/angular-modal.scss";
+
+.sky-skin {
+  background-color: $palette-blue;
+  border-color: #0b2338 !important;
+}
+
+.cream-skin {
+  background-color: $palette-cream;
+  border-color: #fdeaa7;
+}
+
+.yellow-skin {
+  background-color: $palette-yellow;
+  border-color: #eeba0d !important;
+}
+
+.dark-yellow-skin {
+  background-color: $palette-dark-yellow;
+  border-color: #cf6a14 !important;
+}

src/environments/environment.ts

@@ -4,7 +4,17 @@
 
 export const environment = {
     production: false,
-    apiUrl: 'http://localhost:4000'
+    apiUrl: 'http://localhost:4000',
+    appID: '55899b9ea53834f2736b65a3582b734b',
+    gKey: '',
+    config: {
+      apiKey: '',
+      authDomain: '',
+      databaseURL: '',
+      projectId: '',
+      storageBucket: '',
+      messagingSenderId: ''
+    }
 };
 
 /*