Skip to content

Instantly share code, notes, and snippets.

@ifalldev

ifalldev/paywall.html

Last active October 4, 2017 11:25
Show Gist options
  • Save ifalldev/1b0e18f08a2652416c19b49ac1cdf8c6 to your computer and use it in GitHub Desktop.
Save ifalldev/1b0e18f08a2652416c19b49ac1cdf8c6 to your computer and use it in GitHub Desktop.
Download ZIP
rxpro pay wall
Raw
paywall.html
<ion-header>
<!-- ######################### DESKTOP ######################### -->
<div *ngIf="desktop">
<ion-toolbar class="first-toolbar">
<ion-title>
<img src="assets/img/logo.png">
</ion-title>
<ion-buttons end class="login-buttons">
<!-- ######################### SKIP ######################### -->
<button
ion-button
clear
class="user-title ad__countdown"
>
<span [innerHTML]="time"></span>
</button>
<button
ion-button
clear
(click)="backToApp()"
>
<span>voltar ao aplicativo</span>
<span style="color:black; margin: 0 10px;"> | </span> >
</button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar class="red-row">
</ion-toolbar>
</div>
<!-- ######################### MOBILE ######################### -->
<div *ngIf="mobile">
<ion-toolbar class="first-toolbar">
<ion-buttons start class="start-buttons">
<button ion-button clear class="">
<img src="assets/img/logo.png">
</button>
</ion-buttons>
<ion-title>
<!--<img src="assets/img/logo.png">-->
</ion-title>
<ion-buttons end class="login-buttons">
<!-- ######################### SKIP ######################### -->
<button
ion-button
clear
class="user-title ad__countdown"
>
<span [innerHTML]="time"></span>
</button>
<button
ion-button
clear
class="login-title ad__back-to-app"
(click)="backToApp()"
>
<span>voltar ao aplicativo</span>
</button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar class="red-row">
</ion-toolbar>
</div>
</ion-header>
<ion-content>
<!-- ######################### DESKTOP ######################### -->
<div class="ad__body">
<h1>Escolha a resposta que mais te agrada, por favor:</h1>
<ion-item>
<ion-label>Reposta 1</ion-label>
<ion-checkbox color="danger" (click)="backToApp()" checked="false"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Reposta 2</ion-label>
<ion-checkbox color="danger" (click)="backToApp()" checked="false"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Reposta 3</ion-label>
<ion-checkbox color="danger" (click)="backToApp()" checked="false"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Reposta 4</ion-label>
<ion-checkbox color="danger" (click)="backToApp()" checked="false"></ion-checkbox>
</ion-item>
</div>
<!-- ######################### QUESTION TITLE ######################### -->
<!-- ######################### QUESTION OPTIONS ######################### -->
<!-- ######################### MOBILE ######################### -->
<div *ngIf="mobile">
<!-- ######################### QUESTION TITLE ######################### -->
<!-- ######################### QUESTION OPTIONS ######################### -->
</div>
</ion-content>
Raw
paywall.ts
import { Component } from '@angular/core';
import { NavParams, AlertController, ModalController, NavController, Platform, Loading, LoadingController } from 'ionic-angular';
import { SamplesPage } from "../samples/samples";
import { IonicAuth } from '../../providers/ionicAuth'
import { User } from '../../models/user';
@Component({
selector: 'page-ad-questions',
templateUrl: 'ad-questions.html'
})
export class AdQuestionsPage {
public desktop:boolean;
public mobile:boolean;
private selectedUser: User;
private time: Number;
constructor(
public navCtrl: NavController,
private modalCtrl: ModalController,
public platform: Platform,
public loadingCtrl: LoadingController,
private navParams: NavParams,
private alertCtrl: AlertController,
private ionicAuth: IonicAuth,
) {
if (this.platform.is('core') || this.platform.is('ipad') || this.platform.is('tablet')) {
console.log("I'm a Desktop Device");
this.desktop = true;
this.mobile = false;
} else{
console.log("I'm a Mobile Device");
this.mobile = true;
this.desktop = false;
}
this.selectedUser = this.navParams.data.user;
this.time = 5;
const instance = this;
// FUNCAO PARA REDIRECIONAR O USUARIO APOS O TEMPO DO AD
setTimeout(() => {
instance.navCtrl.push(SamplesPage, { user: instance.selectedUser })
// REMOVE O INTERVAL (GARBAGE)
clearInterval(countdown);
// REINICIA A CONTAGEM
instance.time = 5;
}, 5000);
// FUNCAO INTERVALAR PARA DIMUNUIR A CONTAGEM
const countdown = setInterval(() => {
instance.time = Number(instance.time) - 1;
}, 1000);
}
// SKIP AD
backToApp(): void {
this.navCtrl.push(SamplesPage, { user: this.selectedUser })
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment