WrenchBoard/WrenchBoardIonic2023
2
0
Fork 0
Code Issues Pull Requests Releases Activity

job manage pages

Browse Source
This commit is contained in:
CHIEFSOFT\ameye
2023-08-17 06:37:40 -04:00
parent bb84af37ee
commit aa8b643fb2
33 changed files with 2421 additions and 585 deletions
Download Patch File Download Diff File Expand all files Collapse all files
REMEMBER.txt
+6 -1
View File
@@ -10,4 +10,9 @@ ionic generate page activetask
ionic generate page mytask
ionic generate page jobmanager
ionic generate page jobinterest
ionic generate page jobinterest
ionic generate page jobreview
ionic generate page jobpastdue
ionic generate page jobactive
src/app/app-routing.module.ts
+12
View File
@@ -170,6 +170,18 @@ const routes: Routes = [
path: 'myfiles',
loadChildren: () => import('./pages/myfiles/myfiles.module').then(m => m.MyfilesPageModule)
},
{
path: 'jobreview',
loadChildren: () => import('./pages/jobreview/jobreview.module').then(m => m.JobreviewPageModule)
},
{
path: 'jobpastdue',
loadChildren: () => import('./pages/jobpastdue/jobpastdue.module').then(m => m.JobpastduePageModule)
},
{
path: 'jobactive',
loadChildren: () => import('./pages/jobactive/jobactive.module').then(m => m.JobactivePageModule)
},
];
@NgModule({
src/app/pages/family/family.page.html
+33 -31
View File
@@ -111,15 +111,41 @@
</div>
<div class="total">
<div class="star-rate">
<ion-icon name="star-half-outline" color="warning"></ion-icon>
<ion-label class="bold">{{suggestion_total}} Items</ion-label>
<div *ngIf="suggestion_total > 0">
<div class="total">
<div class="star-rate">
<ion-icon name="star-half-outline" color="warning"></ion-icon>
<ion-label class="bold">{{suggestion_total}} Items</ion-label>
</div>
<!-- <ion-label class="color">See all</ion-label>-->
</div>
<!-- <ion-label class="color">See all</ion-label>-->
</div>
<div class="reviw_list" *ngFor="let item of familyPendingData">
<div class="profile">
<div class="left">
<div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/taskbanners/'+item.banner+')'"></div>
<div style="margin-left: 10px;">
<ion-label class="bold">{{item.title}}</ion-label>
</div>
</div>
<div class="right">
<div class="select">
<!-- <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
<ion-label class="rate_num">{{item.status_text}}</ion-label>
</div>
<!-- <ion-icon name="ellipsis-horizontal-circle-outline"></ion-icon>-->
</div>
</div>
<ion-label>{{item.description}}
</ion-label>
<div class="like">
<!-- <ion-icon slot="start" name="heart" color="danger" class="heart"></ion-icon>-->
<ion-label class="name_bg_text">{{item.firstname}} </ion-label>
<ion-label class="time">{{item.added}}</ion-label>
</div>
</div>
</div>
<!-- <div class="story-item">-->
<!-- <div class="menu">-->
@@ -152,31 +178,7 @@
<!-- </div>-->
<!-- </div>-->
<div class="reviw_list" *ngFor="let item of familyPendingData">
<div class="profile">
<div class="left">
<div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/taskbanners/'+item.banner+')'"></div>
<div style="margin-left: 10px;">
<ion-label class="bold">{{item.title}}</ion-label>
</div>
</div>
<div class="right">
<div class="select">
<!-- <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
<ion-label class="rate_num">{{item.status_text}}</ion-label>
</div>
<!-- <ion-icon name="ellipsis-horizontal-circle-outline"></ion-icon>-->
</div>
</div>
<ion-label>{{item.description}}
</ion-label>
<div class="like">
<!-- <ion-icon slot="start" name="heart" color="danger" class="heart"></ion-icon>-->
<ion-label class="name_bg_text">{{item.firstname}} </ion-label>
<ion-label class="time">{{item.added}}</ion-label>
</div>
</div>
</div>
</div>
src/app/pages/familylogin/familylogin.page.html
+1 -1
View File
@@ -11,7 +11,7 @@
<ion-label class="simp_lbl">Family Login</ion-label>
<ion-item lines="none">
<ion-icon slot="start" name="mail-outline"></ion-icon>
<ion-input type="email" placeholder="Username" maxlength="8" [(ngModel)]='username'></ion-input>
<ion-input type="email" placeholder="Username" maxlength="12" [(ngModel)]='username'></ion-input>
</ion-item>
<ion-item lines="none">
src/app/pages/jobactive/jobactive-routing.module.ts
+17
View File
@@ -0,0 +1,17 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { JobactivePage } from './jobactive.page';
const routes: Routes = [
{
path: '',
component: JobactivePage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class JobactivePageRoutingModule {}
src/app/pages/jobactive/jobactive.module.ts
+20
View File
@@ -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 { JobactivePageRoutingModule } from './jobactive-routing.module';
import { JobactivePage } from './jobactive.page';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
JobactivePageRoutingModule
],
declarations: [JobactivePage]
})
export class JobactivePageModule {}
src/app/pages/jobactive/jobactive.page.html
+9
View File
@@ -0,0 +1,9 @@
<ion-header>
<ion-toolbar>
<ion-title>jobactive</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>
src/app/pages/jobactive/jobactive.page.scss
+385
View File
@@ -0,0 +1,385 @@
ion-content {
.back_image {
width: 100%;
height: 230px;
.back {
font-size: 25px;
color: white;
}
}
.flex {
display: flex;
justify-content: space-between;
align-items: center;
ion-icon {
font-size: 22px;
}
}
.row {
display: flex;
align-items: center;
margin-top: 10px;
.bg_text {
color: var(--ion-color-primary);
background: #dfe1f3;
font-size: 12px;
padding: 2px 5px;
border-radius: 5px;
margin-right: 10px;
}
.rate {
display: flex;
align-items: center;
.review {
margin-left: 5px;
}
}
}
.color_text {
margin-top: 10px;
font-size: 22px;
font-family: 'semi-bold';
color: var(--ion-color-primary);
}
.items {
display: flex;
justify-content: space-between;
margin-top: 10px;
margin-bottom: 20px;
border-bottom: 1px solid lightgrey;
padding-bottom: 10px;
.stud {
display: flex;
align-items: center;
ion-icon {
margin-right: 5px;
}
ion-label {
color: grey;
}
}
}
.about {
margin-top: 10px;
.head_text {
font-size: 18px;
font-family: 'semi-bold';
margin-bottom: 10px;
}
.mentor {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
.left {
display: flex;
.men_image {
height: 50px;
width: 50px;
border-radius: 100%;
}
.bold {
font-family: 'semi-bold';
}
.grey {
color: grey;
font-size: 14px;
}
}
ion-icon {
font-size: 25px;
}
}
.description {
color: grey;
margin-bottom: 5px;
}
}
.lesson {
margin-top: 20px;
.bold {
font-family: 'semi-bold';
}
.color {
color: var(--ion-color-primary);
}
.grey {
color: grey;
}
.sec {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
}
.video {
display: flex;
justify-content: space-between;
align-items: center;
background-color: white;
padding: 15px;
box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.1);
border-radius: 10px;
margin-top: 20px;
.left {
display: flex;
}
.men_image {
height: 40px;
width: 40px;
border-radius: 100%;
}
.text {
margin-left: 10px;
}
.bold_text {
font-size: 16px;
font-family: 'bold';
}
.grey_text {
font-size: 14px;
color: grey;
}
}
}
.review_tab {
margin-top: 20px;
.total {
display: flex;
align-items: center;
justify-content: space-between;
.star-rate {
display: flex;
align-items: center;
.bold {
font-size: 17px;
font-family: 'semi-bold';
margin-left: 5px;
}
}
.color {
color: var(--ion-color-primary);
font-size: 14px;
}
}
.story-item {
overflow: scroll;
display: flex;
flex-direction: row;
margin-top: 20px;
.menu {
width: 100%;
display: flex;
flex-direction: row;
.item {
padding: 5px;
margin: 5px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
ion-thumbnail {
border-radius: 15px;
width: max-content;
height: 60px;
width: 60px;
--border-radius: 50%;
}
ion-label {
font-size: 14px;
font-family: "medium";
color: var(--ion-color-medium);
}
}
.text {
display: flex;
align-items: center;
text-align: center;
.select {
display: flex;
align-items: center;
border: 1px solid var(--ion-color-primary);
border-radius: 20px;
padding: 2px 15px;
margin-right: 10px;
.rate_num {
margin-left: 5px;
color: var(--ion-color-primary);
}
}
.show {
background-color: var(--ion-color-primary);
}
.white {
color: white !important;
}
.choice {
display: flex;
}
}
}
}
.reviw_list {
margin-top: 25px;
.profile {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
.left {
display: flex;
align-items: center;
.men_image {
height: 40px;
width: 40px;
border-radius: 100%;
}
.bold {
font-family: 'semi-bold';
}
.grey {
color: grey;
font-size: 14px;
}
}
.right {
display: flex;
align-items: center;
.select {
display: flex;
align-items: center;
border: 1px solid var(--ion-color-primary);
border-radius: 20px;
padding: 2px 15px;
margin-right: 10px;
.rate_num {
margin-left: 5px;
color: var(--ion-color-primary);
}
}
ion-icon {
font-size: 20px;
}
}
}
.like {
display: flex;
align-items: center;
margin-top: 10px;
.heart {
font-size: 25px;
margin-right: 5px;
}
.count {
margin-right: 10px;
}
.time {
color: grey;
font-size: 14px;
}
}
}
}
.bold_text {
font-size: 20px;
font-family: 'bold';
}
}
ion-footer {
--background: white;
ion-toolbar {
--border-width: 0px;
padding: 10px;
align-items: center;
ion-icon {
color: white;
font-size: 25px;
}
.button {
background-color: var(--ion-color-primary);
display: flex;
align-items: center;
justify-content: space-around;
border-radius: 30px;
padding: 12px 0;
.text {
color: white;
}
}
}
}
src/app/pages/jobactive/jobactive.page.spec.ts
+24
View File
@@ -0,0 +1,24 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { JobactivePage } from './jobactive.page';
describe('JobactivePage', () => {
let component: JobactivePage;
let fixture: ComponentFixture<JobactivePage>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [ JobactivePage ],
imports: [IonicModule.forRoot()]
}).compileComponents();
fixture = TestBed.createComponent(JobactivePage);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/pages/jobactive/jobactive.page.ts
+15
View File
@@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-jobactive',
templateUrl: './jobactive.page.html',
styleUrls: ['./jobactive.page.scss'],
})
export class JobactivePage implements OnInit {
constructor() { }
ngOnInit() {
}
}
src/app/pages/jobmanager/jobmanager.page.html
+85 -81
View File
@@ -7,114 +7,118 @@
</div>
<div class="ion-padding">
<div class="flex">
<ion-label class="bold_text">Jobs Manager</ion-label>
<!-- <ion-icon slot="end" name="bookmark-outline" color="primary"></ion-icon>-->
</div>
<div class="boxed_contents">
<div class="row">
<ion-label class="bg_text">.....</ion-label>
<div class="rate">
<ion-button size="small" fill="outline" (click)="onMyJobs()">
<ion-icon name="star-half-outline" color="warning"></ion-icon>
My Jobs</ion-button>
<div class="flex">
<ion-label class="bold_text">Jobs Manager</ion-label>
<!-- <ion-icon slot="end" name="bookmark-outline" color="primary"></ion-icon>-->
</div>
</div>
<!-- <ion-label class="color_text">$40</ion-label>-->
<div class="items">
<div class="stud">
<ion-icon slot="start" name="people" color="primary"></ion-icon>
<ion-label>{{total_active}} Active</ion-label>
<div class="row">
<ion-label class="bg_text">.....</ion-label>
<div class="rate">
<ion-button size="small" fill="outline" (click)="onMyJobs()">
<ion-icon name="star-half-outline" color="warning"></ion-icon>
My Jobs</ion-button>
</div>
</div>
<div class="stud">
<ion-icon slot="start" name="time" color="primary"></ion-icon>
<ion-label>{{total_review}} Review</ion-label>
<!-- <ion-label class="color_text">$40</ion-label>-->
<div class="items">
<div class="stud">
<ion-icon slot="start" name="people" color="primary"></ion-icon>
<ion-label>{{total_active}} Active</ion-label>
</div>
<div class="stud">
<ion-icon slot="start" name="time" color="primary"></ion-icon>
<ion-label>{{total_review}} Review</ion-label>
</div>
<div class="stud">
<ion-icon slot="start" name="document-text" color="primary"></ion-icon>
<ion-label>{{total_pastdue}} Past Due</ion-label>
</div>
</div>
<div class="stud">
<ion-icon slot="start" name="document-text" color="primary"></ion-icon>
<ion-label>{{total_pastdue}} Past Due</ion-label>
</div>
</div>
<ion-segment [(ngModel)]="tabs">
<ion-segment-button value="active">
<ion-label>Active</ion-label>
</ion-segment-button>
<ion-segment-button value="review">
<ion-label>Review</ion-label>
</ion-segment-button>
<ion-segment-button value="pastdue">
<ion-label>Past Due</ion-label>
</ion-segment-button>
</ion-segment>
<ion-segment [(ngModel)]="tabs">
<ion-segment-button value="active">
<ion-label>Active</ion-label>
</ion-segment-button>
<ion-segment-button value="review">
<ion-label>Review</ion-label>
</ion-segment-button>
<ion-segment-button value="pastdue">
<ion-label>Past Due</ion-label>
</ion-segment-button>
</ion-segment>
<div *ngIf="tabs =='active'" class="lesson">
<ion-label class="head_text">Currently Active</ion-label>
<div *ngIf="tabs =='active'" class="lesson">
<ion-label class="head_text">Currently Active</ion-label>
<div class="video" *ngFor="let item of jobManagerActiveData">
<div class="left">
<div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/line.png)'"></div>
<div class="video" *ngFor="let item of jobManagerActiveData" (click)="jobActive(item)">
<div class="left">
<div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/line.png)'"></div>
<div class="text">
<ion-label class="bold_text">{{item.title}}</ion-label>
<ion-label class="grey_text">{{item.description}}</ion-label>
<ion-label class="price_line">{{item.contract}} {{item.price*0.01}} {{item.currency}} </ion-label>
<ion-label class="due_date">Due Date: {{item.delivery_date}}</ion-label>
<div class="text">
<ion-label class="bold_text">{{item.title}}</ion-label>
<ion-label class="grey_text">{{item.description}}</ion-label>
<ion-label class="price_line">{{item.contract}} {{item.price*0.01}} {{item.currency}} </ion-label>
<ion-label class="due_date">Due Date: {{item.delivery_date}}</ion-label>
</div>
</div>
<div class="right">
<ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
</div>
</div>
<div class="right">
<ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
</div>
</div>
<div *ngIf="tabs =='review'" class="lesson">
<ion-label class="head_text">Jobs Ready for Review</ion-label>
</div>
<div class="video" *ngFor="let item of jobManagerReviewData" (click)="jobReview(item)">
<div class="left">
<div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/line.png)'"></div>
<div *ngIf="tabs =='review'" class="lesson">
<ion-label class="head_text">Jobs Ready for Review</ion-label>
<div class="video" *ngFor="let item of jobManagerReviewData">
<div class="left">
<div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/line.png)'"></div>
<div class="text">
<ion-label class="bold_text">{{item.title}}</ion-label>
<ion-label class="grey_text">{{item.description}}</ion-label>
<ion-label class="price_line">{{item.contract}} {{item.price*0.01}} {{item.currency}} </ion-label>
<ion-label class="due_date">Due Date: {{item.delivery_date}}</ion-label>
<div class="text">
<ion-label class="bold_text">{{item.title}}</ion-label>
<ion-label class="grey_text">{{item.description}}</ion-label>
<ion-label class="price_line">{{item.contract}} {{item.price*0.01}} {{item.currency}} </ion-label>
<ion-label class="due_date">Due Date: {{item.delivery_date}}</ion-label>
</div>
</div>
<div class="right">
<ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
</div>
</div>
<div class="right">
<ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
</div>
</div>
</div>
<div *ngIf="tabs =='pastdue'" class="lesson">
<ion-label class="head_text">Jobs Past Due Date</ion-label>
<div *ngIf="tabs =='pastdue'" class="lesson">
<ion-label class="head_text">Jobs Past Due Date</ion-label>
<div class="video" *ngFor="let item of jobManagerPastDueData" (click)="jobPastDue(item)">
<div class="left">
<div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/line.png)'"></div>
<div class="video" *ngFor="let item of jobManagerPastDueData">
<div class="left">
<div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/line.png)'"></div>
<div class="text">
<ion-label class="bold_text">{{item.title}}</ion-label>
<ion-label class="grey_text">{{item.description}}</ion-label>
<ion-label class="price_line">{{item.contract}} {{item.price*0.01}} {{item.currency}} </ion-label>
<ion-label class="due_date">Due Date: {{item.delivery_date}}</ion-label>
<div class="text">
<ion-label class="bold_text">{{item.title}}</ion-label>
<ion-label class="grey_text">{{item.description}}</ion-label>
<ion-label class="price_line">{{item.contract}} {{item.price*0.01}} {{item.currency}} </ion-label>
<ion-label class="due_date">Due Date: {{item.delivery_date}}</ion-label>
</div>
</div>
<div class="right">
<ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
</div>
</div>
<div class="right">
<ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
</div>
</div>
</div>
</div>
</div>
</ion-content>
src/app/pages/jobmanager/jobmanager.page.ts
+9
View File
@@ -95,4 +95,13 @@ export class JobmanagerPage implements OnInit {
}
jobActive(item){
this.router.navigate(['jobactive'],{state: item});
}
jobReview(item){
this.router.navigate(['jobreview'],{state: item});
}
jobPastDue(item){
this.router.navigate(['jobpastdue'],{state: item});
}
}
src/app/pages/jobpastdue/jobpastdue-routing.module.ts
+17
View File
@@ -0,0 +1,17 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { JobpastduePage } from './jobpastdue.page';
const routes: Routes = [
{
path: '',
component: JobpastduePage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class JobpastduePageRoutingModule {}
src/app/pages/jobpastdue/jobpastdue.module.ts
+20
View File
@@ -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 { JobpastduePageRoutingModule } from './jobpastdue-routing.module';
import { JobpastduePage } from './jobpastdue.page';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
JobpastduePageRoutingModule
],
declarations: [JobpastduePage]
})
export class JobpastduePageModule {}
src/app/pages/jobpastdue/jobpastdue.page.html
+258
View File
@@ -0,0 +1,258 @@
<ion-content>
<div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/market.jpg)'">
<div class="ion-padding">
<ion-icon slot="start" name="arrow-back" class="back" (click)="onBack()"></ion-icon>
</div>
</div>
<div class="ion-padding">
<div class="boxed_contents">
<div class="flex">
<ion-label class="bold_text_red">Past Due Task</ion-label>
<ion-icon slot="end" name="bookmark-outline" color="primary"></ion-icon>
</div>
<div class="flex">
<ion-label class="bold_text">{{jobData.title}}</ion-label>
</div>
<div class="row">
<ion-label class="bg_text">{{jobData.offer_code}}</ion-label>
<div class="rate">
<!-- <ion-icon name="star-half-outline" color="warning"></ion-icon>-->
<ion-label class="review"> Due date: {{jobData.delivery_date}} </ion-label>
</div>
</div>
<ion-label class="color_text">Price: {{jobData.price*0.01}} {{jobData.currency}}</ion-label>
<div class="items">
<div class="stud">
<ion-icon slot="start" name="time" color="primary"></ion-icon>
<ion-label>Timeline: {{jobData.timeline_days}} days</ion-label>
</div>
<!-- <div class="stud">-->
<!-- <ion-icon slot="start" name="document-text" color="primary"></ion-icon>-->
<!-- <ion-label>Certificate</ion-label>-->
<!-- </div>-->
</div>
<ion-card>
<ion-card-header>
<ion-card-subtitle>Task Actions</ion-card-subtitle>
</ion-card-header>
<ion-card-content>
This task is already past the due date. You can extend the timeline or cancel the job.
</ion-card-content>
<ion-button fill="clear">Extend Due Date</ion-button>
<ion-button color="danger" fill="clear">Cancel Task</ion-button>
</ion-card>
<!-- <ion-grid>-->
<!-- <ion-row>-->
<!-- <ion-col>-->
<!-- <ion-card color="secondary">-->
<!-- <ion-card-header>-->
<!-- <ion-card-subtitle>Card Subtitle</ion-card-subtitle>-->
<!-- </ion-card-header>-->
<!-- <ion-card-content>-->
<!-- <ion-button color="secondary" expand="block" fill="outline" >Extend Due Date</ion-button>-->
<!-- </ion-card-content>-->
<!-- </ion-card>-->
<!-- </ion-col>-->
<!-- <ion-col>-->
<!-- <ion-card color="danger">-->
<!-- <ion-card-header>-->
<!-- <ion-card-subtitle>-->
<!-- Card Subtitle-->
<!-- </ion-card-subtitle>-->
<!-- </ion-card-header>-->
<!-- <ion-card-content>-->
<!-- <ion-button color="secondary" expand="block" fill="outline">Cancel Task</ion-button>-->
<!-- </ion-card-content>-->
<!-- </ion-card>-->
<!-- </ion-col>-->
<!-- </ion-row>-->
<!-- </ion-grid>-->
<ion-segment [(ngModel)]="tabs">
<ion-segment-button value="activities">
<ion-label>Activities</ion-label>
</ion-segment-button>
<!-- <ion-segment-button value="lesson">-->
<!-- <ion-label>Show Interest</ion-label>-->
<!-- </ion-segment-button>-->
<ion-segment-button value="message">
<ion-label>Send Message</ion-label>
</ion-segment-button>
</ion-segment>
<!-- <div *ngIf="tabs =='about'" class="about">-->
<!-- <ion-label class="head_text">{{jobData.offer_code}}</ion-label>-->
<!-- &lt;!&ndash; <div class="mentor" (click)="onMentor()">&ndash;&gt;-->
<!-- <div class="mentor">-->
<!-- <div class="left">-->
<!-- <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/taskbanners/default.jpg)'"></div>-->
<!-- <div style="margin-left: 10px;">-->
<!-- <ion-label class="bold">Expires</ion-label>-->
<!-- <ion-label class="grey">{{jobData.expire}}</ion-label>-->
<!-- </div>-->
<!-- </div>-->
<!-- &lt;!&ndash; <ion-icon name="chatbubble-ellipses-outline" color="primary"></ion-icon>&ndash;&gt;-->
<!-- </div>-->
<!-- <ion-label class="head_text">Description</ion-label>-->
<!-- <ion-label class="description">{{jobData.job_description}}-->
<!-- </ion-label>-->
<!-- <ion-label class="head_text">Delivery Details</ion-label>-->
<!-- <ion-label class="description">{{jobData.description}}-->
<!-- </ion-label>-->
<!-- </div>-->
<div *ngIf="tabs =='activities'" class="lesson">
<!-- <div class="flex">-->
<!-- <ion-label class="bold">Most Popular Courses</ion-label>-->
<!-- <ion-label class="color">See all</ion-label>-->
<!-- </div>-->
<!-- <div class="sec">-->
<!-- <ion-label class="grey">Section 3 - Let's Practice</ion-label>-->
<!-- <ion-label class="color">75 min</ion-label>-->
<!-- </div>-->
<ion-card>
<ion-card-header>
<ion-card-subtitle>Load messages</ion-card-subtitle>
</ion-card-header>
<ion-card-content>
...
</ion-card-content>
</ion-card>
<!-- <div class="video">-->
<!-- <div class="left">-->
<!-- <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/taskbanners/default.jpg)'"></div>-->
<!-- <div class="text">-->
<!-- <ion-label class="bold_text">Why Using Figma ?</ion-label>-->
<!-- <ion-label class="grey_text">10 mins</ion-label>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="right">-->
<!-- <ion-icon name="lock-closed-outline"></ion-icon>-->
<!-- </div>-->
<!-- </div>-->
</div>
<div *ngIf="tabs =='message'" class="lesson">
<ion-card>
<ion-card-header>
<ion-card-subtitle>Send Message to task owner</ion-card-subtitle>
</ion-card-header>
<ion-card-content>
<ion-textarea label="Your Message to Job Owner" placeholder="Type something here" [(ngModel)]='yourmessage' ></ion-textarea>
</ion-card-content>
<ion-button color="secondary" expand="block" (click)="sendJobmarketMessage()">Send Message</ion-button>
<ion-label class="description">{{interest_msg_status}}
</ion-label>
</ion-card>
<!-- <div class="video">-->
<!-- <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/taskbanners/default.jpg)'"></div>-->
<!-- <div class="story-item">-->
<!-- <div class="menu">-->
<!-- <div class="text">-->
<!-- <div class="select show">-->
<!-- <ion-icon slot="start" name="star" color="light" class="star_icon"></ion-icon>-->
<!-- <ion-label class="rate_num white">All</ion-label>-->
<!-- </div>-->
<!-- <div class="select">-->
<!-- <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
<!-- <ion-label class="rate_num">1</ion-label>-->
<!-- </div>-->
<!-- <div class="select">-->
<!-- <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
<!-- <ion-label class="rate_num">2</ion-label>-->
<!-- </div>-->
<!-- <div class="select">-->
<!-- <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
<!-- <ion-label class="rate_num">3</ion-label>-->
<!-- </div>-->
<!-- <div class="select">-->
<!-- <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
<!-- <ion-label class="rate_num">4</ion-label>-->
<!-- </div>-->
<!-- <div class="select">-->
<!-- <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
<!-- <ion-label class="rate_num">5</ion-label>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="reviw_list" *ngFor="let item of [1,2,3,4,5]">-->
<!-- <div class="profile">-->
<!-- <div class="left">-->
<!-- <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/p2.jpg)'"></div>-->
<!-- <div style="margin-left: 10px;">-->
<!-- <ion-label class="bold">Jonathon Williams</ion-label>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="right">-->
<!-- <div class="select">-->
<!-- <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
<!-- <ion-label class="rate_num">5</ion-label>-->
<!-- </div>-->
<!-- <ion-icon name="ellipsis-horizontal-circle-outline"></ion-icon>-->
<!-- </div>-->
<!-- </div>-->
<!-- <ion-label>The course is very good. the experience of the menter is very clear and easy to understand-->
<!-- </ion-label>-->
<!-- <div class="like">-->
<!-- <ion-icon slot="start" name="heart" color="danger" class="heart"></ion-icon>-->
<!-- <ion-label class="count">330</ion-label>-->
<!-- <ion-label class="time">2 Days ago</ion-label>-->
<!-- </div>-->
<!-- </div>-->
</div>
</div>
</div>
</ion-content>
<ion-footer>
<ion-toolbar>
<div class="button" (click)="onBack()">
<ion-label class="text">Return</ion-label>
</div>
</ion-toolbar>
</ion-footer>
src/app/pages/jobpastdue/jobpastdue.page.scss
+385
View File
@@ -0,0 +1,385 @@
ion-content {
.back_image {
width: 100%;
height: 230px;
.back {
font-size: 25px;
color: white;
}
}
.flex {
display: flex;
justify-content: space-between;
align-items: center;
ion-icon {
font-size: 22px;
}
}
.row {
display: flex;
align-items: center;
margin-top: 10px;
.bg_text {
color: var(--ion-color-primary);
background: #dfe1f3;
font-size: 12px;
padding: 2px 5px;
border-radius: 5px;
margin-right: 10px;
}
.rate {
display: flex;
align-items: center;
.review {
margin-left: 5px;
}
}
}
.color_text {
margin-top: 10px;
font-size: 22px;
font-family: 'semi-bold';
color: var(--ion-color-primary);
}
.items {
display: flex;
justify-content: space-between;
margin-top: 10px;
margin-bottom: 20px;
border-bottom: 1px solid lightgrey;
padding-bottom: 10px;
.stud {
display: flex;
align-items: center;
ion-icon {
margin-right: 5px;
}
ion-label {
color: grey;
}
}
}
.about {
margin-top: 10px;
.head_text {
font-size: 18px;
font-family: 'semi-bold';
margin-bottom: 10px;
}
.mentor {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
.left {
display: flex;
.men_image {
height: 50px;
width: 50px;
border-radius: 100%;
}
.bold {
font-family: 'semi-bold';
}
.grey {
color: grey;
font-size: 14px;
}
}
ion-icon {
font-size: 25px;
}
}
.description {
color: grey;
margin-bottom: 5px;
}
}
.lesson {
margin-top: 20px;
.bold {
font-family: 'semi-bold';
}
.color {
color: var(--ion-color-primary);
}
.grey {
color: grey;
}
.sec {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
}
.video {
display: flex;
justify-content: space-between;
align-items: center;
background-color: white;
padding: 15px;
box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.1);
border-radius: 10px;
margin-top: 20px;
.left {
display: flex;
}
.men_image {
height: 40px;
width: 40px;
border-radius: 100%;
}
.text {
margin-left: 10px;
}
.bold_text {
font-size: 16px;
font-family: 'bold';
}
.grey_text {
font-size: 14px;
color: grey;
}
}
}
.review_tab {
margin-top: 20px;
.total {
display: flex;
align-items: center;
justify-content: space-between;
.star-rate {
display: flex;
align-items: center;
.bold {
font-size: 17px;
font-family: 'semi-bold';
margin-left: 5px;
}
}
.color {
color: var(--ion-color-primary);
font-size: 14px;
}
}
.story-item {
overflow: scroll;
display: flex;
flex-direction: row;
margin-top: 20px;
.menu {
width: 100%;
display: flex;
flex-direction: row;
.item {
padding: 5px;
margin: 5px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
ion-thumbnail {
border-radius: 15px;
width: max-content;
height: 60px;
width: 60px;
--border-radius: 50%;
}
ion-label {
font-size: 14px;
font-family: "medium";
color: var(--ion-color-medium);
}
}
.text {
display: flex;
align-items: center;
text-align: center;
.select {
display: flex;
align-items: center;
border: 1px solid var(--ion-color-primary);
border-radius: 20px;
padding: 2px 15px;
margin-right: 10px;
.rate_num {
margin-left: 5px;
color: var(--ion-color-primary);
}
}
.show {
background-color: var(--ion-color-primary);
}
.white {
color: white !important;
}
.choice {
display: flex;
}
}
}
}
.reviw_list {
margin-top: 25px;
.profile {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
.left {
display: flex;
align-items: center;
.men_image {
height: 40px;
width: 40px;
border-radius: 100%;
}
.bold {
font-family: 'semi-bold';
}
.grey {
color: grey;
font-size: 14px;
}
}
.right {
display: flex;
align-items: center;
.select {
display: flex;
align-items: center;
border: 1px solid var(--ion-color-primary);
border-radius: 20px;
padding: 2px 15px;
margin-right: 10px;
.rate_num {
margin-left: 5px;
color: var(--ion-color-primary);
}
}
ion-icon {
font-size: 20px;
}
}
}
.like {
display: flex;
align-items: center;
margin-top: 10px;
.heart {
font-size: 25px;
margin-right: 5px;
}
.count {
margin-right: 10px;
}
.time {
color: grey;
font-size: 14px;
}
}
}
}
.bold_text {
font-size: 20px;
font-family: 'bold';
}
}
ion-footer {
--background: white;
ion-toolbar {
--border-width: 0px;
padding: 10px;
align-items: center;
ion-icon {
color: white;
font-size: 25px;
}
.button {
background-color: var(--ion-color-primary);
display: flex;
align-items: center;
justify-content: space-around;
border-radius: 30px;
padding: 12px 0;
.text {
color: white;
}
}
}
}
src/app/pages/jobpastdue/jobpastdue.page.spec.ts
+24
View File
@@ -0,0 +1,24 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { JobpastduePage } from './jobpastdue.page';
describe('JobpastduePage', () => {
let component: JobpastduePage;
let fixture: ComponentFixture<JobpastduePage>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [ JobpastduePage ],
imports: [IonicModule.forRoot()]
}).compileComponents();
fixture = TestBed.createComponent(JobpastduePage);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/pages/jobpastdue/jobpastdue.page.ts
+38
View File
@@ -0,0 +1,38 @@
import { Component, OnInit } from '@angular/core';
import {NavController} from "@ionic/angular";
import {Router} from "@angular/router";
import {SessionDataProviderService} from "../../store/session-data-provider.service";
import {WrenchService} from "../../services/wrench.service";
@Component({
selector: 'app-jobpastdue',
templateUrl: './jobpastdue.page.html',
styleUrls: ['./jobpastdue.page.scss'],
})
export class JobpastduePage implements OnInit {
jobData: any;
tabs = 'activities';
constructor(
private navctr: NavController,
private router: Router,
public sessionDataProviderService: SessionDataProviderService,
private wrenchService: WrenchService
) {
this.jobData = this.router.getCurrentNavigation().extras.state;
console.log("XXXXX 1", this.router.getCurrentNavigation().extras);
console.log("XXXXX 2", this.router.getCurrentNavigation().extras.state);
//console.log("XXXXX 3", this.router.getCurrentNavigation().extras.state.ID);
}
ngOnInit() {
}
onBack() {
this.navctr.back();
}
}
src/app/pages/jobreview/jobreview-routing.module.ts
+17
View File
@@ -0,0 +1,17 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { JobreviewPage } from './jobreview.page';
const routes: Routes = [
{
path: '',
component: JobreviewPage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class JobreviewPageRoutingModule {}
src/app/pages/jobreview/jobreview.module.ts
+20
View File
@@ -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 { JobreviewPageRoutingModule } from './jobreview-routing.module';
import { JobreviewPage } from './jobreview.page';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
JobreviewPageRoutingModule
],
declarations: [JobreviewPage]
})
export class JobreviewPageModule {}
src/app/pages/jobreview/jobreview.page.html
+9
View File
@@ -0,0 +1,9 @@
<ion-header>
<ion-toolbar>
<ion-title>jobreview</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>
src/app/pages/jobreview/jobreview.page.scss
+385
View File
@@ -0,0 +1,385 @@
ion-content {
.back_image {
width: 100%;
height: 230px;
.back {
font-size: 25px;
color: white;
}
}
.flex {
display: flex;
justify-content: space-between;
align-items: center;
ion-icon {
font-size: 22px;
}
}
.row {
display: flex;
align-items: center;
margin-top: 10px;
.bg_text {
color: var(--ion-color-primary);
background: #dfe1f3;
font-size: 12px;
padding: 2px 5px;
border-radius: 5px;
margin-right: 10px;
}
.rate {
display: flex;
align-items: center;
.review {
margin-left: 5px;
}
}
}
.color_text {
margin-top: 10px;
font-size: 22px;
font-family: 'semi-bold';
color: var(--ion-color-primary);
}
.items {
display: flex;
justify-content: space-between;
margin-top: 10px;
margin-bottom: 20px;
border-bottom: 1px solid lightgrey;
padding-bottom: 10px;
.stud {
display: flex;
align-items: center;
ion-icon {
margin-right: 5px;
}
ion-label {
color: grey;
}
}
}
.about {
margin-top: 10px;
.head_text {
font-size: 18px;
font-family: 'semi-bold';
margin-bottom: 10px;
}
.mentor {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
.left {
display: flex;
.men_image {
height: 50px;
width: 50px;
border-radius: 100%;
}
.bold {
font-family: 'semi-bold';
}
.grey {
color: grey;
font-size: 14px;
}
}
ion-icon {
font-size: 25px;
}
}
.description {
color: grey;
margin-bottom: 5px;
}
}
.lesson {
margin-top: 20px;
.bold {
font-family: 'semi-bold';
}
.color {
color: var(--ion-color-primary);
}
.grey {
color: grey;
}
.sec {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
}
.video {
display: flex;
justify-content: space-between;
align-items: center;
background-color: white;
padding: 15px;
box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.1);
border-radius: 10px;
margin-top: 20px;
.left {
display: flex;
}
.men_image {
height: 40px;
width: 40px;
border-radius: 100%;
}
.text {
margin-left: 10px;
}
.bold_text {
font-size: 16px;
font-family: 'bold';
}
.grey_text {
font-size: 14px;
color: grey;
}
}
}
.review_tab {
margin-top: 20px;
.total {
display: flex;
align-items: center;
justify-content: space-between;
.star-rate {
display: flex;
align-items: center;
.bold {
font-size: 17px;
font-family: 'semi-bold';
margin-left: 5px;
}
}
.color {
color: var(--ion-color-primary);
font-size: 14px;
}
}
.story-item {
overflow: scroll;
display: flex;
flex-direction: row;
margin-top: 20px;
.menu {
width: 100%;
display: flex;
flex-direction: row;
.item {
padding: 5px;
margin: 5px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
ion-thumbnail {
border-radius: 15px;
width: max-content;
height: 60px;
width: 60px;
--border-radius: 50%;
}
ion-label {
font-size: 14px;
font-family: "medium";
color: var(--ion-color-medium);
}
}
.text {
display: flex;
align-items: center;
text-align: center;
.select {
display: flex;
align-items: center;
border: 1px solid var(--ion-color-primary);
border-radius: 20px;
padding: 2px 15px;
margin-right: 10px;
.rate_num {
margin-left: 5px;
color: var(--ion-color-primary);
}
}
.show {
background-color: var(--ion-color-primary);
}
.white {
color: white !important;
}
.choice {
display: flex;
}
}
}
}
.reviw_list {
margin-top: 25px;
.profile {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
.left {
display: flex;
align-items: center;
.men_image {
height: 40px;
width: 40px;
border-radius: 100%;
}
.bold {
font-family: 'semi-bold';
}
.grey {
color: grey;
font-size: 14px;
}
}
.right {
display: flex;
align-items: center;
.select {
display: flex;
align-items: center;
border: 1px solid var(--ion-color-primary);
border-radius: 20px;
padding: 2px 15px;
margin-right: 10px;
.rate_num {
margin-left: 5px;
color: var(--ion-color-primary);
}
}
ion-icon {
font-size: 20px;
}
}
}
.like {
display: flex;
align-items: center;
margin-top: 10px;
.heart {
font-size: 25px;
margin-right: 5px;
}
.count {
margin-right: 10px;
}
.time {
color: grey;
font-size: 14px;
}
}
}
}
.bold_text {
font-size: 20px;
font-family: 'bold';
}
}
ion-footer {
--background: white;
ion-toolbar {
--border-width: 0px;
padding: 10px;
align-items: center;
ion-icon {
color: white;
font-size: 25px;
}
.button {
background-color: var(--ion-color-primary);
display: flex;
align-items: center;
justify-content: space-around;
border-radius: 30px;
padding: 12px 0;
.text {
color: white;
}
}
}
}
src/app/pages/jobreview/jobreview.page.spec.ts
+24
View File
@@ -0,0 +1,24 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { JobreviewPage } from './jobreview.page';
describe('JobreviewPage', () => {
let component: JobreviewPage;
let fixture: ComponentFixture<JobreviewPage>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [ JobreviewPage ],
imports: [IonicModule.forRoot()]
}).compileComponents();
fixture = TestBed.createComponent(JobreviewPage);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/pages/jobreview/jobreview.page.ts
+15
View File
@@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-jobreview',
templateUrl: './jobreview.page.html',
styleUrls: ['./jobreview.page.scss'],
})
export class JobreviewPage implements OnInit {
constructor() { }
ngOnInit() {
}
}
src/app/pages/marketdetail/marketdetail.page.html
+171 -167
View File
@@ -7,196 +7,200 @@
</div>
<div class="ion-padding">
<div class="flex">
<ion-label class="bold_text">{{jobData.title}}</ion-label>
<ion-icon slot="end" name="bookmark-outline" color="primary"></ion-icon>
</div>
<div class="row">
<ion-label class="bg_text">{{jobData.offer_code}}</ion-label>
<div class="rate">
<!-- <ion-icon name="star-half-outline" color="warning"></ion-icon>-->
<ion-label class="review"> ({{jobData.interest_count}} interest)</ion-label>
<div class="boxed_contents">
<div class="flex">
<ion-label class="bold_text">{{jobData.title}}</ion-label>
<ion-icon slot="end" name="bookmark-outline" color="primary"></ion-icon>
</div>
</div>
<ion-label class="color_text">Price: {{jobData.price*0.01}} {{jobData.currency}}</ion-label>
<div class="items">
<div class="stud">
<ion-icon slot="start" name="time" color="primary"></ion-icon>
<ion-label>Timeline: {{jobData.timeline_days}} days</ion-label>
</div>
<!-- <div class="stud">-->
<!-- <ion-icon slot="start" name="document-text" color="primary"></ion-icon>-->
<!-- <ion-label>Certificate</ion-label>-->
<!-- </div>-->
</div>
<ion-segment [(ngModel)]="tabs">
<ion-segment-button value="about">
<ion-label>Details</ion-label>
</ion-segment-button>
<ion-segment-button value="lesson">
<ion-label>Show Interest</ion-label>
</ion-segment-button>
<ion-segment-button value="message">
<ion-label>Message</ion-label>
</ion-segment-button>
</ion-segment>
<div *ngIf="tabs =='about'" class="about">
<ion-label class="head_text">{{jobData.offer_code}}</ion-label>
<!-- <div class="mentor" (click)="onMentor()">-->
<div class="mentor">
<div class="left">
<div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/taskbanners/default.jpg)'"></div>
<div style="margin-left: 10px;">
<ion-label class="bold">Expires</ion-label>
<ion-label class="grey">{{jobData.expire}}</ion-label>
</div>
<div class="row">
<ion-label class="bg_text">{{jobData.offer_code}}</ion-label>
<div class="rate">
<!-- <ion-icon name="star-half-outline" color="warning"></ion-icon>-->
<ion-label class="review"> ({{jobData.interest_count}} interest)</ion-label>
</div>
<!-- <ion-icon name="chatbubble-ellipses-outline" color="primary"></ion-icon>-->
</div>
<ion-label class="head_text">Description</ion-label>
<ion-label class="description">{{jobData.job_description}}
</ion-label>
<ion-label class="color_text">Price: {{jobData.price*0.01}} {{jobData.currency}}</ion-label>
<ion-label class="head_text">Delivery Details</ion-label>
<ion-label class="description">{{jobData.description}}
</ion-label>
</div>
<div class="items">
<div class="stud">
<ion-icon slot="start" name="time" color="primary"></ion-icon>
<ion-label>Timeline: {{jobData.timeline_days}} days</ion-label>
</div>
<!-- <div class="stud">-->
<!-- <ion-icon slot="start" name="document-text" color="primary"></ion-icon>-->
<!-- <ion-label>Certificate</ion-label>-->
<!-- </div>-->
</div>
<div *ngIf="tabs =='lesson'" class="lesson">
<!-- <div class="flex">-->
<!-- <ion-label class="bold">Most Popular Courses</ion-label>-->
<!-- <ion-label class="color">See all</ion-label>-->
<!-- </div>-->
<ion-segment [(ngModel)]="tabs">
<ion-segment-button value="about">
<ion-label>Details</ion-label>
</ion-segment-button>
<ion-segment-button value="lesson">
<ion-label>Show Interest</ion-label>
</ion-segment-button>
<ion-segment-button value="message">
<ion-label>Message</ion-label>
</ion-segment-button>
</ion-segment>
<div *ngIf="tabs =='about'" class="about">
<ion-label class="head_text">{{jobData.offer_code}}</ion-label>
<!-- <div class="mentor" (click)="onMentor()">-->
<div class="mentor">
<div class="left">
<div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/taskbanners/default.jpg)'"></div>
<div style="margin-left: 10px;">
<ion-label class="bold">Expires</ion-label>
<ion-label class="grey">{{jobData.expire}}</ion-label>
</div>
</div>
<!-- <ion-icon name="chatbubble-ellipses-outline" color="primary"></ion-icon>-->
</div>
<ion-label class="head_text">Description</ion-label>
<ion-label class="description">{{jobData.job_description}}
</ion-label>
<ion-label class="head_text">Delivery Details</ion-label>
<ion-label class="description">{{jobData.description}}
</ion-label>
</div>
<div *ngIf="tabs =='lesson'" class="lesson">
<!-- <div class="flex">-->
<!-- <ion-label class="bold">Most Popular Courses</ion-label>-->
<!-- <ion-label class="color">See all</ion-label>-->
<!-- </div>-->
<!-- <div class="sec">-->
<!-- <ion-label class="grey">Section 3 - Let's Practice</ion-label>-->
<!-- <ion-label class="color">75 min</ion-label>-->
<!-- </div>-->
<!-- <div class="sec">-->
<!-- <ion-label class="grey">Section 3 - Let's Practice</ion-label>-->
<!-- <ion-label class="color">75 min</ion-label>-->
<!-- </div>-->
<ion-card>
<ion-card-header>
<ion-card-subtitle>Interested in the task?</ion-card-subtitle>
</ion-card-header>
<ion-card>
<ion-card-header>
<ion-card-subtitle>Interested in the task?</ion-card-subtitle>
</ion-card-header>
<ion-card-content>
<ion-button color="secondary" expand="block" (click)="sendJobInterestMessage()">Send Interest Request to task</ion-button>
<ion-card-content>
<ion-button color="secondary" expand="block" (click)="sendJobInterestMessage()">Send Interest Request to task</ion-button>
<ion-label class="description">{{interest_status}}
</ion-label>
</ion-card-content>
</ion-card-content>
</ion-card>
</ion-card>
<!-- <div class="video">-->
<!-- <div class="left">-->
<!-- <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/taskbanners/default.jpg)'"></div>-->
<!-- <div class="video">-->
<!-- <div class="left">-->
<!-- <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/taskbanners/default.jpg)'"></div>-->
<!-- <div class="text">-->
<!-- <ion-label class="bold_text">Why Using Figma ?</ion-label>-->
<!-- <ion-label class="grey_text">10 mins</ion-label>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="right">-->
<!-- <ion-icon name="lock-closed-outline"></ion-icon>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="text">-->
<!-- <ion-label class="bold_text">Why Using Figma ?</ion-label>-->
<!-- <ion-label class="grey_text">10 mins</ion-label>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="right">-->
<!-- <ion-icon name="lock-closed-outline"></ion-icon>-->
<!-- </div>-->
<!-- </div>-->
</div>
<div *ngIf="tabs =='message'" class="lesson">
<ion-card>
<ion-card-header>
<ion-card-subtitle>Send Message to task owner</ion-card-subtitle>
</ion-card-header>
<ion-card-content>
<ion-textarea label="Your Message to Job Owner" placeholder="Type something here" [(ngModel)]='yourmessage' ></ion-textarea>
</ion-card-content>
<ion-button color="secondary" expand="block" (click)="sendJobmarketMessage()">Send Message</ion-button>
<ion-label class="description">{{interest_msg_status}}
</ion-label>
</ion-card>
<!-- <div class="video">-->
<!-- <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/taskbanners/default.jpg)'"></div>-->
<!-- <div class="story-item">-->
<!-- <div class="menu">-->
<!-- <div class="text">-->
<!-- <div class="select show">-->
<!-- <ion-icon slot="start" name="star" color="light" class="star_icon"></ion-icon>-->
<!-- <ion-label class="rate_num white">All</ion-label>-->
<!-- </div>-->
<!-- <div class="select">-->
<!-- <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
<!-- <ion-label class="rate_num">1</ion-label>-->
<!-- </div>-->
<!-- <div class="select">-->
<!-- <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
<!-- <ion-label class="rate_num">2</ion-label>-->
<!-- </div>-->
<!-- <div class="select">-->
<!-- <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
<!-- <ion-label class="rate_num">3</ion-label>-->
<!-- </div>-->
<!-- <div class="select">-->
<!-- <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
<!-- <ion-label class="rate_num">4</ion-label>-->
<!-- </div>-->
<!-- <div class="select">-->
<!-- <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
<!-- <ion-label class="rate_num">5</ion-label>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="reviw_list" *ngFor="let item of [1,2,3,4,5]">-->
<!-- <div class="profile">-->
<!-- <div class="left">-->
<!-- <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/p2.jpg)'"></div>-->
<!-- <div style="margin-left: 10px;">-->
<!-- <ion-label class="bold">Jonathon Williams</ion-label>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="right">-->
<!-- <div class="select">-->
<!-- <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
<!-- <ion-label class="rate_num">5</ion-label>-->
<!-- </div>-->
<!-- <ion-icon name="ellipsis-horizontal-circle-outline"></ion-icon>-->
<!-- </div>-->
<!-- </div>-->
<!-- <ion-label>The course is very good. the experience of the menter is very clear and easy to understand-->
<!-- </ion-label>-->
<!-- <div class="like">-->
<!-- <ion-icon slot="start" name="heart" color="danger" class="heart"></ion-icon>-->
<!-- <ion-label class="count">330</ion-label>-->
<!-- <ion-label class="time">2 Days ago</ion-label>-->
<!-- </div>-->
<!-- </div>-->
</div>
</div>
<div *ngIf="tabs =='message'" class="lesson">
<ion-card>
<ion-card-header>
<ion-card-subtitle>Send Message to task owner</ion-card-subtitle>
</ion-card-header>
<ion-card-content>
<ion-textarea label="Your Message to Job Owner" placeholder="Type something here" [(ngModel)]='yourmessage' ></ion-textarea>
</ion-card-content>
<ion-button color="secondary" expand="block" (click)="sendJobmarketMessage()">Send Message</ion-button>
<ion-label class="description">{{interest_msg_status}}
</ion-label>
</ion-card>
<!-- <div class="video">-->
<!-- <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/taskbanners/default.jpg)'"></div>-->
<!-- <div class="story-item">-->
<!-- <div class="menu">-->
<!-- <div class="text">-->
<!-- <div class="select show">-->
<!-- <ion-icon slot="start" name="star" color="light" class="star_icon"></ion-icon>-->
<!-- <ion-label class="rate_num white">All</ion-label>-->
<!-- </div>-->
<!-- <div class="select">-->
<!-- <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
<!-- <ion-label class="rate_num">1</ion-label>-->
<!-- </div>-->
<!-- <div class="select">-->
<!-- <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
<!-- <ion-label class="rate_num">2</ion-label>-->
<!-- </div>-->
<!-- <div class="select">-->
<!-- <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
<!-- <ion-label class="rate_num">3</ion-label>-->
<!-- </div>-->
<!-- <div class="select">-->
<!-- <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
<!-- <ion-label class="rate_num">4</ion-label>-->
<!-- </div>-->
<!-- <div class="select">-->
<!-- <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
<!-- <ion-label class="rate_num">5</ion-label>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="reviw_list" *ngFor="let item of [1,2,3,4,5]">-->
<!-- <div class="profile">-->
<!-- <div class="left">-->
<!-- <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/p2.jpg)'"></div>-->
<!-- <div style="margin-left: 10px;">-->
<!-- <ion-label class="bold">Jonathon Williams</ion-label>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="right">-->
<!-- <div class="select">-->
<!-- <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
<!-- <ion-label class="rate_num">5</ion-label>-->
<!-- </div>-->
<!-- <ion-icon name="ellipsis-horizontal-circle-outline"></ion-icon>-->
<!-- </div>-->
<!-- </div>-->
<!-- <ion-label>The course is very good. the experience of the menter is very clear and easy to understand-->
<!-- </ion-label>-->
<!-- <div class="like">-->
<!-- <ion-icon slot="start" name="heart" color="danger" class="heart"></ion-icon>-->
<!-- <ion-label class="count">330</ion-label>-->
<!-- <ion-label class="time">2 Days ago</ion-label>-->
<!-- </div>-->
<!-- </div>-->
</div>
</div>
</ion-content>
src/app/pages/my-course/my-course.page.html
+27 -23
View File
@@ -11,38 +11,42 @@
</ion-header>
<ion-content class="ion-padding">
<ion-segment [(ngModel)]="tabs">
<ion-segment-button value="on">
<ion-label>Available</ion-label>
</ion-segment-button>
<ion-segment-button value="done">
<ion-label>Last Minute</ion-label>
</ion-segment-button>
</ion-segment>
<div class="boxed_contents">
<div *ngIf="tabs =='on'">
<ion-segment [(ngModel)]="tabs">
<ion-segment-button value="on">
<ion-label>Available</ion-label>
</ion-segment-button>
<ion-segment-button value="done">
<ion-label>Last Minute</ion-label>
</ion-segment-button>
</ion-segment>
<div class="content" *ngFor="let item of jobsData;" (click)="viewMarketItem( item )">
<div class="flex">
<div class="text">
<ion-label class="bold_text">{{item.title}}</ion-label>
<ion-label class="price_line"> {{item.price*0.01}} {{item.currency}} </ion-label>
<ion-label class="due_date">Timeline: {{item.timeline_days}} days</ion-label>
<div *ngIf="tabs =='on'">
<div class="content" *ngFor="let item of jobsData;" (click)="viewMarketItem( item )">
<div class="flex">
<div class="text">
<ion-label class="bold_text">{{item.title}}</ion-label>
<ion-label class="price_line"> {{item.price*0.01}} {{item.currency}} </ion-label>
<ion-label class="due_date">Timeline: {{item.timeline_days}} days</ion-label>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="tabs =='done'">
<div *ngIf="tabs =='done'">
<div class="content" *ngFor="let item of jobsData;" (click)="onCourseDetail()">
<div class="flex">
<div class="text">
<ion-label class="bold_text">{{item.title}}</ion-label>
<ion-label class="due_date">available till : {{item.expire}}</ion-label>
<div class="content" *ngFor="let item of jobsData;" (click)="onCourseDetail()">
<div class="flex">
<div class="text">
<ion-label class="bold_text">{{item.title}}</ion-label>
<ion-label class="due_date">available till : {{item.expire}}</ion-label>
</div>
</div>
</div>
</div>
</div>
src/app/pages/mytasks/mytasks.page.html
+110 -107
View File
@@ -12,129 +12,132 @@
<ion-content class="ion-padding">
<ion-segment [(ngModel)]="tabs">
<ion-segment-button value="tasks">
<ion-label>Active</ion-label>
</ion-segment-button>
<ion-segment-button value="pastdue">
<ion-label>Past Due</ion-label>
</ion-segment-button>
<ion-segment-button value="review">
<ion-label>In Review</ion-label>
</ion-segment-button>
</ion-segment>
<div class="boxed_contents">
<ion-segment [(ngModel)]="tabs">
<ion-segment-button value="tasks">
<ion-label>Active</ion-label>
</ion-segment-button>
<ion-segment-button value="pastdue">
<ion-label>Past Due</ion-label>
</ion-segment-button>
<ion-segment-button value="review">
<ion-label>In Review</ion-label>
</ion-segment-button>
</ion-segment>
<div *ngIf="tabs =='tasks'">
<div *ngIf="active_job_count == 0">
<ion-card>
<img alt="WrenchBoard Tasks" src="https://www.wrenchboard.com/assets/images/apps/current-tasks.png" />
<ion-card-header>
<ion-card-title>Current Tasks</ion-card-title>
<!-- <ion-card-subtitle>Card Subtitle</ion-card-subtitle>-->
</ion-card-header>
<ion-card-content>
You currently have no active tasks or shores. Visit the Market to find anything interesting to you.
</ion-card-content>
</ion-card>
</div>
<div class="chat" *ngFor="let item of jobsData;" (click)="activeSeleted(item)">
<div class="flex">
<div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/taskbanners/'+item.banner+')'"></div>
<div style="margin-left: 10px;">
<ion-label class="bold_text"> {{item.title}}</ion-label>
<div style="display: flex;">
<ion-label class="grey_text"> {{item.job_description}} </ion-label>
</div>
<div>
<hr />
<ion-label> {{item.delivery_date}}</ion-label>
</div>
</div>
</div>
<div class="column">
<ion-icon name="chevron-forward-outline"></ion-icon>
<!-- <ion-label class="small_text"> 11:30 PM</ion-label>-->
<!-- <ion-label class="color_text"> 10</ion-label>-->
</div>
</div>
</div>
<div *ngIf="tabs =='pastdue'">
<div *ngIf="tabs =='tasks'">
<div *ngIf="active_job_count == 0">
<ion-card>
<img alt="WrenchBoard Tasks" src="https://www.wrenchboard.com/assets/images/apps/current-tasks.png" />
<img alt="WrenchBoard Past Due" src="https://www.wrenchboard.com/assets/images/apps/pastdue-task.png" />
<ion-card-header>
<ion-card-title>Current Tasks</ion-card-title>
<!-- <ion-card-subtitle>Card Subtitle</ion-card-subtitle>-->
<ion-card-title>Past Due</ion-card-title>
<!-- <ion-card-subtitle>Card Subtitle</ion-card-subtitle>-->
</ion-card-header>
<ion-card-content>
You currently have no active tasks or shores. Visit the Market to find anything interesting to you.
You do not have any task past due.
</ion-card-content>
</ion-card>
</div>
<div class="chat" *ngFor="let item of jobsPastDueData;" >
<div class="flex">
<div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/taskbanners/'+item.banner+')'"></div>
<div style="margin-left: 10px;">
<ion-label class="bold_text"> {{item.title}}</ion-label>
<div style="display: flex;">
<ion-label class="grey_text"> {{item.job_description}} </ion-label>
<div class="chat" *ngFor="let item of jobsData;" (click)="activeSeleted(item)">
<div class="flex">
<div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/taskbanners/'+item.banner+')'"></div>
<div style="margin-left: 10px;">
<ion-label class="bold_text"> {{item.title}}</ion-label>
<div style="display: flex;">
<ion-label class="grey_text"> {{item.job_description}} </ion-label>
</div>
<div>
<hr />
<ion-label> {{item.delivery_date}}</ion-label>
</div>
<div>
<hr />
<ion-label> {{item.delivery_date}}</ion-label>
</div>
</div>
</div>
<div class="column">
<ion-icon name="chevron-forward-outline"></ion-icon>
<!-- <ion-label class="small_text"> 11:30 PM</ion-label>-->
<!-- <ion-label class="color_text"> 10</ion-label>-->
</div>
</div>
<div class="column">
<ion-icon name="chevron-forward-outline"></ion-icon>
<!-- <ion-label class="small_text"> 11:30 PM</ion-label>-->
<!-- <ion-label class="color_text"> 10</ion-label>-->
</div>
<div *ngIf="tabs =='review'">
<ion-card>
<img alt="Silhouette of mountains" src="https://www.wrenchboard.com/assets/images/apps/review-task.png" />
<ion-card-header>
<ion-card-title>In Review</ion-card-title>
<!-- <ion-card-subtitle>Card Subtitle</ion-card-subtitle>-->
</ion-card-header>
<ion-card-content>
No task is currently in review.
</ion-card-content>
</ion-card>
<div class="chat" *ngFor="let item of jobsInReviewData;">
<div class="flex">
<div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/taskbanners/'+item.banner+')'"></div>
<div style="margin-left: 10px;">
<ion-label class="bold_text"> {{item.title}}</ion-label>
<div style="display: flex;">
<ion-label class="grey_text"> {{item.job_description}} </ion-label>
</div>
<div>
<hr />
<ion-label> {{item.delivery_date}}</ion-label>
</div>
</div>
</div>
<div class="column">
<ion-icon name="chevron-forward-outline"></ion-icon>
<!-- <ion-label class="small_text"> 11:30 PM</ion-label>-->
<!-- <ion-label class="color_text"> 10</ion-label>-->
</div>
</div>
</div>
</div>
<div *ngIf="tabs =='pastdue'">
<ion-card>
<img alt="WrenchBoard Past Due" src="https://www.wrenchboard.com/assets/images/apps/pastdue-task.png" />
<ion-card-header>
<ion-card-title>Past Due</ion-card-title>
<!-- <ion-card-subtitle>Card Subtitle</ion-card-subtitle>-->
</ion-card-header>
<ion-card-content>
You do not have any task past due.
</ion-card-content>
</ion-card>
<div class="chat" *ngFor="let item of jobsPastDueData;" >
<div class="flex">
<div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/taskbanners/'+item.banner+')'"></div>
<div style="margin-left: 10px;">
<ion-label class="bold_text"> {{item.title}}</ion-label>
<div style="display: flex;">
<ion-label class="grey_text"> {{item.job_description}} </ion-label>
</div>
<div>
<hr />
<ion-label> {{item.delivery_date}}</ion-label>
</div>
</div>
</div>
<div class="column">
<ion-icon name="chevron-forward-outline"></ion-icon>
<!-- <ion-label class="small_text"> 11:30 PM</ion-label>-->
<!-- <ion-label class="color_text"> 10</ion-label>-->
</div>
</div>
</div>
<div *ngIf="tabs =='review'">
<ion-card>
<img alt="Silhouette of mountains" src="https://www.wrenchboard.com/assets/images/apps/review-task.png" />
<ion-card-header>
<ion-card-title>In Review</ion-card-title>
<!-- <ion-card-subtitle>Card Subtitle</ion-card-subtitle>-->
</ion-card-header>
<ion-card-content>
No task is currently in review.
</ion-card-content>
</ion-card>
<div class="chat" *ngFor="let item of jobsInReviewData;">
<div class="flex">
<div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/taskbanners/'+item.banner+')'"></div>
<div style="margin-left: 10px;">
<ion-label class="bold_text"> {{item.title}}</ion-label>
<div style="display: flex;">
<ion-label class="grey_text"> {{item.job_description}} </ion-label>
</div>
<div>
<hr />
<ion-label> {{item.delivery_date}}</ion-label>
</div>
</div>
</div>
<div class="column">
<ion-icon name="chevron-forward-outline"></ion-icon>
<!-- <ion-label class="small_text"> 11:30 PM</ion-label>-->
<!-- <ion-label class="color_text"> 10</ion-label>-->
</div>
</div>
</div>
</ion-content>
src/app/pages/profile/profile.page.html
+167 -76
View File
@@ -9,86 +9,177 @@
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<div class="profile">
<div class="bg_image back_image" [style.backgroundImage]="'url(https://www.wrenchboard.com/assets/images/profile.jpg)'">
<div class="icon">
<ion-icon name="pencil" (click)="onProfile()"></ion-icon>
<div class="boxed_contents">
<div *ngIf = "accountType == 'FAMILY'; else elseFulltag">
<div class="profile">
<div class="bg_image back_image" [style.backgroundImage]="'url(https://www.wrenchboard.com/assets/images/profile.jpg)'">
<div class="icon">
<ion-icon name="pencil" (click)="onProfile()"></ion-icon>
</div>
</div>
<div class="title">
<ion-label style="font-size: 17px; font-family: 'bold';">{{firstname}} {{lastname}}</ion-label>
<ion-label style="font-size: 13px;">{{email}}</ion-label>
</div>
</div>
<div class="route">
<!-- <ion-item lines="none" (click)="onProfile()">-->
<!-- <ion-icon name="person-outline" color="dark"></ion-icon>-->
<!-- <ion-label>Edit Profile</ion-label>-->
<!-- <ion-icon name="chevron-forward-outline" color="medium"></ion-icon>-->
<!-- </ion-item>-->
<!-- <ion-item lines="none" (click)="onFamily()">-->
<!-- <ion-icon name="people-outline"></ion-icon>-->
<!-- <ion-label>Family Profile</ion-label>-->
<!-- <ion-icon name="chevron-forward-outline" color="medium"></ion-icon>-->
<!-- </ion-item>-->
<!-- <ion-item lines="none" (click)="onNotification()">-->
<!-- <ion-icon name="notifications-outline" color="dark"></ion-icon>-->
<!-- <ion-label>Notifications</ion-label>-->
<!-- <ion-icon name="chevron-forward-outline" color="medium"></ion-icon>-->
<!-- </ion-item>-->
<!-- <ion-item lines="none" (click)="onPayment()">-->
<!-- <ion-icon name="wallet-outline" color="dark"></ion-icon>-->
<!-- <ion-label>Payment & Accounts</ion-label>-->
<!-- <ion-icon name="chevron-forward-outline" color="medium"></ion-icon>-->
<!-- </ion-item>-->
<!-- <ion-item lines="none" (click)="onSecurity()">-->
<!-- <ion-icon name="shield-checkmark-outline" color="dark"></ion-icon>-->
<!-- <ion-label>Security</ion-label>-->
<!-- <ion-icon name="chevron-forward-outline" color="medium"></ion-icon>-->
<!-- </ion-item>-->
<!-- <ion-item lines="none" (click)="onLanguage()">
<ion-icon name="language-outline" color="dark"></ion-icon>
<ion-label>Language</ion-label>
<ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
</ion-item> -->
<!-- <ion-item lines="none">
<ion-icon name="eye-outline" color="dark"></ion-icon>
<ion-label>Dark Theme</ion-label>
<ion-toggle slot="end" name="grape" color="tertiary"></ion-toggle>
</ion-item> ii -->
<ion-item lines="none" (click)="onPrivacy()">
<ion-icon name="lock-closed-outline" color="dark"></ion-icon>
<ion-label>Privacy Policy</ion-label>
<ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
</ion-item>
<ion-item lines="none" (click)="onMyFiles()">
<ion-icon name="help-circle-outline" color="dark"></ion-icon>
<ion-label>My Files</ion-label>
<ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
</ion-item>
<!-- <ion-item lines="none" (click)="onInvite()">-->
<!-- <ion-icon name="people-outline" color="dark"></ion-icon>-->
<!-- <ion-label>Invite Friends</ion-label>-->
<!-- <ion-icon name="chevron-forward-outline" color="medium"></ion-icon>-->
<!-- </ion-item>-->
<ion-item class="pad_logout" lines="none" (click)="onLogout()">
<ion-icon name="log-out-outline" color="dark"></ion-icon>
<ion-label class="ion_label_red">Logout</ion-label>
<ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
</ion-item>
</div>
</div>
<div class="title">
<ion-label style="font-size: 17px; font-family: 'bold';">{{firstname}} {{lastname}}</ion-label>
<ion-label style="font-size: 13px;">{{email}}</ion-label>
</div>
<ng-template #elseFulltag>
<div class="profile">
<div class="bg_image back_image" [style.backgroundImage]="'url(https://www.wrenchboard.com/assets/images/profile.jpg)'">
<div class="icon">
<ion-icon name="pencil" (click)="onProfile()"></ion-icon>
</div>
</div>
<div class="title">
<ion-label style="font-size: 17px; font-family: 'bold';">{{firstname}} {{lastname}}</ion-label>
<ion-label style="font-size: 13px;">{{email}}</ion-label>
</div>
</div>
<div class="route">
<ion-item lines="none" (click)="onProfile()">
<ion-icon name="person-outline" color="dark"></ion-icon>
<ion-label>Edit Profile</ion-label>
<ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
</ion-item>
<ion-item lines="none" (click)="onFamily()">
<ion-icon name="people-outline"></ion-icon>
<ion-label>Family Profile</ion-label>
<ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
</ion-item>
<ion-item lines="none" (click)="onNotification()">
<ion-icon name="notifications-outline" color="dark"></ion-icon>
<ion-label>Notifications</ion-label>
<ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
</ion-item>
<!-- <ion-item lines="none" (click)="onPayment()">-->
<!-- <ion-icon name="wallet-outline" color="dark"></ion-icon>-->
<!-- <ion-label>Payment & Accounts</ion-label>-->
<!-- <ion-icon name="chevron-forward-outline" color="medium"></ion-icon>-->
<!-- </ion-item>-->
<ion-item lines="none" (click)="onSecurity()">
<ion-icon name="shield-checkmark-outline" color="dark"></ion-icon>
<ion-label>Security</ion-label>
<ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
</ion-item>
<!-- <ion-item lines="none" (click)="onLanguage()">
<ion-icon name="language-outline" color="dark"></ion-icon>
<ion-label>Language</ion-label>
<ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
</ion-item> -->
<!-- <ion-item lines="none">
<ion-icon name="eye-outline" color="dark"></ion-icon>
<ion-label>Dark Theme</ion-label>
<ion-toggle slot="end" name="grape" color="tertiary"></ion-toggle>
</ion-item> ii -->
<ion-item lines="none" (click)="onPrivacy()">
<ion-icon name="lock-closed-outline" color="dark"></ion-icon>
<ion-label>Privacy Policy</ion-label>
<ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
</ion-item>
<ion-item lines="none" (click)="onMyFiles()">
<ion-icon name="help-circle-outline" color="dark"></ion-icon>
<ion-label>My Files</ion-label>
<ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
</ion-item>
<!-- <ion-item lines="none" (click)="onInvite()">-->
<!-- <ion-icon name="people-outline" color="dark"></ion-icon>-->
<!-- <ion-label>Invite Friends</ion-label>-->
<!-- <ion-icon name="chevron-forward-outline" color="medium"></ion-icon>-->
<!-- </ion-item>-->
<ion-item class="pad_logout" lines="none" (click)="onLogout()">
<ion-icon name="log-out-outline" color="dark"></ion-icon>
<ion-label class="ion_label_red">Logout</ion-label>
<ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
</ion-item>
</div>
</ng-template>
</div>
<div class="route">
<ion-item lines="none" (click)="onProfile()">
<ion-icon name="person-outline" color="dark"></ion-icon>
<ion-label>Edit Profile</ion-label>
<ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
</ion-item>
<ion-item lines="none" (click)="onFamily()">
<ion-icon name="people-outline"></ion-icon>
<ion-label>Family Profile</ion-label>
<ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
</ion-item>
<ion-item lines="none" (click)="onNotification()">
<ion-icon name="notifications-outline" color="dark"></ion-icon>
<ion-label>Notifications</ion-label>
<ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
</ion-item>
<!-- <ion-item lines="none" (click)="onPayment()">-->
<!-- <ion-icon name="wallet-outline" color="dark"></ion-icon>-->
<!-- <ion-label>Payment & Accounts</ion-label>-->
<!-- <ion-icon name="chevron-forward-outline" color="medium"></ion-icon>-->
<!-- </ion-item>-->
<ion-item lines="none" (click)="onSecurity()">
<ion-icon name="shield-checkmark-outline" color="dark"></ion-icon>
<ion-label>Security</ion-label>
<ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
</ion-item>
<!-- <ion-item lines="none" (click)="onLanguage()">
<ion-icon name="language-outline" color="dark"></ion-icon>
<ion-label>Language</ion-label>
<ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
</ion-item> -->
<!-- <ion-item lines="none">
<ion-icon name="eye-outline" color="dark"></ion-icon>
<ion-label>Dark Theme</ion-label>
<ion-toggle slot="end" name="grape" color="tertiary"></ion-toggle>
</ion-item> ii -->
<ion-item lines="none" (click)="onPrivacy()">
<ion-icon name="lock-closed-outline" color="dark"></ion-icon>
<ion-label>Privacy Policy</ion-label>
<ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
</ion-item>
<ion-item lines="none" (click)="onMyFiles()">
<ion-icon name="help-circle-outline" color="dark"></ion-icon>
<ion-label>My Files</ion-label>
<ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
</ion-item>
<!-- <ion-item lines="none" (click)="onInvite()">-->
<!-- <ion-icon name="people-outline" color="dark"></ion-icon>-->
<!-- <ion-label>Invite Friends</ion-label>-->
<!-- <ion-icon name="chevron-forward-outline" color="medium"></ion-icon>-->
<!-- </ion-item>-->
<ion-item class="pad_logout" lines="none" (click)="onLogout()">
<ion-icon name="log-out-outline" color="dark"></ion-icon>
<ion-label class="ion_label_red">Logout</ion-label>
<ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
</ion-item>
</div>
</ion-content>
src/app/pages/profile/profile.page.ts
+6 -1
View File
@@ -11,10 +11,15 @@ export class ProfilePage implements OnInit {
firstname:string='';
lastname:string='';
email:string='';
accountType:string="FULL";
constructor(
private router: Router,
public sessionDataProviderService:SessionDataProviderService
) { }
) {
this.accountType = sessionDataProviderService.account_type;
}
ngOnInit() {
this.firstname = this.sessionDataProviderService.firstname;
src/app/pages/tabs/tabs.page.html
+63 -25
View File
@@ -1,31 +1,69 @@
<div *ngIf = "accountType == 'FAMILY'; else elseFulltag">
<ion-tabs class="bottom_bar_tabs">
<div class="bottom_bardiv">
<ion-tab-bar slot="bottom" class="bottom_bar">
<ion-tab-button tab="tab1">
<ion-icon name="home"></ion-icon>
<ion-label>Home</ion-label>
</ion-tab-button>
<ion-tabs class="bottom_bar_tabs">
<div class="bottom_bardiv">
<ion-tab-bar slot="bottom" class="bottom_bar">
<ion-tab-button tab="tab1">
<ion-icon name="home"></ion-icon>
<ion-label>Home</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-icon name="reader"></ion-icon>
<ion-label>Market</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-icon name="reader"></ion-icon>
<ion-label>Suggest</ion-label>
</ion-tab-button>
<ion-tab-button tab="mytasks" class="task_button">
<ion-icon name="list-outline"></ion-icon>
<ion-label>Tasks</ion-label>
</ion-tab-button>
<ion-tab-button tab="mytasks" class="task_button">
<ion-icon name="list-outline"></ion-icon>
<ion-label>Tasks</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab4">
<ion-icon name="cart"></ion-icon>
<ion-label>Wallet</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab4">
<ion-icon name="cart"></ion-icon>
<ion-label>Wallet</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab5">
<ion-icon name="ellipsis-horizontal-outline"></ion-icon>
<ion-label>more</ion-label>
</ion-tab-button>
</ion-tab-bar>
</div>
</ion-tabs>
<ion-tab-button tab="tab5">
<ion-icon name="ellipsis-horizontal-outline"></ion-icon>
<ion-label>more</ion-label>
</ion-tab-button>
</ion-tab-bar>
</div>
</ion-tabs>
<ng-template #elseFulltag>
<ion-tabs class="bottom_bar_tabs">
<div class="bottom_bardiv">
<ion-tab-bar slot="bottom" class="bottom_bar">
<ion-tab-button tab="tab1">
<ion-icon name="home"></ion-icon>
<ion-label>Home</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-icon name="reader"></ion-icon>
<ion-label>Market</ion-label>
</ion-tab-button>
<ion-tab-button tab="mytasks" class="task_button">
<ion-icon name="list-outline"></ion-icon>
<ion-label>Tasks</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab4">
<ion-icon name="cart"></ion-icon>
<ion-label>Wallet</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab5">
<ion-icon name="ellipsis-horizontal-outline"></ion-icon>
<ion-label>more</ion-label>
</ion-tab-button>
</ion-tab-bar>
</div>
</ion-tabs>
</ng-template>
src/app/pages/tabs/tabs.page.ts
+5 -9
View File
@@ -1,12 +1,5 @@
/*
Authors : initappz (Rahul Jograna)
Website : https://initappz.com/
App Name : E-Learning App Template
This App Template Source code is licensed as per the
terms found in the Website https://initappz.com/license
Copyright and Good Faith Purchasers © 2021-present initappz.
*/
import { Component } from '@angular/core';
import {SessionDataProviderService} from "../../store/session-data-provider.service";
@Component({
selector: 'app-tabs',
@@ -14,7 +7,10 @@ import { Component } from '@angular/core';
styleUrls: ['tabs.page.scss']
})
export class TabsPage {
accountType:string="FULL";
constructor() { }
constructor(public sessionDataProviderService: SessionDataProviderService) {
this.accountType = sessionDataProviderService.account_type;
}
}
src/app/pages/transaction/transaction.page.html
+38 -63
View File
@@ -6,72 +6,47 @@
<ion-content class="ion-padding">
<ion-card *ngFor="let item of walletData; let i = index">
<ion-card-header>
<ion-card-title>{{item.description}}</ion-card-title>
<ion-card-subtitle> <span class="balance_line">Balance {{item.amount*0.01}} </span></ion-card-subtitle>
</ion-card-header>
<div class="boxed_contents">
<ion-card *ngFor="let item of walletData; let i = index">
<ion-card-header>
<ion-card-title>{{item.description}}</ion-card-title>
<ion-card-subtitle> <span class="balance_line">Balance {{item.amount*0.01}} </span></ion-card-subtitle>
</ion-card-header>
<ion-card-content>
<ion-grid>
<ion-row>
<!-- <ion-col> <ion-button size="small" color="success" expand="block">Redeem</ion-button></ion-col>-->
<!-- <ion-col></ion-col>-->
<!-- <ion-col><ion-button size="small" expand="block">Add Credit</ion-button></ion-col>-->
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
<ion-card-content>
<ion-grid>
<ion-row>
<!-- <ion-col> <ion-button size="small" color="success" expand="block">Redeem</ion-button></ion-col>-->
<!-- <ion-col></ion-col>-->
<!-- <ion-col><ion-button size="small" expand="block">Add Credit</ion-button></ion-col>-->
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
<!--<div class="wallet_panel" *ngFor="let item of walletData; let i = index">-->
<!-- <ion-grid>-->
<!-- <ion-row>-->
<!-- <ion-col>-->
<!-- <div class="currency">{{item.description}} </div>-->
<!-- Balance {{item.amount*0.01}}-->
<!-- </ion-col>-->
<!-- <ion-col>-->
<!-- <ion-grid>-->
<!-- <ion-row>-->
<!-- <ion-col>-->
<!-- <ion-button shape="round" expand="block">+ Credit</ion-button>-->
<!-- </ion-col>-->
<!-- </ion-row>-->
<!-- <ion-row>-->
<!-- <ion-col>-->
<!-- <ion-button shape="round" expand="block">WithDraw</ion-button>-->
<!-- </ion-col>-->
<!-- </ion-row>-->
<!-- </ion-grid>-->
<!-- </ion-col>-->
<!-- </ion-row>-->
<!-- </ion-grid>-->
<!--</div>-->
<ion-list>
<ion-list-header>
<ion-label>Recent Transactions</ion-label>
</ion-list-header>
<ion-item>
<ion-label>
<ion-list>
<ion-list-header>
<ion-label>Recent Transactions</ion-label>
</ion-list-header>
<ion-item>
<ion-label>
<div class="bg_white" *ngFor="let item of paymentData;">
<div class="list">
<div class="detail">
<!-- <div dangerouslySetInnerHTML={{__html: item.recipient}}></div>-->
<!-- <ion-label class="name">{{item.recipient}}</ion-label>-->
<div [innerHTML]="item.recipient"></div>
<ion-label class="paid">{{item.confirmation}}- {{item.amount*0.01}}</ion-label>
</div>
</div>
<!-- <ion-label class="receipt" (click)="onReceipt(item)"><ion-icon name="chevron-forward-outline"></ion-icon></ion-label>-->
<ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
</div>
</ion-label>
</ion-item>
</ion-list>
<div class="bg_white" *ngFor="let item of paymentData;">
<div class="list">
<div class="detail">
<!-- <div dangerouslySetInnerHTML={{__html: item.recipient}}></div>-->
<!-- <ion-label class="name">{{item.recipient}}</ion-label>-->
<div [innerHTML]="item.recipient"></div>
<ion-label class="paid">{{item.confirmation}}- {{item.amount*0.01}}</ion-label>
</div>
</div>
<!-- <ion-label class="receipt" (click)="onReceipt(item)"><ion-icon name="chevron-forward-outline"></ion-icon></ion-label>-->
<ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
</div>
</ion-label>
</ion-item>
</ion-list>
</div>
</ion-content>
src/global.scss
+6
View File
@@ -113,4 +113,10 @@ ion-modal.custom_modal_bottom {
font-size: 14px;
font-weight: bolder;
margin-left: 50px;
}
.bold_text_red {
font-size: 20px;
font-family: 'bold';
color:red;
}