This repository has been archived by the owner on May 20, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 31
/
page-about.tsx
131 lines (109 loc) · 4.61 KB
/
page-about.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
import { Component, State, h } from '@stencil/core';
import { popoverController } from '@ionic/core';
@Component({
tag: 'page-about',
styleUrl: 'page-about.css',
})
export class PageAbout {
selectOptions = {
header: 'Select a Location'
};
@State() conferenceDate = '2047-05-17T00:00:00-05:00';
@State() location = 'madison';
selectChanged(event: any) {
this.location = event.detail.value;
}
datetimeChanged(event: any) {
this.conferenceDate = event.detail.value;
}
// momentjs would be a better way to do this https://momentjs.com/
displayDate(date: string, format: string) {
const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
const d = new Date(date);
const year = d.getFullYear();
if (format === 'y') {
return year;
} else {
const month = monthNames[d.getMonth()];
const day = d.getDate();
return month + ' ' + day + ', ' + year;
}
}
async presentPopover(event: any) {
const popover = await popoverController.create({
component: 'page-about-popover',
event
});
popover.present();
}
render() {
return [
<ion-content>
<ion-header class="ion-no-border">
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-button onClick={this.presentPopover.bind(this)}>
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<div class="about-header">
{/* Instead of loading an image each time the select changes, use opacity to transition them */}
<div class="about-image madison" style={{ opacity: this.location === 'madison' ? '1' : null }}></div>
<div class="about-image austin" style={{ opacity: this.location === 'austin' ? '1' : null }}></div>
<div class="about-image chicago" style={{ opacity: this.location === 'chicago' ? '1' : null }}></div>
<div class="about-image seattle" style={{ opacity: this.location === 'seattle' ? '1' : null }}></div>
</div>
<div class="about-info">
<h3 class="ion-padding-top ion-padding-start">About</h3>
<p class="ion-padding-start ion-padding-end">
The Ionic Conference is a one-day conference on { this.displayDate(this.conferenceDate, 'mediumDate') } featuring talks from the Ionic team. It is focused on Ionic applications being built with Ionic Framework. This includes migrating apps to the latest version of the framework, Angular concepts, Webpack, Sass, and many other technologies used in Ionic 2. Tickets are completely sold out, and we’re expecting more than 1000 developers – making this the largest Ionic conference ever!
</p>
<h3 class="ion-padding-top ion-padding-start">Details</h3>
<ion-list lines="none">
<ion-item>
<ion-label>
Location
</ion-label>
<ion-select value={this.location} interfaceOptions={this.selectOptions} onIonChange={(ev) => this.selectChanged(ev)}>
<ion-select-option value="madison">Madison, WI</ion-select-option>
<ion-select-option value="austin">Austin, TX</ion-select-option>
<ion-select-option value="chicago">Chicago, IL</ion-select-option>
<ion-select-option value="seattle">Seattle, WA</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>
Date
</ion-label>
<ion-datetime displayFormat="MMM DD, YYYY" max="2056" value={this.conferenceDate} onIonChange={(ev) => this.datetimeChanged(ev)}></ion-datetime>
</ion-item>
</ion-list>
<h3 class="ion-padding-top ion-padding-start">Internet</h3>
<ion-list lines="none">
<ion-item>
<ion-label>
Wifi network
</ion-label>
<ion-label class="ion-text-end">
ica{ this.displayDate(this.conferenceDate, 'y') }
</ion-label>
</ion-item>
<ion-item>
<ion-label>
Password
</ion-label>
<ion-label class="ion-text-end">
makegoodthings
</ion-label>
</ion-item>
</ion-list>
</div>
</ion-content>
];
}
}