la meteo

imphilippesimo · May 11, 2017 · 7b44bcc · 7b44bcc
1 parent d175bcd
commit 7b44bcc
Show file tree

Hide file tree

Showing 47 changed files with 142,419 additions and 28 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "vsicons.presets.angular": true
+}
diff --git a/debug.log b/debug.log
@@ -0,0 +1,19 @@
+[0425/100457.581:ERROR:file_io_win.cc(163)] CreateFile C:\Program Files\temp\settings.dat: Acc�s refus�. (0x5)
+[0425/100504.609:ERROR:file_io_win.cc(163)] CreateFile C:\Program Files\temp\settings.dat: Acc�s refus�. (0x5)
+[0425/100504.789:ERROR:registration_protocol_win.cc(83)] TransactNamedPipe: Le canal de communication a �t� ferm�. (0x6D)
+[0425/100507.136:ERROR:crashpad_win.cc(223)] Crashpad handler failed to start, crash reporting disabled
+[0425/101833.779:ERROR:file_io_win.cc(163)] CreateFile C:\Program Files\temp\settings.dat: Acc�s refus�. (0x5)
+[0425/101839.359:ERROR:file_io_win.cc(163)] CreateFile C:\Program Files\temp\settings.dat: Acc�s refus�. (0x5)
+[0425/101840.009:ERROR:registration_protocol_win.cc(83)] TransactNamedPipe: Le canal de communication a �t� ferm�. (0x6D)
+[0425/101847.225:ERROR:crashpad_win.cc(223)] Crashpad handler failed to start, crash reporting disabled
+[0426/150403.733:ERROR:file_io_win.cc(163)] CreateFile C:\Program Files\temp\settings.dat: Acc�s refus�. (0x5)
+[0426/150406.575:ERROR:file_io_win.cc(163)] CreateFile C:\Program Files\temp\settings.dat: Acc�s refus�. (0x5)
+[0426/150406.691:ERROR:registration_protocol_win.cc(83)] TransactNamedPipe: Le canal de communication a �t� ferm�. (0x6D)
+[0426/150411.952:ERROR:crashpad_win.cc(223)] Crashpad handler failed to start, crash reporting disabled
+[0426/174426.183:ERROR:file_io_win.cc(163)] CreateFile C:\Program Files\temp\settings.dat: Acc�s refus�. (0x5)
+[0426/174440.145:ERROR:file_io_win.cc(163)] CreateFile C:\Program Files\temp\settings.dat: Acc�s refus�. (0x5)
+[0426/174440.849:ERROR:registration_protocol_win.cc(83)] TransactNamedPipe: Le canal de communication a �t� ferm�. (0x6D)
+[0426/174501.826:ERROR:crashpad_win.cc(223)] Crashpad handler failed to start, crash reporting disabled
+[0427/142250.806:ERROR:file_io_win.cc(163)] CreateFile C:\Program Files\temp\settings.dat: Acc�s refus�. (0x5)
+[0427/142256.620:ERROR:registration_protocol_win.cc(83)] TransactNamedPipe: Le canal de communication a �t� ferm�. (0x6D)
+[0427/142256.637:ERROR:crashpad_win.cc(223)] Crashpad handler failed to start, crash reporting disabled
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -17,6 +17,11 @@ import { Locations } from '../providers/locations';
 import { GoogleMaps } from '../providers/google-maps';
 import { Connectivity } from '../providers/connectivity';
 
+// les modules de la meteo
+import {WeatherService} from '../providers/WeatherService';
+import {ChartComponent} from '../components/ChartComponent';
+// fin des modules de lameteo
+
 @NgModule({
 
   imports: [
@@ -44,6 +49,7 @@ import { Connectivity } from '../providers/connectivity';
     ChatsPage,
     MapsPage,
     MeteoPage,
+    ChartComponent
 
   ],
   bootstrap: [IonicApp],
@@ -62,7 +68,7 @@ import { Connectivity } from '../providers/connectivity';
 
 
   ],
-  providers: [AuthService, Locations, GoogleMaps, Connectivity],
+  providers: [AuthService, Locations, GoogleMaps, Connectivity, WeatherService],
 
 })
 export class AppModule {}
diff --git a/src/components/ChartComponent.ts b/src/components/ChartComponent.ts
@@ -0,0 +1,88 @@
+import { Component} from '@angular/core';
+import { Directive, ElementRef, Input , OnDestroy, OnInit, OnChanges} from '@angular/core';
+
+declare var Chart:any;
+
+@Component({
+  selector: 'line-chart',
+  template: `<canvas width="400" height="250"></canvas>`
+})
+
+/**
+* Chart component
+*/
+export class ChartComponent implements  OnChanges, OnInit, OnDestroy{
+    // les heures en abscisse du graphique
+  @Input() labels: string[];
+
+  // les températures en ordonnées
+  @Input() data: number[];
+
+  private el:ElementRef;
+  private canvas:any;
+  private chart:any;
+
+  public constructor(el: ElementRef){
+    this.el = el;
+  }
+
+  public ngOnInit(){
+    this.canvas = this.el.nativeElement.children[0];
+  }
+
+  public ngOnChanges(){
+    if(this.data && this.labels){
+      this._createGraph();
+    }
+  }
+
+  public ngOnDestroy(){
+    if(this.chart){
+      this.chart.destroy();
+      this.chart=null;
+    }
+  }
+
+   private _createGraph(){
+    let line = this._constructLineChart(this.data);
+    line.data.datasets[0].data = this.data;
+    line.data.labels = this.labels;
+
+    this.chart = new Chart(this.canvas, line)
+  }
+
+  private _constructLineChart(datas:number[]){
+    return {
+      type: 'line',
+      data: {
+          labels: [],
+          datasets: [{
+              label: 'temp.',
+              data:  [],
+              borderColor: "rgba(75,192,192,1)",
+              backgroundColor:'#e3f2fd',
+              borderWidth:1
+          }]
+      },
+      options:{
+        scales:{
+          yAxes:[{
+            ticks:{
+              max:Math.max.apply(Math, datas)+1,
+              min:Math.min.apply(Math, datas)-1
+            },
+            gridLines: {
+                display:true
+            }
+          }],
+          xAxes:[{
+            gridLines: {
+                display:false
+            }
+          }]
+        }
+      }
+    };
+  }
+
+}
diff --git a/src/entities/DailyForecast.ts b/src/entities/DailyForecast.ts
@@ -0,0 +1,6 @@
+export class DailyForecast{
+  public date:Date;
+  public maxTemp: number;
+  public minTemp: number;
+  public icon:string;
+}
diff --git a/src/entities/HourForecast.ts b/src/entities/HourForecast.ts
@@ -0,0 +1,4 @@
+export class HourForecast{
+  public hour:number;
+  public temp: number;
+}
diff --git a/src/index.html b/src/index.html
@@ -24,6 +24,7 @@
   </script>-->
 
   <link href="build/main.css" rel="stylesheet">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.js"></script>
 
 </head>
 <body>

diff --git a/src/pages/meteo/meteo.html b/src/pages/meteo/meteo.html
@@ -1,19 +1,45 @@
-<!--
-  Generated template for the Meteo page.
-
-  See http://ionicframework.com/docs/v2/components/#navigation for more info on
-  Ionic pages and navigation.
--->
-<!--<ion-header>-->
-
-  <!--<ion-navbar>-->
-    <!--<ion-title>meteo</ion-title>-->
-  <!--</ion-navbar>-->
-
-<!--</ion-header>-->
-
-
+<ion-header>
+  <ion-navbar color="Meteo">
+    <ion-title>Meteo</ion-title>
+  </ion-navbar>
+</ion-header>
+
 <ion-content padding>
-  <h1>Meteo</h1>
-
+  <div *ngIf="currentWeather" class="current">
+    <ion-grid>
+      <ion-row center>
+        <ion-col width-33>
+          <h2 myred>{{citySelected | uppercase}}</h2>
+          <p>{{currentWeatherDate | date:'EEEE HH:mm'}}</p>
+        </ion-col>
+        <ion-col width-33 text-center>
+          <h3>{{currentWeather}}°</h3>
+        </ion-col>
+        <ion-col width-33 text-center>
+          <img src="http://openweathermap.org/img/w/{{currentWeatherIcon}}.png">
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+  </div>
+
+  <line-chart class="line-chart" [data] = "temp" [labels] = "hours"></line-chart>
+
+  <div class="daily-weather" *ngFor="let day of dailyForecast">
+    <div>{{day.date | date:'EE'}}</div>
+    <img src="http://openweathermap.org/img/w/{{day.icon}}.png">
+    <div class="temp-max">{{day.maxTemp}}°</div>
+    <div class="temp-min">{{day.minTemp}}°</div>
+  </div>
 </ion-content>
+
+<ion-footer>
+  <ion-toolbar position="bottom" myblue>
+    <ion-item>
+      <ion-input #city type="text" placeholder="Ville"></ion-input>
+        <button ion-button outline item-right icon-left (click) = "getCity(city.value)">
+          <ion-icon name="search"></ion-icon>
+          Rechercher
+        </button>
+      </ion-item>
+    </ion-toolbar>
+</ion-footer>
diff --git a/src/pages/meteo/meteo.scss b/src/pages/meteo/meteo.scss
@@ -1,3 +1,61 @@
-page-meteo {
-
+.line-chart {
+  display: block;
+  width: 100%;
+  margin-top: 30px;
+}
+
+.current-weather{
+  display: inline-block;
+  font-size: 2em;
+  margin:0px;
+}
+
+.current{
+  padding: 0px;
+  box-shadow: 0px 2px 7px grey;
+
+  h2{
+    font-size: 1.7rem;
+    font-weight: bold;
+  }
+
+  h3{
+    font-size: 1.8rem;
+    font-weight: bold;
+    display: inline-block;
+    color: white;
+    border-radius: 100%;
+    padding: 10px;
+
+    background-color: color($colors, myblue);
+  }
+
+  img{
+    max-width: 6rem;
+    max-height: 10rem;
+    float: right;
+  }
+}
+.area-current > div{
+  border: 0px;
+}
+
+.daily-weather{
+  text-align: center;
+  margin-top: 20px;
+  display: inline-block;
+  padding: 5px;
+
+  img{
+    max-width: 3.5rem;
+  }
+
+  .temp-max{
+    border-bottom: 1px solid black;
+    color: #ff5252;
+  }
+
+  .temp-min{
+    color: #1976d2;
+  }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,6 +24,7 @@ @@
       </script>-->
       <link href="build/main.css" rel="stylesheet">
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.js"></script>
     </head>
     <body>
@@ Expand Down @@