Vacation Rule Continued

production
haroon amjad 7 years ago
parent b5f3b6f767
commit 1921701ef9

@ -1,14 +1,8 @@
<ion-header> <ion-header>
<ion-toolbar class="header-toolbar"> <ion-toolbar class="header-toolbar">
<nav-buttons></nav-buttons> <nav-buttons></nav-buttons>
<ion-title color="light">{{ 'general,vacation-rule' | translate}}</ion-title> <ion-title color="light">{{ 'vacation-rule, vacation-rule-label' | translate}}</ion-title>
</ion-toolbar> </ion-toolbar>
<!-- <ion-toolbar class="header-toolbar">
<ion-buttons slot="start">
<ion-back-button color="light" class="btnBack"></ion-back-button>
</ion-buttons>
<ion-title color="light">{{ 'general,vacation-rule' | translate}}</ion-title>
</ion-toolbar> -->
</ion-header> </ion-header>
<ion-content padding> <ion-content padding>
@ -79,6 +73,6 @@
<ion-footer> <ion-footer>
<div class="centerDiv"> <div class="centerDiv">
<ion-button class="footer-button" color="customnavy" ion-button (click)="Vaction_Type()">{{'vacation-rule, create-rule' | translate}}</ion-button> <ion-button class="footer-button" color="customnavy" ion-button (click)="Vacation_Type()">{{'vacation-rule, create-rule' | translate}}</ion-button>
</div> </div>
</ion-footer> </ion-footer>

@ -124,8 +124,8 @@ export class HomeComponent implements OnInit {
console.log(this.GetVacationRulesList); console.log(this.GetVacationRulesList);
} }
Vaction_Type() { Vacation_Type() {
this.cs.navigateForward('/vacation-rule/vacation-type');
} }
getVacationRules() { getVacationRules() {

@ -8,6 +8,7 @@ import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular'; import { IonicModule } from '@ionic/angular';
import { VacationRulePage } from './vacation-rule.page'; import { VacationRulePage } from './vacation-rule.page';
import { VacationTypeComponent } from './vacation-type/vacation-type.component';
const routes: Routes = [ const routes: Routes = [
{ {
@ -17,6 +18,10 @@ const routes: Routes = [
{ {
path: 'home', path: 'home',
component: HomeComponent component: HomeComponent
},
{
path: 'vacation-type',
component: VacationTypeComponent
} }
] ]
} }
@ -32,7 +37,8 @@ const routes: Routes = [
], ],
declarations: [ declarations: [
VacationRulePage, VacationRulePage,
HomeComponent HomeComponent,
VacationTypeComponent
] ]
}) })
export class VacationRulePageModule { } export class VacationRulePageModule { }

@ -0,0 +1,40 @@
<ion-header>
<ion-toolbar class="header-toolbar">
<nav-buttons></nav-buttons>
<ion-title color="light">{{ 'vacation-rule, vacation-type' | translate}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<!-- <div class="progcontainer">
<ul class="cusprogressbar">
<li class="active">{{'vacation-rule, rule-type' | translate}}</li>
<li>{{'vacation-rule, notification-label' | translate}}</li>
<li>{{'vacation-rule, create-vacation-rule' | translate}}</li>
</ul>
</div> -->
<ion-grid no-padding>
<ul class="cusprogressbar">
<ion-row nowrap>
<ion-col size="4">
<!-- <ul class="cusprogressbar"> -->
<li class="active">{{'vacation-rule, rule-type' | translate}}</li>
<!-- </ul> -->
</ion-col>
<ion-col size="4">
<!-- <ul class="cusprogressbar"> -->
<li>{{'vacation-rule, notification-label' | translate}}</li>
<!-- </ul> -->
</ion-col>
<ion-col size="4">
<!-- <ul class="cusprogressbar"> -->
<li>{{'vacation-rule, create-vacation-rule' | translate}}</li>
<!-- </ul> -->
</ion-col>
</ion-row>
</ul>
</ion-grid>
</ion-content>

@ -0,0 +1,83 @@
li {
width: 100%;
}
.cusprogressbar li:after {
width: 100%;
height: 2px;
content: "";
position: absolute;
background-color: #d9d9d9;
top: 20px;
}
// .progcontainer {
// margin: auto;
// text-align: center;
// width: 100%;
// min-height: 100px;
// }
// .cusprogressbar {
// counter-reset: step;
// padding: 0px;
// }
// .cusprogressbar li {
// list-style-type: none;
// width: 33.333%;
// // @include ltr{
// // float: left;
// // }
// // @include rtl{
// // float: right;
// // }
// font-size: 12px;
// position: relative;
// text-align: center;
// color: #7F8C8D;
// // @include ltr(){
// // font-family: $fontFamilySemiBoldEN;
// // }
// // @include rtl(){
// // font-family: $fontFamilyIOSAR;
// // font-weight: bold;
// // }
// }
// .cusprogressbar li:before {
// width: 40px;
// height: 40px;
// content: counter(step);
// color: #ffffff;
// counter-increment: step;
// line-height: 40px;
// border: 0px;
// background-color: #acacac;
// display: block;
// text-align: center;
// margin: 0 auto 10px auto;
// border-radius: 50%;
// }
// .cusprogressbar li:after {
// width: 100%;
// height: 2px;
// content: '';
// position: absolute;
// background-color: #d9d9d9;
// top: 20px;
// // @include ltr{
// // left: -50%;
// // }
// // @include rtl{
// // right: -50%;
// // }
// z-index: -1;
// }
// .cusprogressbar li:first-child:after {
// content: none;
// }
// .cusprogressbar li.active {
// color: #209a83;
// }
// .cusprogressbar li.active:before {
// background-color: #209a83;
// }

@ -0,0 +1,27 @@
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { VacationTypeComponent } from './vacation-type.component';
describe('VacationTypeComponent', () => {
let component: VacationTypeComponent;
let fixture: ComponentFixture<VacationTypeComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ VacationTypeComponent ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(VacationTypeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

@ -0,0 +1,14 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-vacation-type',
templateUrl: './vacation-type.component.html',
styleUrls: ['./vacation-type.component.scss'],
})
export class VacationTypeComponent implements OnInit {
constructor() { }
ngOnInit() {}
}

@ -118,6 +118,18 @@
"create-rule": { "create-rule": {
"en": "Create Rule", "en": "Create Rule",
"ar": "إنشاء قاعدة" "ar": "إنشاء قاعدة"
},
"vacation-rule-label": {
"en": "Vacation Rule",
"ar": "قاعدة عطلة"
},
"vacation-type": {
"en": "Vacation Type",
"ar": "نوع العطلة"
},
"create-vacation-rule": {
"en": "Create Vacation Rule",
"ar": "إنشاء قاعدة عطلة"
} }
}, },
"verificationcode": { "verificationcode": {
@ -702,13 +714,13 @@
"vacation-rule": { "vacation-rule": {
"en": "Vacation Rule", "en": "Vacation Rule",
"ar": "قاعدة عطلة" "ar": "قاعدة عطلة"
} },
"en": "Login", "en": "Login",
"ar": "الدخول" "ar": "الدخول"
}, },
"username":{ "username": {
"en":"User Name", "en": "User Name",
"ar":"اسم المستخدم" "ar": "اسم المستخدم"
}, },
"login-type": { "login-type": {
"en": "Login Type", "en": "Login Type",
@ -782,53 +794,51 @@
"en": "National ID or Iqama", "en": "National ID or Iqama",
"ar": "رقم الهوية أو الإقامة" "ar": "رقم الهوية أو الإقامة"
}, },
"sms-page":{ "sms-page": {
"en": "Verify OTP", "en": "Verify OTP",
"ar":"تحقق مرة واحدة كلمة المرور" "ar": "تحقق مرة واحدة كلمة المرور"
} },
}, "changePassword": {
"changePassword":{ "newPassword": {
"newPassword":{ "en": "New Password",
"en":"New Password", "ar": "كلمة المرور الجديدة"
"ar":"كلمة المرور الجديدة" },
}, "confirmPassword": {
"confirmPassword":{ "en": "Confirm Password",
"en":"Confirm Password", "ar": "تأكيد كلمة المرور"
"ar":"تأكيد كلمة المرور" },
}, "passwordchanged": {
"passwordchanged":{ "en": "Your password changed successfully",
"en":"Your password changed successfully", "ar": "تم تغيير كلمة المرور الخاصة بك بنجاح"
"ar":"تم تغيير كلمة المرور الخاصة بك بنجاح"
} }
},
"verificationcode":
{
"verificationcode":{
"en":"Verification Code",
"ar":"رمز التحقق"
}, },
"emptyCode":{ "verificationcode": {
"en":"Please enter the verification code", "verification-code": {
"ar":"الرجاء ادخال رمز التحقق" "en": "Verification Code",
"ar": "رمز التحقق"
},
"emptyCode": {
"en": "Please enter the verification code",
"ar": "الرجاء ادخال رمز التحقق"
}, },
"title":{ "title": {
"en":"You will receive a ", "en": "You will receive a ",
"ar":" سوف تستلم " "ar": " سوف تستلم "
}, },
"by":{ "by": {
"en":" by ", "en": " by ",
"ar":"عن طريق " "ar": "عن طريق "
}, },
"sms":{ "sms": {
"en":"SMS", "en": "SMS",
"ar":" رسالة نصية " "ar": " رسالة نصية "
}, },
"instruct":{ "instruct": {
"en":" fill the code and ", "en": " fill the code and ",
"ar":" ادخل الرمز و اضغط " "ar": " ادخل الرمز و اضغط "
} }
}, },
"general": { "general": {
"birth_date": { "birth_date": {
"en": "Birth Date", "en": "Birth Date",
"ar": "تاريخ الميلاد" "ar": "تاريخ الميلاد"
@ -1301,7 +1311,7 @@
"en": "Read More >", "en": "Read More >",
"ar": "اقرأ المزيد >" "ar": "اقرأ المزيد >"
}, },
"more":{ "more": {
"en": "More...", "en": "More...",
"ar": "أكثر..." "ar": "أكثر..."
}, },
@ -1381,4 +1391,5 @@
"en": "User has no permissions", "en": "User has no permissions",
"ar": "المستخدم ليس لدية صلاحيات" "ar": "المستخدم ليس لدية صلاحيات"
} }
}
} }

@ -28,6 +28,10 @@ body{
} }
.header-toolbar {
--background: linear-gradient(45deg, #3ac1f1 0%, #19a163 36%, #19a163 59%, #1a586d 100%);
}
ion-label{ ion-label{
color:var(--labelColor) !important; color:var(--labelColor) !important;
} }

Loading…
Cancel
Save