Skip to content

A
allo-app
Commit d1e42f50 by Nabil Sadki
Options

Sync

parent 6a845010
Showing with 554 additions and 43 deletions
config.xml
...@@ -107,7 +107,6 @@ ...@@ -107,7 +107,6 @@
</feature> </feature>
<engine name="android" spec="^8.1.0" /> <engine name="android" spec="^8.1.0" />
<allow-navigation href="http://localhost:8101" sessionid="600eac0d" /> <allow-navigation href="http://localhost:8101" sessionid="600eac0d" />
<allow-navigation href="http://localhost:8100" sessionid="bbeff116" />
<plugin name="cordova-sqlite-storage" spec="^3.2.0" /> <plugin name="cordova-sqlite-storage" spec="^3.2.0" />
<plugin name="cordova-plugin-advanced-http" spec="^2.1.1"> <plugin name="cordova-plugin-advanced-http" spec="^2.1.1">
<variable name="OKHTTP_VERSION" value="3.10.0" /> <variable name="OKHTTP_VERSION" value="3.10.0" />
...@@ -136,5 +135,4 @@ ...@@ -136,5 +135,4 @@
</plugin> </plugin>
<plugin name="cordova-plugin-network-information" spec="~2.0.2" /> <plugin name="cordova-plugin-network-information" spec="~2.0.2" />
<plugin name="cordova-plugin-qrscanner" spec="~3.0.1" /> <plugin name="cordova-plugin-qrscanner" spec="~3.0.1" />
<plugin name="cordova-plugin-camera" spec="~4.1.0" />
</widget> </widget>
ionic.config.json
...@@ -3,5 +3,6 @@ ...@@ -3,5 +3,6 @@
"integrations": { "integrations": {
"cordova": {} "cordova": {}
}, },
"type": "angular" "type": "angular",
"id": "a6265c40"
} }
src/app/app-routing.module.ts
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router'; import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { AuthGuardService } from './services/auth-guard.service'; import { AuthGuardService } from './services/auth-guard.service';
const routes: Routes = [
{ path: '', redirectTo: 'start', pathMatch: 'full' },
{ path: 'start', loadChildren: './pages/start/start.module#StartPageModule' },
{ path: 'login', loadChildren: './pages/compte/login/login.module#LoginPageModule' },
{ path: 'mainslider', loadChildren: './pages/mainslider/mainslider.module#MainsliderPageModule' },
{
path: 'app',
loadChildren: './pages/menu/menu.module#MenuPageModule',
canActivate: [AuthGuardService]
},
{
path: 'offre-details',
loadChildren: './pages/offres/offre-details/offre-details.module#OffreDetailsPageModule',
canActivate: [AuthGuardService]
},
{ path: 'login-help', loadChildren: './modals/login-help/login-help.module#LoginHelpPageModule' },
{ path: 'offres-carte-filters', loadChildren: './modals/offres-carte-filters/offres-carte-filters.module#OffresCarteFiltersPageModule' },
{ path: 'create-account', loadChildren: './pages/compte/create/create.module#CreatePageModule' }, { path: 'success', loadChildren: './modals/alerts/success/success.module#SuccessPageModule' },
{ path: 'error', loadChildren: './modals/alerts/error/error.module#ErrorPageModule' },
const routes: Routes = [
{ path: '', redirectTo: 'start', pathMatch: 'full' },
{ path: 'start', loadChildren: './pages/start/start.module#StartPageModule' }, ];
{ path: 'login', loadChildren: './pages/compte/login/login.module#LoginPageModule' },
{ path: 'mainslider', loadChildren: './pages/mainslider/mainslider.module#MainsliderPageModule' }, @NgModule({
{ imports: [
path: 'app', RouterModule.forRoot(
loadChildren: './pages/menu/menu.module#MenuPageModule', routes,
canActivate: [AuthGuardService] {
}, preloadingStrategy: PreloadAllModules
{ }
path: 'offre-details', )
loadChildren: './pages/offres/offre-details/offre-details.module#OffreDetailsPageModule', ],
canActivate: [AuthGuardService] exports: [RouterModule]
}, })
{ path: 'login-help', loadChildren: './modals/login-help/login-help.module#LoginHelpPageModule' }, export class AppRoutingModule { }
{ path: 'offres-carte-filters', loadChildren: './modals/offres-carte-filters/offres-carte-filters.module#OffresCarteFiltersPageModule' },
{ path: 'create-account', loadChildren: './pages/compte/create/create.module#CreatePageModule' },
];
@NgModule({
imports: [
RouterModule.forRoot(
routes,
{
preloadingStrategy: PreloadAllModules
}
)
],
exports: [RouterModule]
})
export class AppRoutingModule { }
......
src/app/app.module.ts
...@@ -31,8 +31,10 @@ import { environment } from 'src/environments/environment'; ...@@ -31,8 +31,10 @@ import { environment } from 'src/environments/environment';
import { AuthService } from './services/auth.service'; import { AuthService } from './services/auth.service';
import { AuthGuardService } from './services/auth-guard.service'; import { AuthGuardService } from './services/auth-guard.service';
import { LoginHelpPageModule } from './modals/login-help/login-help.module'; import { LoginHelpPageModule } from './modals/login-help/login-help.module';
import { SuccessPageModule } from './modals/alerts/success/success.module';
import { OffresCarteFiltersPageModule } from './modals/offres-carte-filters/offres-carte-filters.module'; import { OffresCarteFiltersPageModule } from './modals/offres-carte-filters/offres-carte-filters.module';
import { PipesModule } from './pipes/pipes.module'; import { PipesModule } from './pipes/pipes.module';
// import { ComponentsModule } from "./components/components.module";
// import { AngularFireAuthModule } from '@angular/fire/auth'; // import { AngularFireAuthModule } from '@angular/fire/auth';
// import * as firebase from 'firebase'; // import * as firebase from 'firebase';
...@@ -53,8 +55,10 @@ import { PipesModule } from './pipes/pipes.module'; ...@@ -53,8 +55,10 @@ import { PipesModule } from './pipes/pipes.module';
HttpClientModule, HttpClientModule,
LotsAGagnerFilterPageModule, LotsAGagnerFilterPageModule,
LoginHelpPageModule, LoginHelpPageModule,
SuccessPageModule,
OffresCarteFiltersPageModule, OffresCarteFiltersPageModule,
PipesModule PipesModule,
// ComponentsModule
], ],
providers: [ providers: [
StatusBar, StatusBar,
......
src/app/app.scss
...@@ -73,10 +73,239 @@ ion-modal .modal-wrapper { ...@@ -73,10 +73,239 @@ ion-modal .modal-wrapper {
border-radius: 10px !important; border-radius: 10px !important;
} }
ion-alert .alert-wrapper { ion-alert.alert-pulse .alert-wrapper {
box-shadow: 0 0 0 rgba(249, 49, 41, 0.8); box-shadow: 0 0 0 rgba(249, 49, 41, 0.8);
animation: pulse 2s infinite; animation: pulse 2s infinite;
} }
$white: #fcfcfc;
$gray: #cbcdd3;
$dark: #777777;
$error: #ef8d9c;
$orange: #ffc39e;
$success: #b0db7d;
$secondary: #99dbb4;
@import url("https://fonts.googleapis.com/css?family=Lato:400,700");
$font: "Lato", sans-serif;
ion-modal.alert-success {
.modal-wrapper {
max-height: 50vh !important;
position: absolute;
// width: 35%;
// height: 100%;
background: linear-gradient(to bottom right, $success 40%, $secondary 100%);
border-radius: 20px;
// box-shadow: 5px 5px 20px rgba($gray, 10%);
perspective: 40px;
.alert-message {
max-height: auto !important;
}
h1 {
font-size: 0.9em;
font-weight: 100;
letter-spacing: 3px;
padding-top: 5px;
color: $white;
padding-bottom: 5px;
text-transform: uppercase;
}
.green {
color: darken($secondary, 20%);
}
.alert {
font-weight: 700;
letter-spacing: 5px;
}
p {
font-size: 0.8em;
font-weight: 100;
color: darken($dark, 10%);
letter-spacing: 1px;
text-align: center;
}
button,
.dot {
cursor: pointer;
}
.dot {
width: 24px;
height: 24px;
background: $white;
border-radius: 50%;
position: absolute;
top: 4%;
right: 4%;
&:hover {
background: darken($white, 20%);
}
}
.face {
position: absolute;
width: 4rem;
height: 4rem;
background: $white;
border-radius: 50%;
border: 1px solid $dark;
top: 3rem;
left: calc(50% - 2rem);
z-index: 2;
animation: bounce 1s ease-in infinite;
}
.eye {
position: absolute;
width: 5px;
height: 5px;
background: $dark;
border-radius: 50%;
top: 40%;
left: 20%;
}
.right {
left: 68%;
}
.mouth {
position: absolute;
top: 43%;
left: 41%;
width: 7px;
height: 7px;
border-radius: 50%;
}
.happy {
border: 2px solid;
border-color: transparent $dark $dark transparent;
transform: rotate(45deg);
}
.sad {
top: 49%;
border: 2px solid;
border-color: $dark transparent transparent $dark;
transform: rotate(45deg);
}
.shadow {
position: absolute;
width: 4.5rem;
height: 1.5rem;
opacity: 0.5;
background: $dark;
left: 40%;
top: 6.5rem;
border-radius: 50%;
z-index: 1;
}
.scale {
animation: scale 1s ease-in infinite;
}
.move {
animation: move 3s ease-in-out infinite;
}
.message {
// position: absolute;
width: 100%;
text-align: center;
// height: 40%;
margin-top: 7rem;
padding: 1rem;
}
ion-button button{
// position: absolute;
background: $white;
// width: 50%;
height: 15%;
border-radius: 20px;
// top: 73%;
// left: 25%;
outline: 0;
border: none;
box-shadow: 2px 2px 10px rgba($dark, 0.5);
transition: all 0.5s ease-in-out;
&:hover {
background: darken($white, 5%);
transform: scale(1.05);
transition: all 0.3s ease-in-out;
}
}
}
}
@keyframes bounce {
50% {
transform: translateY(-10px);
}
}
@keyframes scale {
50% {
transform: scale(0.9);
}
}
@keyframes roll {
0% {
transform: rotate(0deg);
left: 25%;
}
50% {
left: 60%;
transform: rotate(168deg);
}
100% {
transform: rotate(0deg);
left: 25%;
}
}
@keyframes move {
0% {
left: 25%;
}
50% {
left: 60%;
}
100% {
left: 25%;
}
}
footer {
position: absolute;
bottom: 0;
right: 0;
text-align: center;
font-size: 1em;
text-transform: uppercase;
padding: 10px;
font-family: $font;
p {
color: $error;
letter-spacing: 2px;
}
a {
color: $success;
text-decoration: none;
&:hover {
color: $orange;
}
}
}
@-webkit-keyframes pulse { @-webkit-keyframes pulse {
0% { 0% {
......
src/app/components/alerts/success/success.component.spec.ts 0 → 100644
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { SuccessComponent } from './success.component';
describe('SuccessComponent', () => {
let component: SuccessComponent;
let fixture: ComponentFixture<SuccessComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ SuccessComponent ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SuccessComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/components/alerts/success/success.component.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-alert-success',
templateUrl: './success.component.html',
styleUrls: ['./success.component.scss'],
})
export class SuccessComponent implements OnInit {
constructor() { }
ngOnInit() {}
}
src/app/components/components.module.ts 0 → 100644
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { SuccessComponent } from "./alerts/success/success.component";
@NgModule({
declarations: [
SuccessComponent
],
imports: [
IonicModule,
CommonModule
],
exports: [
SuccessComponent
],
entryComponents: []
})
export class ComponentsModule { }
src/app/modals/alerts/error/error.module.ts 0 → 100644
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { ErrorPage } from './error.page';
const routes: Routes = [
{
path: '',
component: ErrorPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [ErrorPage]
})
export class ErrorPageModule {}
src/app/modals/alerts/error/error.page.html 0 → 100644
<ion-header>
<ion-toolbar>
<ion-title>error</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>
src/app/modals/alerts/error/error.page.spec.ts 0 → 100644
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ErrorPage } from './error.page';
describe('ErrorPage', () => {
let component: ErrorPage;
let fixture: ComponentFixture<ErrorPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ErrorPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ErrorPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/modals/alerts/error/error.page.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-error',
templateUrl: './error.page.html',
styleUrls: ['./error.page.scss'],
})
export class ErrorPage implements OnInit {
constructor() { }
ngOnInit() {
}
}
src/app/modals/alerts/success/success.module.ts 0 → 100644
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { SuccessPage } from './success.page';
const routes: Routes = [
{
path: '',
component: SuccessPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [SuccessPage]
})
export class SuccessPageModule {}
src/app/modals/alerts/success/success.page.html 0 → 100644
<div class="alert-success">
<div class="face">
<div class="eye"></div>
<div class="eye right"></div>
<div class="mouth happy"></div>
</div>
<div class="shadow scale"></div>
<div class="message">
<h1 class="alert">{{ title }}</h1>
<p>{{ message }}</p>
</div>
</div>
<ion-footer class="ion-text-right">
<ion-button color="light" class="ion-margin-horizontal" (click)="modalController.dismiss();">{{ button }}</ion-button>
</ion-footer>
\ No newline at end of file
src/app/modals/alerts/success/success.page.spec.ts 0 → 100644
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { SuccessPage } from './success.page';
describe('SuccessPage', () => {
let component: SuccessPage;
let fixture: ComponentFixture<SuccessPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ SuccessPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SuccessPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/modals/alerts/success/success.page.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
import { NavParams, ModalController } from '@ionic/angular';
@Component({
selector: 'app-success',
templateUrl: './success.page.html',
styleUrls: ['./success.page.scss'],
})
export class SuccessPage implements OnInit {
public title = '';
public message = '';
public button = '';
constructor(
public navParams: NavParams,
public modalController: ModalController
) {
this.title = navParams.get('title');
this.message = navParams.get('message');
this.button = navParams.get('button');
}
ngOnInit() {
}
}
src/app/pages/compte/login/login.module.ts
...@@ -6,6 +6,7 @@ import { Routes, RouterModule } from '@angular/router'; ...@@ -6,6 +6,7 @@ import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular'; import { IonicModule } from '@ionic/angular';
import { LoginPage } from './login.page'; import { LoginPage } from './login.page';
import { ComponentsModule } from "../../../components/components.module";
const routes: Routes = [ const routes: Routes = [
{ {
...@@ -19,6 +20,7 @@ const routes: Routes = [ ...@@ -19,6 +20,7 @@ const routes: Routes = [
CommonModule, CommonModule,
FormsModule, FormsModule,
IonicModule, IonicModule,
ComponentsModule,
ReactiveFormsModule, ReactiveFormsModule,
RouterModule.forChild(routes) RouterModule.forChild(routes)
], ],
......
src/app/pages/compte/login/login.page.html
...@@ -72,5 +72,14 @@ ...@@ -72,5 +72,14 @@
</ion-button> </ion-button>
</ion-col> </ion-col>
</ion-row> </ion-row>
<ion-row>
<ion-col class="ion-no-padding ion-text-start">
<ion-button color="dark" class="btn-g ion-no-margin" (click)="presentSuccessModal()">
<ion-icon name="walk"></ion-icon>
Anonyme
</ion-button>
</ion-col>
</ion-row>
</ion-grid> </ion-grid>
<app-alert-success></app-alert-success>
</ion-content> </ion-content>
\ No newline at end of file
src/app/pages/compte/login/login.page.ts
...@@ -67,6 +67,10 @@ export class LoginPage implements OnInit { ...@@ -67,6 +67,10 @@ export class LoginPage implements OnInit {
return await modal.present(); return await modal.present();
} }
async presentSuccessModal() {
this._ALLO.presentSuccessModal('Good', 'Lorem is better than any other methods of...');
}
doAnonymousLogIn() { doAnonymousLogIn() {
this.ga.trackEvent('Login', 'Tapped button', 'Anonymous login'); this.ga.trackEvent('Login', 'Tapped button', 'Anonymous login');
this._AUTH.isAnonymous = true; this._AUTH.isAnonymous = true;
...@@ -163,4 +167,8 @@ export class LoginPage implements OnInit { ...@@ -163,4 +167,8 @@ export class LoginPage implements OnInit {
// this._ALLO.dismissLoading(); // this._ALLO.dismissLoading();
// }); // });
} }
openAlert() {
this._ALLO.presentAlert('', '<div class="face"> <div class="eye"></div> <div class="eye right"></div> <div class="mouth happy"></div> </div> <div class="shadow scale"></div> <div class="message"><h1 class="alert">Succès!</h1><p>yay, everything is working. yay, everything is working. yay, everything is working. yay, everything is working. yay, everything is working. yay, everything is working. yay, everything is working. yay, everything is working. yay, everything is working.</p></div>', 'alert-success');
}
} }
src/app/services/allo-service.ts
import { LoadingController, AlertController, ToastController } from '@ionic/angular'; import { LoadingController, AlertController, ToastController } from '@ionic/angular';
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage'; import { Storage } from '@ionic/storage';
import { ModalController } from '@ionic/angular';
import { SuccessPage } from '../modals/alerts/success/success.page';
@Injectable({ providedIn: 'root' }) @Injectable({ providedIn: 'root' })
export class AlloService { export class AlloService {
...@@ -19,6 +21,7 @@ export class AlloService { ...@@ -19,6 +21,7 @@ export class AlloService {
private alertCtrl: AlertController, private alertCtrl: AlertController,
private loadingCtrl: LoadingController, private loadingCtrl: LoadingController,
private toastCtrl: ToastController, private toastCtrl: ToastController,
private modalCtrl: ModalController,
private _STOR: Storage private _STOR: Storage
) { ) {
this.setDefaultParams(); this.setDefaultParams();
...@@ -81,10 +84,11 @@ export class AlloService { ...@@ -81,10 +84,11 @@ export class AlloService {
} }
} }
async presentAlert(title, message) { async presentAlert(title, message, classes?: string) {
const alert = await this.alertCtrl.create({ const alert = await this.alertCtrl.create({
header: title, header: title,
message: message, message: message,
cssClass: classes,
buttons: ['OK'] buttons: ['OK']
}); });
...@@ -142,4 +146,20 @@ export class AlloService { ...@@ -142,4 +146,20 @@ export class AlloService {
}); });
toast.present(); toast.present();
} }
/**
* Modals
*/
async presentSuccessModal(title: string, message: string, buttonText?: string) {
const modal = await this.modalCtrl.create({
component: SuccessPage,
cssClass: 'alert-success',
componentProps: {
title: title,
message: message,
button: buttonText ? buttonText : 'OK'
}
});
return await modal.present();
}
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment