Skip to content

Commit

Permalink
copy ionic-angular example from vercel/vercel (#1017)
Browse files Browse the repository at this point in the history
erikareads authored Jan 13, 2025

Verified

This commit was signed with the committer’s verified signature.
btschwertfeger Benjamin T. Schwertfeger
1 parent 13dfd50 commit 2dbceba
Showing 205 changed files with 14,926 additions and 0 deletions.
13 changes: 13 additions & 0 deletions framework-boilerplates/ionic-angular/.editorconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
# Editor configuration, see http://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
max_line_length = off
trim_trailing_whitespace = false
5 changes: 5 additions & 0 deletions framework-boilerplates/ionic-angular/.firebaserc
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"projects": {
"default": "ionic-ng-conf-app"
}
}
37 changes: 37 additions & 0 deletions framework-boilerplates/ionic-angular/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
# Specifies intentionally untracked files to ignore when using Git
# http://git-scm.com/docs/gitignore
www/

*~
*.sw[mnpcod]
*.log
*.tmp
*.tmp.*
log.txt
*.sublime-project
*.sublime-workspace
.vscode/
npm-debug.log*
.firebase/
.idea/
.sourcemaps/
.sass-cache/
.tmp/
.versions/
coverage/
dist/
node_modules/
tmp/
temp/
hooks/
platforms/
plugins/
plugins/android.json
plugins/ios.json
$RECYCLE.BIN/

.DS_Store
Thumbs.db
UserInterfaceState.xcuserstate

.vercel
202 changes: 202 additions & 0 deletions framework-boilerplates/ionic-angular/LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,202 @@

Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/

TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION

1. Definitions.

"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.

"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.

"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.

"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.

"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.

"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.

"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).

"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.

"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."

"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.

2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.

3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.

4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:

(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and

(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and

(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and

(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.

You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.

5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.

6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.

7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.

8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.

9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.

END OF TERMS AND CONDITIONS

APPENDIX: How to apply the Apache License to your work.

To apply the Apache License to your work, attach the following
boilerplate notice, with the fields enclosed by brackets "[]"
replaced with your own identifying information. (Don't include
the brackets!) The text should be enclosed in the appropriate
comment syntax for the file format. We also recommend that a
file or class name and description of purpose be included on the
same "printed page" as the copyright notice for easier
identification within third-party archives.

Copyright 2015 Drifty Co.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
19 changes: 19 additions & 0 deletions framework-boilerplates/ionic-angular/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
# Ionic Angular Example

This directory is a brief example of an [Ionic Angular](https://ionicframework.com/docs/angular/overview) app that can be deployed to Vercel with zero configuration

## Deploy Your Own

Deploy your own Ionic Angular project with Vercel.

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/examples/tree/main/framework-boilerplates/ionic-angular&template=ionic-angular)

_Live Example: https://ionic-angular-template.vercel.app_

### How We Created This Example

To get started with Ionic Angular deployed with Vercel, you can use the [Ionic CLI](https://ionicframework.com/docs/cli) to initialize the project:

```shell
$ npx @ionic/cli start [project-name] conference --type angular && cd [project-name]
```
196 changes: 196 additions & 0 deletions framework-boilerplates/ionic-angular/angular.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,196 @@
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"defaultProject": "app",
"newProjectRoot": "projects",
"projects": {
"app": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "www",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
},
{
"glob": "**/*.svg",
"input": "node_modules/ionicons/dist/ionicons/svg",
"output": "./svg"
}
],
"styles": [
{
"input": "src/theme/variables.scss"
},
{
"input": "src/global.scss"
}
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"serviceWorker": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
},
"ci": {
"progress": false
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "app:build",
"disableHostCheck": true
},
"configurations": {
"production": {
"browserTarget": "app:build:production"
},
"ci": {
"progress": false
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "app:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
{
"input": "src/theme/variables.scss"
},
{
"input": "src/global.scss"
}
],
"scripts": [],
"assets": [
{
"glob": "favicon.ico",
"input": "src/",
"output": "/"
},
{
"glob": "**/*",
"input": "src/assets",
"output": "/assets"
}
]
},
"configurations": {
"ci": {
"progress": false,
"watch": false
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": ["**/node_modules/**"]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "app:serve"
},
"configurations": {
"production": {
"devServerTarget": "app:serve:production"
},
"ci": {
"devServerTarget": "app:serve:ci"
}
}
},
"ionic-cordova-build": {
"builder": "@ionic/angular-toolkit:cordova-build",
"options": {
"browserTarget": "app:build"
},
"configurations": {
"production": {
"browserTarget": "app:build:production"
}
}
},
"ionic-cordova-serve": {
"builder": "@ionic/angular-toolkit:cordova-serve",
"options": {
"cordovaBuildTarget": "app:ionic-cordova-build",
"devServerTarget": "app:serve"
},
"configurations": {
"production": {
"cordovaBuildTarget": "app:ionic-cordova-build:production",
"devServerTarget": "app:serve:production"
}
}
}
}
}
},
"cli": {
"defaultCollection": "@ionic/angular-toolkit"
},
"schematics": {
"@ionic/angular-toolkit:component": {
"styleext": "scss"
},
"@ionic/angular-toolkit:page": {
"styleext": "scss"
}
}
}
12 changes: 12 additions & 0 deletions framework-boilerplates/ionic-angular/browserslist
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries

# You can see what browsers were selected by your queries by running:
# npx browserslist

> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11 # For IE 9-11 support, remove 'not'.
88 changes: 88 additions & 0 deletions framework-boilerplates/ionic-angular/config.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.ionicframework.conferenceapp" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>Ionic Conference App</name>
<description>Schedule, speakers, venue.</description>
<author email="hi@ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author>
<content src="index.html" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<preference name="ScrollEnabled" value="false" />
<preference name="android-minSdkVersion" value="19" />
<preference name="BackupWebStorage" value="none" />
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />
<platform name="android">
<allow-intent href="market:*" />
<icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
<icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
<icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
<icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
<icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
<icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
<splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
<splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
<splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
<splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
<splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
<splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
<splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
<splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
<splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
<splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
<splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
<splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
<icon height="57" src="resources/ios/icon/icon.png" width="57" />
<icon height="114" src="resources/ios/icon/icon@2x.png" width="114" />
<icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
<icon height="80" src="resources/ios/icon/icon-40@2x.png" width="80" />
<icon height="120" src="resources/ios/icon/icon-40@3x.png" width="120" />
<icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
<icon height="100" src="resources/ios/icon/icon-50@2x.png" width="100" />
<icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
<icon height="120" src="resources/ios/icon/icon-60@2x.png" width="120" />
<icon height="180" src="resources/ios/icon/icon-60@3x.png" width="180" />
<icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
<icon height="144" src="resources/ios/icon/icon-72@2x.png" width="144" />
<icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
<icon height="152" src="resources/ios/icon/icon-76@2x.png" width="152" />
<icon height="167" src="resources/ios/icon/icon-83.5@2x.png" width="167" />
<icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
<icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" />
<icon height="87" src="resources/ios/icon/icon-small@3x.png" width="87" />
<icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" />
<splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
<splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
<splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
<splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
<splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" />
<splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" />
<splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" />
<splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
<splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" />
<splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
<splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
<splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
<splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" />
</platform>
<plugin name="cordova-plugin-device" spec="^2.0.2" />
<plugin name="cordova-plugin-inappbrowser" spec="^3.0.0" />
<plugin name="cordova-plugin-splashscreen" spec="^5.0.2" />
<plugin name="cordova-plugin-whitelist" spec="^1.3.2" />
<plugin name="cordova-plugin-ionic-webview" spec="2.0.0-beta.1" />
<plugin name="cordova-plugin-statusbar" spec="^2.4.2" />
<plugin name="cordova-plugin-ionic-keyboard" spec="^2.1.2" />
<engine name="ios" spec="^4.5.5" />
<engine name="android" spec="7.0.0" />
</widget>
11 changes: 11 additions & 0 deletions framework-boilerplates/ionic-angular/e2e/protractor-ci.conf.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
const config = require('./protractor.conf').config;

config.capabilities = {
browserName: 'chrome',
chromeOptions: {
args: ['--headless', '--no-sandbox', '--disable-gpu'],
binary: require('puppeteer').executablePath(),
},
};

exports.config = config;
28 changes: 28 additions & 0 deletions framework-boilerplates/ionic-angular/e2e/protractor.conf.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts

const { SpecReporter } = require('jasmine-spec-reporter');

exports.config = {
allScriptsTimeout: 11000,
specs: [
'./src/**/*.e2e-spec.ts'
],
capabilities: {
'browserName': 'chrome'
},
directConnect: true,
baseUrl: 'http://localhost:4200/',
framework: 'jasmine',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
print: function() {}
},
onPrepare() {
require('ts-node').register({
project: require('path').join(__dirname, './tsconfig.json')
});
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
}
};
24 changes: 24 additions & 0 deletions framework-boilerplates/ionic-angular/e2e/src/app.e2e-spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { AppPage } from './app.po';

describe('new App', () => {
let page: AppPage;

beforeEach(() => {
page = new AppPage();
});

it('should display the menu', () => {
page.navigateTo();
expect(page.getMenu()).toBeTruthy();
});

it('should get the slides text', () => {
page.navigateTo();
expect(page.getFirstSlide()).toBe('ion-slide');
});

it('should create a router outlet', () => {
page.navigateTo();
expect(page.getRouter()).toBeTruthy();
});
});
33 changes: 33 additions & 0 deletions framework-boilerplates/ionic-angular/e2e/src/app.po.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { browser, by, element, ElementFinder, ExpectedConditions } from 'protractor';

export class AppPage {
navigateTo() {
return browser.get('/');
}

async getMenu() {
const el = this.getElement('app-root ion-menu');
await this.waitForSelector(el);
return el;
}

async getFirstSlide() {
const el = this.getElement('app-root ion-slides ion-slide:first-child');
await this.waitForSelector(el);
return el.getTagName();
}

async getRouter() {
const el = this.getElement('app-root ion-router-outlet');
await this.waitForSelector(el);
return el;
}

async waitForSelector(el: ElementFinder) {
return browser.wait(ExpectedConditions.presenceOf(el), 3000);
}

getElement(selector) {
return element(by.css(selector));
}
}
13 changes: 13 additions & 0 deletions framework-boilerplates/ionic-angular/e2e/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"module": "commonjs",
"target": "es5",
"types": [
"jasmine",
"jasminewd2",
"node"
]
}
}
38 changes: 38 additions & 0 deletions framework-boilerplates/ionic-angular/firebase.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
{
"hosting": {
"public": "www",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],

"headers": [
{
"source": "ngsw-worker.js",
"headers": [
{
"key": "Cache-Control",
"value": "no-cache"
}
]
},
{
"source": "/",
"headers": [
{
"key": "Link",
"value":
"</25.1b3c099ae403f43312d0.js>;rel=preload;as=script,</42.91f2cf76f9e429447426.js>;rel=preload;as=script,</assets/img/ica-slidebox-img-1.png>;rel=preload;as=script,</assets/img/ica-slidebox-img-2.png>;rel=preload;as=script,</assets/img/ica-slidebox-img-3.png>;rel=preload;as=script,</assets/img/ica-slidebox-img-4.png>;rel=preload;as=script,</styles.c3b77cedd39edf7f2ba7.css>;rel=preload;as=style,</runtime.c658d4aee58a354b92a4.js>;rel=preload;as=script,</polyfills.83e506f1c32447a5a917.js>;rel=preload;as=script,</main.d18c9fbebcc1ea7206dd.js>;rel=preload;as=script,</common.95b27ec389e8789da858.js>;rel=preload;as=script,</118.34bf2ef085eaf0e363f1.js>;rel=preload;as=script,</120.5225f4140a92422328f1.js>;rel=preload;as=script,</28.6d73bdf869c966907e65.js>;rel=preload;as=script,</46.d30624137fdd3c3d67a4.js>;rel=preload;as=script,</176.dfa169e16d326704de08.js>;rel=preload;as=script,</106.896eb88d791c9b3500a6.js>;rel=preload;as=script,</8.5deb8afd2d9798907a78.js>;rel=preload;as=script,</146.6fb45a20998ca61d9fbb.js>;rel=preload;as=script,</92.8431776ac4239463d31f.js>;rel=preload;as=script,</10.9dfc5381b71f20b8d830.js>;rel=preload;as=script,</5.ddd0a72185376268a758.js>;rel=preload;as=script,</4.54d1be505b517fb8a365.js>;rel=preload;as=script,"
}
]
}
]
}
}
85 changes: 85 additions & 0 deletions framework-boilerplates/ionic-angular/generate-h2-push.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
#!/usr/bin/env node
const puppeteer = require('puppeteer');
const fs = require('fs');
const args = process.argv.slice(2);
const host = args[0] || 'http://127.0.0.1:8080';
const indexMatches = [
'.gz',
'.map',
'3rdpartylicenses.txt',
'ngsw-manifest.json',
'ngsw.json',
'worker-basic.min.js',
'ngsw-worker.js',
'favicon',
'index.html',
'manifest.webmanifest',
'.svg'
];
let results = '';
async function main() {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page._client.send('ServiceWorker.disable')

page.on('console', msg => console.log(msg.text()));

console.log('Page: loaded');
await page.goto(host);

const allRequests = new Map();
page.on('request', req => {
allRequests.set(req.url(), req);
});

await page.reload({ waitUntil: 'networkidle2' });

Array.from(allRequests.values()).forEach(req => {
const url = req.url();

// filter out urls that match these extensions
for (const exlude of indexMatches) {
if (url.indexOf(exlude) != -1) return false;
}

// if external, dont worry about it for now
//
const origin = new URL(host);

if (url.indexOf(origin.origin) === -1) return false;

// Format the url to remove the host
const formatted = url.replace(`${origin.origin}/`, '');

if (origin.pathname.includes(formatted)) return false;

// if it's an empty string, just ignore it
if (!formatted) return false;

let type = url.slice(-3) == 'css' ? 'style' : 'script';
results += `</${formatted}>;rel=preload;as=${type},`;

});
await browser.close();
updateWith(results);
}
function updateWith(result) {
fs.readFile('firebase.json', 'utf8', function(err, data) {
if (err) {
return console.log(err);
}
let re = /("headers":\s*\[\s*{\s*"key":\s*"Link",\s*"value":\s*")(.*)("\s*}\s*\])/gm;
if (re.exec(data)) {
let newConfig = data.replace(re, `$1${result}$3`);
fs.writeFile('firebase.json', newConfig, 'utf8', function(err) {
if (err) return console.log(err);
console.log('firebase.json updated successfully.');
});
} else {
console.log("Couldn't find a valid firebase config to update.");
return;
}
});
}

main();
7 changes: 7 additions & 0 deletions framework-boilerplates/ionic-angular/ionic.config.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"name": "ionic-conference-app",
"type": "angular",
"integrations": {
"cordova": {}
}
}
26 changes: 26 additions & 0 deletions framework-boilerplates/ionic-angular/ngsw-config.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
{
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/*.css",
"/*.js"
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**"
]
}
}
]
}
97 changes: 97 additions & 0 deletions framework-boilerplates/ionic-angular/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
{
"name": "ionic-conference-app",
"version": "0.0.0",
"description": "Ionic Conference App",
"author": "Ionic Team <hi@ionicframework.com>",
"license": "Apache-2.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"postinstall": "webdriver-manager update --standalone false --gecko false"
},
"repository": {
"type": "git",
"url": "https://github.com/ionic-team/ionic-conference-app.git"
},
"private": true,
"engines": {
"node": "16.x"
},
"dependencies": {
"@angular/common": "^8.2.14",
"@angular/core": "^8.2.14",
"@angular/forms": "^8.2.14",
"@angular/platform-browser": "^8.2.14",
"@angular/platform-browser-dynamic": "^8.2.14",
"@angular/pwa": "^0.803.23",
"@angular/router": "^8.2.14",
"@angular/service-worker": "^8.2.14",
"@ionic-native/core": "5.0.0-beta.15",
"@ionic-native/in-app-browser": "5.0.0-beta.15",
"@ionic-native/splash-screen": "5.0.0-beta.15",
"@ionic-native/status-bar": "5.0.0-beta.15",
"@ionic/angular": "^5.1.1",
"@ionic/storage": "^2.1.3",
"cordova-android": "^8.1.0",
"cordova-ios": "^5.1.1",
"cordova-plugin-device": "^2.0.3",
"cordova-plugin-inappbrowser": "^3.2.0",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-ionic-webview": "^4.1.3",
"cordova-plugin-splashscreen": "^5.0.3",
"cordova-plugin-statusbar": "^2.4.3",
"cordova-plugin-whitelist": "^1.3.4",
"core-js": "^3.6.4",
"rxjs": "^6.5.4",
"sw-toolbox": "3.6.0",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/architect": "^0.803.23",
"@angular-devkit/build-angular": "^0.803.23",
"@angular-devkit/core": "^8.3.23",
"@angular-devkit/schematics": "^8.3.23",
"@angular/cli": "^8.3.23",
"@angular/compiler": "^8.2.14",
"@angular/compiler-cli": "^8.2.14",
"@angular/language-service": "^8.2.14",
"@ionic/angular-toolkit": "^2.1.2",
"@ionic/lab": "^2.0.19",
"@types/jasmine": "3.4.6",
"@types/jasminewd2": "2.0.8",
"@types/node": "^12.12.26",
"codelyzer": "^5.2.1",
"jasmine-core": "^3.5.0",
"jasmine-spec-reporter": "4.2.1",
"karma": "4.4.1",
"karma-chrome-launcher": "^3.1.0",
"karma-coverage-istanbul-reporter": "2.1.1",
"karma-jasmine": "2.0.1",
"karma-jasmine-html-reporter": "1.4.2",
"protractor": "^5.4.3",
"puppeteer": "^1.20.0",
"ts-node": "8.5.0",
"tslint": "^5.20.1",
"typescript": "~3.5.3"
},
"cordova": {
"platforms": [
"ios",
"android"
],
"plugins": {
"cordova-plugin-device": {},
"cordova-plugin-inappbrowser": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-whitelist": {},
"cordova-plugin-ionic-webview": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-ionic-keyboard": {}
}
}
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
c1760af57a8089fda7537fc043804bc8
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
0dcf1df8c92c1ece4382d3357d9f8562
42 changes: 42 additions & 0 deletions framework-boilerplates/ionic-angular/src/app/app-routing.module.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CheckTutorial } from './providers/check-tutorial.service';

const routes: Routes = [
{
path: '',
redirectTo: '/tutorial',
pathMatch: 'full'
},
{
path: 'account',
loadChildren: () => import('./pages/account/account.module').then(m => m.AccountModule)
},
{
path: 'support',
loadChildren: () => import('./pages/support/support.module').then(m => m.SupportModule)
},
{
path: 'login',
loadChildren: () => import('./pages/login/login.module').then(m => m.LoginModule)
},
{
path: 'signup',
loadChildren: () => import('./pages/signup/signup.module').then(m => m.SignUpModule)
},
{
path: 'app',
loadChildren: () => import('./pages/tabs-page/tabs-page.module').then(m => m.TabsModule)
},
{
path: 'tutorial',
loadChildren: () => import('./pages/tutorial/tutorial.module').then(m => m.TutorialModule),
canLoad: [CheckTutorial]
}
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
114 changes: 114 additions & 0 deletions framework-boilerplates/ionic-angular/src/app/app.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
<ion-app [class.dark-theme]="dark">
<ion-split-pane contentId="main-content">

<ion-menu contentId="main-content">
<ion-content>
<ion-list lines="none">
<ion-list-header>
Conference
</ion-list-header>
<ion-menu-toggle autoHide="false" *ngFor="let p of appPages; let i = index">
<ion-item [routerLink]="p.url" routerLinkActive="selected" routerDirection="root" detail="false">
<ion-icon slot="start" [name]="p.icon + '-outline'"></ion-icon>
<ion-label>
{{p.title}}
</ion-label>
</ion-item>

</ion-menu-toggle>
</ion-list>

<ion-list *ngIf="loggedIn" lines="none">
<ion-list-header>
Account
</ion-list-header>

<ion-menu-toggle autoHide="false">
<ion-item routerLink="/account" routerLinkActive="active" routerDirection="root" detail="false">
<ion-icon slot="start" name="person"></ion-icon>
<ion-label>
Account
</ion-label>
</ion-item>
</ion-menu-toggle>

<ion-menu-toggle autoHide="false">
<ion-item routerLink="/support" routerLinkActive="active" routerDirection="root" detail="false">
<ion-icon slot="start" name="help"></ion-icon>
<ion-label>
Support
</ion-label>
</ion-item>
</ion-menu-toggle>

<ion-menu-toggle autoHide="false">
<ion-item button (click)="logout()" detail="false">
<ion-icon slot="start" name="log-out"></ion-icon>
<ion-label>
Logout
</ion-label>
</ion-item>
</ion-menu-toggle>

</ion-list>

<ion-list *ngIf="!loggedIn" lines="none">
<ion-list-header>
Account
</ion-list-header>

<ion-menu-toggle autoHide="false">
<ion-item routerLink="/login" routerLinkActive="active" routerDirection="root" detail="false">
<ion-icon slot="start" name="log-in"></ion-icon>
<ion-label>
Login
</ion-label>
</ion-item>
</ion-menu-toggle>

<ion-menu-toggle autoHide="false">
<ion-item routerLink="/support" routerLinkActive="active" routerDirection="root" detail="false">
<ion-icon slot="start" name="help"></ion-icon>
<ion-label>
Support
</ion-label>
</ion-item>
</ion-menu-toggle>

<ion-menu-toggle autoHide="false">
<ion-item routerLink="/signup" routerLinkActive="active" routerDirection="root" detail="false">
<ion-icon slot="start" name="person-add"></ion-icon>
<ion-label>
Signup
</ion-label>
</ion-item>
</ion-menu-toggle>

<ion-item>
<ion-icon slot="start" name="moon-outline"></ion-icon>
<ion-label>
Dark Mode
</ion-label>
<ion-toggle [(ngModel)]="dark"></ion-toggle>
</ion-item>
</ion-list>

<ion-list lines="none">
<ion-list-header>
Tutorial
</ion-list-header>
<ion-menu-toggle autoHide="false">
<ion-item button (click)="openTutorial()" detail="false">
<ion-icon slot="start" name="hammer"></ion-icon>
<ion-label>Show Tutorial</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>

<ion-router-outlet id="main-content"></ion-router-outlet>

</ion-split-pane>

</ion-app>
87 changes: 87 additions & 0 deletions framework-boilerplates/ionic-angular/src/app/app.component.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
ion-menu ion-content {
--padding-top: 20px;
--padding-bottom: 20px;

--background: var(--ion-item-background, var(--ion-background-color, #fff));
}

/* Remove background transitions for switching themes */
ion-menu ion-item {
--transition: none;
}

ion-item.selected {
--color: var(--ion-color-primary);
}

/*
* Material Design Menu
*/
ion-menu.md ion-list {
padding: 20px 0;
}

ion-menu.md ion-list-header {
padding-left: 18px;
padding-right: 18px;

text-transform: uppercase;
letter-spacing: .1em;
font-weight: 450;
}

ion-menu.md ion-item {
--padding-start: 18px;

margin-right: 10px;

border-radius: 0 50px 50px 0;

font-weight: 500;
}

ion-menu.md ion-item.selected {
--background: rgba(var(--ion-color-primary-rgb), 0.14);
}

ion-menu.md ion-item.selected ion-icon {
color: var(--ion-color-primary);
}

ion-menu.md ion-list-header,
ion-menu.md ion-item ion-icon {
color: var(--ion-color-step-650, #5f6368);
}

ion-menu.md ion-list:not(:last-of-type) {
border-bottom: 1px solid var(--ion-color-step-150, #d7d8da);
}


/*
* iOS Menu
*/
ion-menu.ios ion-list-header {
padding-left: 16px;
padding-right: 16px;

margin-bottom: 8px;
}

ion-menu.ios ion-list {
padding: 20px 0 0;
}

ion-menu.ios ion-item {
--padding-start: 16px;
--min-height: 50px;
}

ion-menu.ios ion-item ion-icon {
font-size: 24px;
color: #73849a;
}

ion-menu.ios ion-item.selected ion-icon {
color: var(--ion-color-primary);
}
65 changes: 65 additions & 0 deletions framework-boilerplates/ionic-angular/src/app/app.component.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { Router } from '@angular/router';
import { SwUpdate } from '@angular/service-worker';
import { TestBed, async } from '@angular/core/testing';

import { MenuController, Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { IonicStorageModule } from '@ionic/storage';
import { AppComponent } from './app.component';
import { UserData } from './providers/user-data';

describe('AppComponent', () => {
let menuSpy,
routerSpy,
userDataSpy,
statusBarSpy,
splashScreenSpy,
swUpdateSpy,
platformReadySpy,
platformSpy,
app,
fixture;

beforeEach(async(() => {
menuSpy = jasmine.createSpyObj('MenuController', ['toggle', 'enable']);
routerSpy = jasmine.createSpyObj('Router', ['navigateByUrl']);
userDataSpy = jasmine.createSpyObj('UserData', ['isLoggedIn', 'logout']);
statusBarSpy = jasmine.createSpyObj('StatusBar', ['styleDefault']);
splashScreenSpy = jasmine.createSpyObj('SplashScreen', ['hide']);
swUpdateSpy = jasmine.createSpyObj('SwUpdate', ['available', 'activateUpdate']);
platformReadySpy = Promise.resolve();
platformSpy = jasmine.createSpyObj('Platform', { ready: platformReadySpy });

TestBed.configureTestingModule({
declarations: [AppComponent],
imports: [IonicStorageModule.forRoot()],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
providers: [
{ provide: MenuController, useValue: menuSpy },
{ provide: Router, useValue: routerSpy },
{ provide: UserData, useValue: userDataSpy },
{ provide: StatusBar, useValue: statusBarSpy },
{ provide: SplashScreen, useValue: splashScreenSpy },
{ provide: SwUpdate, useValue: swUpdateSpy },
{ provide: Platform, useValue: platformSpy }
]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AppComponent);
app = fixture.debugElement.componentInstance;
});

it('should create the app', () => {
expect(app).toBeTruthy();
});

it('should initialize the app', async () => {
expect(platformSpy.ready).toHaveBeenCalled();
await platformReadySpy;
expect(statusBarSpy.styleDefault).toHaveBeenCalled();
expect(splashScreenSpy.hide).toHaveBeenCalled();
});
});
129 changes: 129 additions & 0 deletions framework-boilerplates/ionic-angular/src/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Router } from '@angular/router';
import { SwUpdate } from '@angular/service-worker';

import { MenuController, Platform, ToastController } from '@ionic/angular';

import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { Storage } from '@ionic/storage';

import { UserData } from './providers/user-data';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
appPages = [
{
title: 'Schedule',
url: '/app/tabs/schedule',
icon: 'calendar'
},
{
title: 'Speakers',
url: '/app/tabs/speakers',
icon: 'people'
},
{
title: 'Map',
url: '/app/tabs/map',
icon: 'map'
},
{
title: 'About',
url: '/app/tabs/about',
icon: 'information-circle'
}
];
loggedIn = false;
dark = false;

constructor(
private menu: MenuController,
private platform: Platform,
private router: Router,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
private storage: Storage,
private userData: UserData,
private swUpdate: SwUpdate,
private toastCtrl: ToastController,
) {
this.initializeApp();
}

async ngOnInit() {
this.checkLoginStatus();
this.listenForLoginEvents();

this.swUpdate.available.subscribe(async res => {
const toast = await this.toastCtrl.create({
message: 'Update available!',
position: 'bottom',
buttons: [
{
role: 'cancel',
text: 'Reload'
}
]
});

await toast.present();

toast
.onDidDismiss()
.then(() => this.swUpdate.activateUpdate())
.then(() => window.location.reload());
});
}

initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}

checkLoginStatus() {
return this.userData.isLoggedIn().then(loggedIn => {
return this.updateLoggedInStatus(loggedIn);
});
}

updateLoggedInStatus(loggedIn: boolean) {
setTimeout(() => {
this.loggedIn = loggedIn;
}, 300);
}

listenForLoginEvents() {
window.addEventListener('user:login', () => {
this.updateLoggedInStatus(true);
});

window.addEventListener('user:signup', () => {
this.updateLoggedInStatus(true);
});

window.addEventListener('user:logout', () => {
this.updateLoggedInStatus(false);
});
}

logout() {
this.userData.logout().then(() => {
return this.router.navigateByUrl('/app/tabs/schedule');
});
}

openTutorial() {
this.menu.enable(false);
this.storage.set('ion_did_tutorial', false);
this.router.navigateByUrl('/tutorial');
}
}
32 changes: 32 additions & 0 deletions framework-boilerplates/ionic-angular/src/app/app.module.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { IonicModule } from '@ionic/angular';
import { IonicStorageModule } from '@ionic/storage';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
import { FormsModule } from '@angular/forms';

@NgModule({
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
FormsModule,
IonicModule.forRoot(),
IonicStorageModule.forRoot(),
ServiceWorkerModule.register('ngsw-worker.js', {
enabled: environment.production
})
],
declarations: [AppComponent],
providers: [InAppBrowser, SplashScreen, StatusBar],
bootstrap: [AppComponent]
})
export class AppModule {}
Empty file.
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@

export interface UserOptions {
username: string;
password: string;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import { Component } from '@angular/core';

import { PopoverController } from '@ionic/angular';

@Component({
template: `
<ion-list>
<ion-item button (click)="close('https://ionicframework.com/getting-started')">
<ion-label>Learn Ionic</ion-label>
</ion-item>
<ion-item button (click)="close('https://ionicframework.com/docs/')">
<ion-label>Documentation</ion-label>
</ion-item>
<ion-item button (click)="close('https://showcase.ionicframework.com')">
<ion-label>Showcase</ion-label>
</ion-item>
<ion-item button (click)="close('https://github.com/ionic-team/ionic')">
<ion-label>GitHub Repo</ion-label>
</ion-item>
<ion-item button (click)="support()">
<ion-label>Support</ion-label>
</ion-item>
</ion-list>
`
})
export class PopoverPage {
constructor(public popoverCtrl: PopoverController) {}

support() {
// this.app.getRootNavs()[0].push('/support');
this.popoverCtrl.dismiss();
}

close(url: string) {
window.open(url, '_blank');
this.popoverCtrl.dismiss();
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { AboutPage } from './about';

const routes: Routes = [
{
path: '',
component: AboutPage
}
];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class AboutPageRoutingModule { }
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
<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 (click)="presentPopover($event)">
<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" [ngStyle]="location === 'madison' && {'opacity': '1'}"></div>
<div class="about-image austin" [ngStyle]="location === 'austin' && {'opacity': '1'}"></div>
<div class="about-image chicago" [ngStyle]="location === 'chicago' && {'opacity': '1'}"></div>
<div class="about-image seattle" [ngStyle]="location === 'seattle' && {'opacity': '1'}"></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 {{ conferenceDate | date: '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 [(ngModel)]="location" [interfaceOptions]="selectOptions">
<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"
[(ngModel)]="conferenceDate">
</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{{conferenceDate | date: '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>
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';

import { AboutPage } from './about';
import { PopoverPage } from '../about-popover/about-popover';
import { AboutPageRoutingModule } from './about-routing.module';

@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
AboutPageRoutingModule
],
declarations: [AboutPage, PopoverPage],
entryComponents: [PopoverPage],
bootstrap: [AboutPage],
})
export class AboutModule {}
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
ion-toolbar {
position: absolute;

top: 0;
left: 0;
right: 0;

--background: transparent;
--color: white;
}

ion-toolbar ion-button,
ion-toolbar ion-back-button,
ion-toolbar ion-menu-button {
--color: white;
}

.about-header {
position: relative;

width: 100%;
height: 30%;
}

.about-header .about-image {
position: absolute;

top: 0;
left: 0;
bottom: 0;
right: 0;

background-position: center;
background-size: cover;
background-repeat: no-repeat;

opacity: 0;

transition: opacity 500ms ease-in-out;
}

.about-header .madison {
background-image: url(/assets/img/about/madison.jpg);
}
.about-header .austin {
background-image: url(/assets/img/about/austin.jpg);
}
.about-header .chicago {
background-image: url(/assets/img/about/chicago.jpg);
}
.about-header .seattle {
background-image: url(/assets/img/about/seattle.jpg);
}

.about-info {
position: absolute;
margin-top: -10px;
border-radius: 10px;
background: var(--ion-background-color, #fff);
}

.about-info h3 {
margin-top: 0;
}

.about-info ion-list {
padding-top: 0;
}

.about-info p {
line-height: 130%;

color: var(--ion-color-dark);
}

.about-info ion-icon {
margin-inline-end: 32px;
}

/*
* iOS Only
*/

.ios .about-info {
--ion-padding: 19px;
}

.ios .about-info h3 {
font-weight: 700;
}
29 changes: 29 additions & 0 deletions framework-boilerplates/ionic-angular/src/app/pages/about/about.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { Component } from '@angular/core';

import { PopoverController } from '@ionic/angular';

import { PopoverPage } from '../about-popover/about-popover';

@Component({
selector: 'page-about',
templateUrl: 'about.html',
styleUrls: ['./about.scss'],
})
export class AboutPage {
location = 'madison';
conferenceDate = '2047-05-17';

selectOptions = {
header: 'Select a Location'
};

constructor(public popoverCtrl: PopoverController) { }

async presentPopover(event: Event) {
const popover = await this.popoverCtrl.create({
component: PopoverPage,
event
});
await popover.present();
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { AccountPage } from './account';

const routes: Routes = [
{
path: '',
component: AccountPage
}
];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class AccountPageRoutingModule { }
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>Account</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
<div *ngIf="username" class="ion-padding-top ion-text-center">
<img src="https://www.gravatar.com/avatar?d=mm&s=140" alt="avatar">
<h2>{{username}}</h2>

<ion-list inset>
<ion-item (click)="updatePicture()">Update Picture</ion-item>
<ion-item (click)="changeUsername()">Change Username</ion-item>
<ion-item (click)="changePassword()">Change Password</ion-item>
<ion-item (click)="support()">Support</ion-item>
<ion-item (click)="logout()">Logout</ion-item>
</ion-list>
</div>
</ion-content>
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';

import { AccountPage } from './account';
import { AccountPageRoutingModule } from './account-routing.module';

@NgModule({
imports: [
CommonModule,
IonicModule,
AccountPageRoutingModule
],
declarations: [
AccountPage,
]
})
export class AccountModule { }
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
img {
max-width: 140px;
border-radius: 50%;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import { AfterViewInit, Component } from '@angular/core';
import { Router } from '@angular/router';

import { AlertController } from '@ionic/angular';

import { UserData } from '../../providers/user-data';


@Component({
selector: 'page-account',
templateUrl: 'account.html',
styleUrls: ['./account.scss'],
})
export class AccountPage implements AfterViewInit {
username: string;

constructor(
public alertCtrl: AlertController,
public router: Router,
public userData: UserData
) { }

ngAfterViewInit() {
this.getUsername();
}

updatePicture() {
console.log('Clicked to update picture');
}

// Present an alert with the current username populated
// clicking OK will update the username and display it
// clicking Cancel will close the alert and do nothing
async changeUsername() {
const alert = await this.alertCtrl.create({
header: 'Change Username',
buttons: [
'Cancel',
{
text: 'Ok',
handler: (data: any) => {
this.userData.setUsername(data.username);
this.getUsername();
}
}
],
inputs: [
{
type: 'text',
name: 'username',
value: this.username,
placeholder: 'username'
}
]
});
await alert.present();
}

getUsername() {
this.userData.getUsername().then((username) => {
this.username = username;
});
}

changePassword() {
console.log('Clicked to change password');
}

logout() {
this.userData.logout();
this.router.navigateByUrl('/login');
}

support() {
this.router.navigateByUrl('/support');
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { LoginPage } from './login';

const routes: Routes = [
{
path: '',
component: LoginPage
}
];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class LoginPageRoutingModule { }
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>

<ion-title>Login</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
<div class="login-logo">
<img src="assets/img/appicon.svg" alt="Ionic logo">
</div>

<form #loginForm="ngForm" novalidate>
<ion-list>
<ion-item>
<ion-label position="stacked" color="primary">Username</ion-label>
<ion-input [(ngModel)]="login.username" name="username" type="text" #username="ngModel" spellcheck="false" autocapitalize="off"
required>
</ion-input>
</ion-item>

<ion-text color="danger">
<p [hidden]="username.valid || submitted == false" class="ion-padding-start">
Username is required
</p>
</ion-text>

<ion-item>
<ion-label position="stacked" color="primary">Password</ion-label>
<ion-input [(ngModel)]="login.password" name="password" type="password" #password="ngModel" required>
</ion-input>
</ion-item>

<ion-text color="danger">
<p [hidden]="password.valid || submitted == false" class="ion-padding-start">
Password is required
</p>
</ion-text>
</ion-list>

<ion-row>
<ion-col>
<ion-button (click)="onLogin(loginForm)" type="submit" expand="block">Login</ion-button>
</ion-col>
<ion-col>
<ion-button (click)="onSignup()" color="light" expand="block">Signup</ion-button>
</ion-col>
</ion-row>
</form>

</ion-content>
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';

import { LoginPage } from './login';
import { LoginPageRoutingModule } from './login-routing.module';

@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
LoginPageRoutingModule
],
declarations: [
LoginPage,
]
})
export class LoginModule { }
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
.login-logo {
padding: 20px 0;
min-height: 200px;
text-align: center;
}

.login-logo img {
max-width: 150px;
}

.list {
margin-bottom: 0;
}
37 changes: 37 additions & 0 deletions framework-boilerplates/ionic-angular/src/app/pages/login/login.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Router } from '@angular/router';

import { UserData } from '../../providers/user-data';

import { UserOptions } from '../../interfaces/user-options';



@Component({
selector: 'page-login',
templateUrl: 'login.html',
styleUrls: ['./login.scss'],
})
export class LoginPage {
login: UserOptions = { username: '', password: '' };
submitted = false;

constructor(
public userData: UserData,
public router: Router
) { }

onLogin(form: NgForm) {
this.submitted = true;

if (form.valid) {
this.userData.login(this.login.username);
this.router.navigateByUrl('/app/tabs/schedule');
}
}

onSignup() {
this.router.navigateByUrl('/signup');
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,161 @@
export const darkStyle = [
{
"elementType": "geometry",
"stylers": [
{
"color": "#242f3e"
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#746855"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#242f3e"
}
]
},
{
"featureType": "administrative.locality",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#d59563"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#d59563"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"color": "#263c3f"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#6b9a76"
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"color": "#38414e"
}
]
},
{
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#212a37"
}
]
},
{
"featureType": "road",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9ca5b3"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"color": "#746855"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#1f2835"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#f3d19c"
}
]
},
{
"featureType": "transit",
"elementType": "geometry",
"stylers": [
{
"color": "#2f3948"
}
]
},
{
"featureType": "transit.station",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#d59563"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#17263c"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#515c6d"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#17263c"
}
]
}
]
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { MapPage } from './map';

const routes: Routes = [
{
path: '',
component: MapPage
}
];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class MapPageRoutingModule { }
12 changes: 12 additions & 0 deletions framework-boilerplates/ionic-angular/src/app/pages/map/map.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>Map</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
<div #mapCanvas class="map-canvas"></div>
</ion-content>
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';

import { MapPage } from './map';
import { MapPageRoutingModule } from './map-routing.module';

@NgModule({
imports: [
CommonModule,
IonicModule,
MapPageRoutingModule
],
declarations: [
MapPage,
]
})
export class MapModule { }
15 changes: 15 additions & 0 deletions framework-boilerplates/ionic-angular/src/app/pages/map/map.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
.map-canvas {
position: absolute;

height: 100%;
width: 100%;

background-color: transparent;

opacity: 0;
transition: opacity 150ms ease-in;
}

.show-map {
opacity: 1;
}
107 changes: 107 additions & 0 deletions framework-boilerplates/ionic-angular/src/app/pages/map/map.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
import { Component, ElementRef, Inject, ViewChild, AfterViewInit } from '@angular/core';
import { ConferenceData } from '../../providers/conference-data';
import { Platform } from '@ionic/angular';
import { DOCUMENT} from '@angular/common';

import { darkStyle } from './map-dark-style';

@Component({
selector: 'page-map',
templateUrl: 'map.html',
styleUrls: ['./map.scss']
})
export class MapPage implements AfterViewInit {
@ViewChild('mapCanvas', { static: true }) mapElement: ElementRef;

constructor(
@Inject(DOCUMENT) private doc: Document,
public confData: ConferenceData,
public platform: Platform) {}

async ngAfterViewInit() {
const appEl = this.doc.querySelector('ion-app');
let isDark = false;
let style = [];
if (appEl.classList.contains('dark-theme')) {
style = darkStyle;
}

const googleMaps = await getGoogleMaps(
'YOUR_API_KEY_HERE'
);

let map;

this.confData.getMap().subscribe((mapData: any) => {
const mapEle = this.mapElement.nativeElement;

map = new googleMaps.Map(mapEle, {
center: mapData.find((d: any) => d.center),
zoom: 16,
styles: style
});

mapData.forEach((markerData: any) => {
const infoWindow = new googleMaps.InfoWindow({
content: `<h5>${markerData.name}</h5>`
});

const marker = new googleMaps.Marker({
position: markerData,
map,
title: markerData.name
});

marker.addListener('click', () => {
infoWindow.open(map, marker);
});
});

googleMaps.event.addListenerOnce(map, 'idle', () => {
mapEle.classList.add('show-map');
});
});

const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.attributeName === 'class') {
const el = mutation.target as HTMLElement;
isDark = el.classList.contains('dark-theme');
if (map && isDark) {
map.setOptions({styles: darkStyle});
} else if (map) {
map.setOptions({styles: []});
}
}
});
});
observer.observe(appEl, {
attributes: true
});
}
}

function getGoogleMaps(apiKey: string): Promise<any> {
const win = window as any;
const googleModule = win.google;
if (googleModule && googleModule.maps) {
return Promise.resolve(googleModule.maps);
}

return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&v=3.31`;
script.async = true;
script.defer = true;
document.body.appendChild(script);
script.onload = () => {
const googleModule2 = win.google;
if (googleModule2 && googleModule2.maps) {
resolve(googleModule2.maps);
} else {
reject('google maps not available');
}
};
});
}

Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<ion-header translucent="true">
<ion-toolbar>
<ion-buttons slot="start">
<ion-button *ngIf="ios" (click)="dismiss()">Cancel</ion-button>
<ion-button *ngIf="!ios" (click)="selectAll(false)">Reset</ion-button>
</ion-buttons>

<ion-title>
Filter Sessions
</ion-title>

<ion-buttons slot="end">
<ion-button (click)="applyFilters()" strong>Done</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>

<ion-content>
<ion-list [lines]="ios ? 'inset' : 'full'">
<ion-list-header>Tracks</ion-list-header>

<ion-item *ngFor="let track of tracks" [attr.track]="track.name | lowercase">
<ion-icon *ngIf="ios" slot="start" [name]="track.icon" color="medium"></ion-icon>
<ion-label>{{track.name}}</ion-label>
<ion-checkbox [(ngModel)]="track.isChecked"></ion-checkbox>
</ion-item>

</ion-list>

</ion-content>

<ion-footer translucent="true" *ngIf="ios">
<ion-toolbar>
<ion-buttons slot="start">
<ion-button (click)="selectAll(false)">Deselect All</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-button (click)="selectAll(true)">Select All</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-footer>
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
/*
* Material Design
*/

.md ion-toolbar ion-button {
text-transform: capitalize;
letter-spacing: 0;
}

.md ion-checkbox {
--background-checked: transparent;
--border-color: transparent;
--border-color-checked: transparent;
--checkmark-color: var(--ion-color-primary);
}

.md ion-list {
background: inherit;
}


/*
* iOS
*/

.ios ion-list-header {
margin-top: 10px;
}

.ios ion-label {
color: var(--ion-color-primary);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import { Component } from '@angular/core';
import { Config, ModalController, NavParams } from '@ionic/angular';

import { ConferenceData } from '../../providers/conference-data';


@Component({
selector: 'page-schedule-filter',
templateUrl: 'schedule-filter.html',
styleUrls: ['./schedule-filter.scss'],
})
export class ScheduleFilterPage {
ios: boolean;

tracks: {name: string, icon: string, isChecked: boolean}[] = [];

constructor(
public confData: ConferenceData,
private config: Config,
public modalCtrl: ModalController,
public navParams: NavParams
) { }

ionViewWillEnter() {
this.ios = this.config.get('mode') === `ios`;

// passed in array of track names that should be excluded (unchecked)
const excludedTrackNames = this.navParams.get('excludedTracks');

this.confData.getTracks().subscribe((tracks: any[]) => {
tracks.forEach(track => {
this.tracks.push({
name: track.name,
icon: track.icon,
isChecked: (excludedTrackNames.indexOf(track.name) === -1)
});
});
});
}

selectAll(check: boolean) {
// set all to checked or unchecked
this.tracks.forEach(track => {
track.isChecked = check;
});
}

applyFilters() {
// Pass back a new array of track names to exclude
const excludedTrackNames = this.tracks.filter(c => !c.isChecked).map(c => c.name);
this.dismiss(excludedTrackNames);
}

dismiss(data?: any) {
// using the injected ModalController this page
// can "dismiss" itself and pass back data
this.modalCtrl.dismiss(data);
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { SchedulePage } from './schedule';

const routes: Routes = [
{
path: '',
component: SchedulePage
}
];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class SchedulePageRoutingModule { }
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
<ion-header translucent="true">
<ion-toolbar>
<ion-buttons *ngIf="!showSearchbar" slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-segment *ngIf="ios" [(ngModel)]="segment" (ionChange)="updateSchedule()">
<ion-segment-button value="all">
All
</ion-segment-button>
<ion-segment-button value="favorites">
Favorites
</ion-segment-button>
</ion-segment>
<ion-title *ngIf="!ios && !showSearchbar">Schedule</ion-title>
<ion-searchbar *ngIf="showSearchbar" showCancelButton="always" [(ngModel)]="queryText" (ionChange)="updateSchedule()" (ionCancel)="showSearchbar = false" placeholder="Search"></ion-searchbar>
<ion-buttons slot="end">
<ion-button *ngIf="!ios && !showSearchbar" (click)="showSearchbar = true">
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
<ion-button *ngIf="!showSearchbar" (click)="presentFilter()">
<span *ngIf="ios">Filter</span>
<span *ngIf="!ios">
<ion-icon slot="icon-only" name="options"></ion-icon>
</span>
</ion-button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar *ngIf="!ios">
<ion-segment [(ngModel)]="segment" (ionChange)="updateSchedule()">
<ion-segment-button value="all">
All
</ion-segment-button>
<ion-segment-button value="favorites">
Favorites
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header>

<ion-content fullscreen="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Schedule</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-searchbar [(ngModel)]="queryText" (ionChange)="updateSchedule()" placeholder="Search"></ion-searchbar>
</ion-toolbar>
</ion-header>

<ion-list #scheduleList [hidden]="shownSessions === 0">
<ion-item-group *ngFor="let group of groups" [hidden]="group.hide">
<ion-item-divider sticky>
<ion-label>
{{group.time}}
</ion-label>
</ion-item-divider>

<ion-item-sliding *ngFor="let session of group.sessions" #slidingItem [attr.track]="session.tracks[0] | lowercase"
[hidden]="session.hide">
<ion-item routerLink="/app/tabs/schedule/session/{{session.id}}">
<ion-label>
<h3>{{session.name}}</h3>
<p>
{{session.timeStart}} &mdash; {{session.timeEnd}}: {{session.location}}
</p>
</ion-label>
</ion-item>
<ion-item-options>
<ion-item-option color="favorite" (click)="addFavorite(slidingItem, session)" *ngIf="segment === 'all'">
Favorite
</ion-item-option>
<ion-item-option color="danger" (click)="removeFavorite(slidingItem, session, 'Remove Favorite')"
*ngIf="segment === 'favorites'">
Remove
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-item-group>
</ion-list>

<ion-list-header [hidden]="shownSessions > 0">
No Sessions Found
</ion-list-header>

<ion-fab slot="fixed" vertical="bottom" horizontal="end" #fab>
<ion-fab-button>
<ion-icon name="share-social"></ion-icon>
</ion-fab-button>
<ion-fab-list side="top">
<ion-fab-button color="vimeo" (click)="openSocial('Vimeo', fab)">
<ion-icon name="logo-vimeo"></ion-icon>
</ion-fab-button>
<ion-fab-button color="instagram" (click)="openSocial('Instagram', fab)">
<ion-icon name="logo-instagram"></ion-icon>
</ion-fab-button>
<ion-fab-button color="twitter" (click)="openSocial('Twitter', fab)">
<ion-icon name="logo-twitter"></ion-icon>
</ion-fab-button>
<ion-fab-button color="facebook" (click)="openSocial('Facebook', fab)">
<ion-icon name="logo-facebook"></ion-icon>
</ion-fab-button>
</ion-fab-list>
</ion-fab>
</ion-content>
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';

import { SchedulePage } from './schedule';
import { ScheduleFilterPage } from '../schedule-filter/schedule-filter';
import { SchedulePageRoutingModule } from './schedule-routing.module';

@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
SchedulePageRoutingModule
],
declarations: [
SchedulePage,
ScheduleFilterPage
],
entryComponents: [
ScheduleFilterPage
]
})
export class ScheduleModule { }
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
ion-fab-button {
--background: var(--ion-color-step-150, #fff);
--background-hover: var(--ion-color-step-200, #f2f2f2);
--background-focused: var(--ion-color-step-250, #d9d9d9);

--color: var(--ion-color-primary, #3880ff);
}

/*
* Material Design uses the ripple for activated
* so only style the iOS activated background
*/
.ios ion-fab-button {
--background-activated: var(--ion-color-step-250, #d9d9d9);
}

$categories: (
ionic: var(--ion-color-primary),
angular: #ac282b,
communication: #8e8d93,
tooling: #fe4c52,
services: #fd8b2d,
design: #fed035,
workshop: #69bb7b,
food: #3bc7c4,
documentation: #b16be3,
navigation: #6600cc
);

@each $track, $value in map-remove($categories) {
ion-item-sliding[track='#{$track}'] ion-label {
border-left: 2px solid $value;
padding-left: 10px;
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
import { Component, ViewChild, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AlertController, IonList, IonRouterOutlet, LoadingController, ModalController, ToastController, Config } from '@ionic/angular';

import { ScheduleFilterPage } from '../schedule-filter/schedule-filter';
import { ConferenceData } from '../../providers/conference-data';
import { UserData } from '../../providers/user-data';

@Component({
selector: 'page-schedule',
templateUrl: 'schedule.html',
styleUrls: ['./schedule.scss'],
})
export class SchedulePage implements OnInit {
// Gets a reference to the list element
@ViewChild('scheduleList', { static: true }) scheduleList: IonList;

ios: boolean;
dayIndex = 0;
queryText = '';
segment = 'all';
excludeTracks: any = [];
shownSessions: any = [];
groups: any = [];
confDate: string;
showSearchbar: boolean;

constructor(
public alertCtrl: AlertController,
public confData: ConferenceData,
public loadingCtrl: LoadingController,
public modalCtrl: ModalController,
public router: Router,
public routerOutlet: IonRouterOutlet,
public toastCtrl: ToastController,
public user: UserData,
public config: Config
) { }

ngOnInit() {
this.updateSchedule();

this.ios = this.config.get('mode') === 'ios';
}

updateSchedule() {
// Close any open sliding items when the schedule updates
if (this.scheduleList) {
this.scheduleList.closeSlidingItems();
}

this.confData.getTimeline(this.dayIndex, this.queryText, this.excludeTracks, this.segment).subscribe((data: any) => {
this.shownSessions = data.shownSessions;
this.groups = data.groups;
});
}

async presentFilter() {
const modal = await this.modalCtrl.create({
component: ScheduleFilterPage,
swipeToClose: true,
presentingElement: this.routerOutlet.nativeEl,
componentProps: { excludedTracks: this.excludeTracks }
});
await modal.present();

const { data } = await modal.onWillDismiss();
if (data) {
this.excludeTracks = data;
this.updateSchedule();
}
}

async addFavorite(slidingItem: HTMLIonItemSlidingElement, sessionData: any) {
if (this.user.hasFavorite(sessionData.name)) {
// Prompt to remove favorite
this.removeFavorite(slidingItem, sessionData, 'Favorite already added');
} else {
// Add as a favorite
this.user.addFavorite(sessionData.name);

// Close the open item
slidingItem.close();

// Create a toast
const toast = await this.toastCtrl.create({
header: `${sessionData.name} was successfully added as a favorite.`,
duration: 3000,
buttons: [{
text: 'Close',
role: 'cancel'
}]
});

// Present the toast at the bottom of the page
await toast.present();
}

}

async removeFavorite(slidingItem: HTMLIonItemSlidingElement, sessionData: any, title: string) {
const alert = await this.alertCtrl.create({
header: title,
message: 'Would you like to remove this session from your favorites?',
buttons: [
{
text: 'Cancel',
handler: () => {
// they clicked the cancel button, do not remove the session
// close the sliding item and hide the option buttons
slidingItem.close();
}
},
{
text: 'Remove',
handler: () => {
// they want to remove this session from their favorites
this.user.removeFavorite(sessionData.name);
this.updateSchedule();

// close the sliding item and hide the option buttons
slidingItem.close();
}
}
]
});
// now present the alert on top of all other content
await alert.present();
}

async openSocial(network: string, fab: HTMLIonFabElement) {
const loading = await this.loadingCtrl.create({
message: `Posting to ${network}`,
duration: (Math.random() * 1000) + 500
});
await loading.present();
await loading.onWillDismiss();
fab.close();
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { SessionDetailPage } from './session-detail';

const routes: Routes = [
{
path: '',
component: SessionDetailPage
}
];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class SessionDetailPageRoutingModule { }
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button [defaultHref]="defaultHref"></ion-back-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-button (click)="toggleFavorite()">
<ion-icon *ngIf="!isFavorite" slot="icon-only" name="star-outline"></ion-icon>
<ion-icon *ngIf="isFavorite" slot="icon-only" name="star"></ion-icon>
</ion-button>
<ion-button (click)="shareSession()">
<ion-icon slot="icon-only" name="share"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>

<ion-content>
<div *ngIf="session" class="ion-padding">
<h1>{{session.name}}</h1>
<span *ngFor="let track of session?.tracks" [class]="'session-track-'+track.toLowerCase()">{{track}}</span>
<p>{{session.description}}</p>
<ion-text color="medium">
{{session.timeStart}} &ndash; {{session.timeEnd}}
<br /> {{session.location}}
</ion-text>
</div>

<ion-list>
<ion-item (click)="sessionClick('watch')" button>
<ion-label color="primary">Watch</ion-label>
</ion-item>
<ion-item (click)="sessionClick('add to calendar')" button>
<ion-label color="primary">Add to Calendar</ion-label>
</ion-item>
<ion-item (click)="sessionClick('mark as unwatched')" button>
<ion-label color="primary">Mark as Unwatched</ion-label>
</ion-item>
<ion-item (click)="sessionClick('download video')" button>
<ion-label color="primary">Download Video</ion-label>
<ion-icon slot="end" color="primary" size="small" name="cloud-download"></ion-icon>
</ion-item>
<ion-item (click)="sessionClick('leave feedback')" button>
<ion-label color="primary">Leave Feedback</ion-label>
</ion-item>
</ion-list>
</ion-content>
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { SessionDetailPage } from './session-detail';
import { SessionDetailPageRoutingModule } from './session-detail-routing.module';
import { IonicModule } from '@ionic/angular';

@NgModule({
imports: [
CommonModule,
IonicModule,
SessionDetailPageRoutingModule
],
declarations: [
SessionDetailPage,
]
})
export class SessionDetailModule { }
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
.session-track-ionic {
color: var(--ion-color-primary);
}

.session-track-angular {
color: var(--ion-color-angular);
}

.session-track-communication {
color: var(--ion-color-communication);
}

.session-track-tooling {
color: var(--ion-color-tooling);
}

.session-track-services {
color: var(--ion-color-services);
}

.session-track-design {
color: var(--ion-color-design);
}

.session-track-workshop {
color: var(--ion-color-workshop);
}

.session-track-food {
color: var(--ion-color-food);
}

.session-track-documentation {
color: var(--ion-color-documentation);
}

.session-track-navigation {
color: var(--ion-color-navigation);
}

/* Favorite Icon
* --------------------------------------------------------
*/

.show-favorite {
position: relative;
}

.icon-heart-empty,
.icon-heart {
--border-radius: 50%;
--padding-start: 0;
--padding-end: 0;

position: absolute;

top: 5px;
right: 5px;

width: 48px;
height: 48px;

font-size: 16px;

transition: transform 300ms ease;
}

.icon-heart-empty {
transform: scale(1);
}

.icon-heart {
transform: scale(0);
}

.show-favorite .icon-heart {
transform: scale(1);
}

.show-favorite .icon-heart-empty {
transform: scale(0);
}

h1 {
margin: 0;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import { Component } from '@angular/core';

import { ConferenceData } from '../../providers/conference-data';
import { ActivatedRoute } from '@angular/router';
import { UserData } from '../../providers/user-data';

@Component({
selector: 'page-session-detail',
styleUrls: ['./session-detail.scss'],
templateUrl: 'session-detail.html'
})
export class SessionDetailPage {
session: any;
isFavorite = false;
defaultHref = '';

constructor(
private dataProvider: ConferenceData,
private userProvider: UserData,
private route: ActivatedRoute
) { }

ionViewWillEnter() {
this.dataProvider.load().subscribe((data: any) => {
if (data && data.schedule && data.schedule[0] && data.schedule[0].groups) {
const sessionId = this.route.snapshot.paramMap.get('sessionId');
for (const group of data.schedule[0].groups) {
if (group && group.sessions) {
for (const session of group.sessions) {
if (session && session.id === sessionId) {
this.session = session;

this.isFavorite = this.userProvider.hasFavorite(
this.session.name
);

break;
}
}
}
}
}
});
}

ionViewDidEnter() {
this.defaultHref = `/app/tabs/schedule`;
}

sessionClick(item: string) {
console.log('Clicked', item);
}

toggleFavorite() {
if (this.userProvider.hasFavorite(this.session.name)) {
this.userProvider.removeFavorite(this.session.name);
this.isFavorite = false;
} else {
this.userProvider.addFavorite(this.session.name);
this.isFavorite = true;
}
}

shareSession() {
console.log('Clicked share session');
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { SignupPage } from './signup';

const routes: Routes = [
{
path: '',
component: SignupPage
}
];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class SignupPageRoutingModule { }
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>Signup</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>

<div class="signup-logo">
<img src="assets/img/appicon.svg" alt="Ionic Logo">
</div>

<form #signupForm="ngForm" novalidate>
<ion-list lines="none">
<ion-item>
<ion-label position="stacked" color="primary">Username</ion-label>
<ion-input [(ngModel)]="signup.username" name="username" type="text" #username="ngModel" required>
</ion-input>
</ion-item>
<ion-text color="danger">
<p [hidden]="username.valid || submitted == false" class="ion-padding-start">
Username is required
</p>
</ion-text>

<ion-item>
<ion-label position="stacked" color="primary">Password</ion-label>
<ion-input [(ngModel)]="signup.password" name="password" type="password" #password="ngModel" required>
</ion-input>
</ion-item>
<ion-text color="danger">
<p [hidden]="password.valid || submitted == false" class="ion-padding-start">
Password is required
</p>
</ion-text>
</ion-list>

<div class="ion-padding">
<ion-button (click)="onSignup(signupForm)" type="submit" expand="block">Create</ion-button>
</div>
</form>

</ion-content>
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';

import { SignupPage } from './signup';
import { SignupPageRoutingModule } from './signup-routing.module';

@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
SignupPageRoutingModule
],
declarations: [
SignupPage,
]
})
export class SignUpModule { }
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
.signup-logo {
padding: 20px 0;
min-height: 200px;
text-align: center;
}

.signup-logo img {
max-width: 150px;
}

.list {
margin-bottom: 0;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Router } from '@angular/router';

import { UserData } from '../../providers/user-data';

import { UserOptions } from '../../interfaces/user-options';



@Component({
selector: 'page-signup',
templateUrl: 'signup.html',
styleUrls: ['./signup.scss'],
})
export class SignupPage {
signup: UserOptions = { username: '', password: '' };
submitted = false;

constructor(
public router: Router,
public userData: UserData
) {}

onSignup(form: NgForm) {
this.submitted = true;

if (form.valid) {
this.userData.signup(this.signup.username);
this.router.navigateByUrl('/app/tabs/schedule');
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { SpeakerDetailPage } from './speaker-detail';

const routes: Routes = [
{
path: '',
component: SpeakerDetailPage
}
];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class SpeakerDetailPageRoutingModule { }
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<ion-content class="speaker-detail">
<ion-header class="ion-no-border">
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button defaultHref="/app/tabs/speakers"></ion-back-button>
</ion-buttons>
<ion-buttons *ngIf="speaker" slot="end">
<ion-button (click)="openContact(speaker)">
<ion-icon slot="icon-only" ios="call-outline" md="call-sharp"></ion-icon>
</ion-button>
<ion-button (click)="openSpeakerShare(speaker)">
<ion-icon slot="icon-only" ios="share-outline" md="share-sharp"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>

<div class="speaker-background">
<img [src]="speaker?.profilePic" [alt]="speaker?.name">
<h2>{{speaker?.name}}</h2>
</div>

<div class="ion-padding speaker-detail">
<p>{{speaker?.about}} Say hello on social media!</p>

<hr>

<ion-chip color="twitter" button (click)="openExternalUrl('https://twitter.com/' + speaker.twitter)">
<ion-icon name="logo-twitter"></ion-icon>
<ion-label>Twitter</ion-label>
</ion-chip>

<ion-chip color="dark" button (click)="openExternalUrl('https://github.com/ionic-team/ionic')">
<ion-icon name="logo-github"></ion-icon>
<ion-label>GitHub</ion-label>
</ion-chip>

<ion-chip color="instagram" button (click)="openExternalUrl('https://instagram.com/ionicframework')">
<ion-icon name="logo-instagram"></ion-icon>
<ion-label>Instagram</ion-label>
</ion-chip>
</div>
</ion-content>
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { SpeakerDetailPage } from './speaker-detail';
import { SpeakerDetailPageRoutingModule } from './speaker-detail-routing.module';
import { IonicModule } from '@ionic/angular';

@NgModule({
imports: [
CommonModule,
IonicModule,
SpeakerDetailPageRoutingModule
],
declarations: [
SpeakerDetailPage,
]
})
export class SpeakerDetailModule { }
Loading

0 comments on commit 2dbceba

Please sign in to comment.