Frames

Untitled

0
1
1import { PolymerElement, html } from '@polymer/polymer/polymer-element.js'
2
3// lazy-resources are loaded in the app code
4//import './lazy-resources.js'
5
6import './error-notification.js';
7import './header/forecast-header';
8import './main/weather-days.js';
9import './footer/weather-footer.js';
10import './forecast-data.js';
11
12class WeatherApp extends PolymerElement {
13
14 static get template() {
15 return html`
16 <style>
17
18 :host {
19 display: block;
20
21 /* don't use these directly (except below) */
22 --color-palette-yellow: #ffffd1;
23 --color-palette-brown: #916c25;
24 --color-palette-orange: #ffa800;
25 --color-palette-blue: #0060e8;
26 --color-palette-lightBlue: #84b9ff;
27
28 /* pure black or white can be too hard, use these instead */
29 --color-black: #111;
30 --color-white: #fff;
31 --color-gray--dark: #555;
32 --color-gray: #999;
33 --color-gray--light: #ddd;
34
35 /* main colors */
36 --color-primary: var(--color-palette-lightBlue);
37 --color-secondary: var(--color-palette-yellow);
38 --color-tertiary: #ddd;
39
40 --line-height--tight: 1;
41 --padding-header-footer: 1.2rem;
42
43 }
44
45 div[hidden] {
46 visibility: hidden;
47 }
48
49 error-notification {
50 display: flex;
51 justify-content: center;
52
53 height: 100vh;
54 }
55
56 </style>
57 <weather-analytics key="UA-114081578-1"></weather-analytics>
58
59 <weather-notification
60 forecast-data="[[forecastData]]">
61 </weather-notification>
62
63 <!-- weather now data (observation) -->
64 <observation-data
65 fetch-error="{{observationError}}"
66 observation-data="{{observationData}}"
67 place="[[forecastPlace]]">
68 </observation-data>
69
70 <!-- rest of the data (forecast) -->
71 <forecast-data
72 fetch-error="{{forecastError}}"
73 forecast-data="{{forecastData}}"
74 forecast-place="{{forecastPlace}}"
75 loading="{{loading}}"
76 weather-location="[[weatherLocation]]">
77 </forecast-data>
78
79 <!-- 'Espoo' (or any other city) now-->
80 <paper-toast id="locateError" duration="5000">
81 </paper-toast>
82
83 <template is="dom-if" if="[[forecastError]]">
84 <error-notification
85 error-text="Säätietojen haku epäonnistui"
86 id="errorNotification">
87 </error-notification>
88 </template>
89
90 <template is="dom-if" if="{{!forecastError}}">
91
92 <div hidden\$="[[firstLoading]]">
93 <forecast-header
94 loading="[[loading]]"
95 next-iso-hour="[[nextIsoHour]]"
96 place="[[forecastPlace]]"
97 forecast-data="{{forecastData}}">
98 </forecast-header>
99
100 <observation-modal visible="[[observationVisible]]">
101 <observation-modal-content
102 observation-data="{{observationData}}"
103 observation-error="{{observationError}}">
104 </observation-modal-content>
105 </observation-modal>
106
107 <!-- today, tomorrow and a day after tomorrow -->
108 <main>
109 <weather-days
110 forecast-data="[[forecastData]]"
111 show-wind="[[showWind]]">
112 </weather-days>
113
114 </main>
115
116 <!-- footer -->
117 <weather-footer observation-data="[[observationData]]">
118 </weather-footer>
119
120 </div>
121 </template>
122`;
123 }
124
125 static get is() { return 'weather-app'; }
126
127 static get properties() {
128 return {
129
130 firstLoading: {
131 type: Boolean,
132 value: true
133 },
134
135 nextIsoHour: {
136 type: Number,
137 computed: '_nextIsoHour()'
138 },
139
140 showWind: {
141 type: Boolean,
142 value: false
143 },
144
145 observationVisible: {
146 type: Boolean,
147 value: false
148 },
149
150 weatherLocation: {
151 type: String,
152 }
153 }
154 }
155
156 constructor() {
157 super();
158
159 this.addEventListener('location-selector.location-changed', (event) => this._onNewLocation(event));
160 this.addEventListener('wind-now.toggle-wind', (event) => this._onToggleWind(event));
161
162 this.addEventListener('forecast-data.fetch-done', (event) => {this.firstLoading = false;});
163 this.addEventListener('forecast-header.observation-link-click', (event) => this._toggleObservationVisible());
164 this.addEventListener('observation-header.forecast-link-click', (event) => this._toggleObservationVisible());
165 }
166
167 ready(){
168 super.ready();
169 }
170
171 connectedCallback(){
172 super.connectedCallback();
173
174 this._loadLazyResources();
175 }
176
177 _debugEvent(event) {
178 console.log(event.type, event.detail);
179 }
180
181 _nextFullHour() {
182 let timeNow = new Date();
183
184 timeNow.setHours(timeNow.getHours() + 1);
185 timeNow.setMinutes(0,0,0);
186
187 let nextHour = timeNow.getHours();
188
189 nextHour = nextHour === 0 ? 24 : nextHour;
190
191 return nextHour;
192 }
193
194 _nextIsoHour() {
195 let timeNow = new Date();
196
197 timeNow.setHours(timeNow.getHours() + 1);
198 timeNow.setMinutes(0,0,0);
199
200 return timeNow.toISOString().split('.')[0]+"Z";
201 }
202
203 _onNewLocation(event) {
204 this._debugEvent(event);
205 this.weatherLocation = event.detail;
206 }
207
208 _toggleObservationVisible() {
209 this.observationVisible = !this.observationVisible;
210 }
211
212 /**
213 * Lazy loading don't show stack trace from failing resource.
214 * Comment this lazy import out and import in regular way to see the stack trace
215 */
216 _loadLazyResources() {
217 import('./lazy-resources.js')
218 .catch(error => {
219 console.log('error loading lazy resources: ' + error);
220 });
221 }
222
223 _showError(event) {
224 this.$.locateError.show({text: event.detail.text});
225 }
226
227 _onToggleWind(event) {
228 this._debugEvent(event);
229
230 this.showWind = !this.showWind;
231 }
232}
233
234window.customElements.define(WeatherApp.is, WeatherApp);
235