Style for work worker

This commit is contained in:
CHIEFSOFT\ameye
2024-02-11 13:29:22 -05:00
parent c2abc5e7c8
commit eddaa760fd
4 changed files with 157 additions and 137 deletions
@@ -1,53 +1,60 @@
<div style="height: 280px;" *ngIf="BANNER_MODE == 3; "> <div style="height: 260px" *ngIf="BANNER_MODE == 3">
<ion-grid class="extra-grid"> <ion-grid class="extra-grid">
<ion-row> <ion-row>
<ion-col class="ext-col" (click)="activeTasks()"> <ion-col class="ext-col" (click)="activeTasks()">
<div class="ext-in bg"> <div class="ext-in bg">
<div class="ban-text">Go to active task(s)</div> <div class="ban-text">Go to Active Task(s)</div>
<div class="small-text">You have {{active_job_count}} active task(s)</div> <div class="small-text">
</div> You have {{ active_job_count }} active task(s)
</ion-col> </div>
</ion-row> </div>
<ion-row> </ion-col>
<ion-col class="ext-col" (click)="pastDue()"> </ion-row>
<div class="ext-in l past-due"> <ion-row>
<div class="ban-text">{{pastdue_job_count}} Past Due Task(s) </div> <ion-col class="ext-col" (click)="pastDue()">
</div> <div class="ext-in l past-due">
</ion-col> <div class="ban-text">{{ pastdue_job_count }} Past Due Task(s)</div>
<ion-col class="ext-col" (click)="reView()"> </div>
<div class="ext-in r review"> </ion-col>
<div class="ban-text">{{review_job_count}} Task(s) in Review</div> <ion-col class="ext-col" (click)="reView()">
</div> <div class="ext-in r review">
</ion-col> <div class="ban-text">{{ review_job_count }} Task(s) in Review</div>
</ion-row> </div>
</ion-grid> </ion-col>
</ion-row>
</ion-grid>
</div> </div>
<div style="height: 160px;" *ngIf="BANNER_MODE == 1 && active_job_count > 0 ;" > <div style="height: 130px" *ngIf="BANNER_MODE == 1 && active_job_count > 0">
<ion-grid class="extra-grid"> <ion-grid class="extra-grid">
<ion-row> <ion-row>
<ion-col class="ext-col" (click)="pastDue()"> <ion-col class="ext-col" (click)="activeTasks()">
<div class="ban-text">You have {{active_job_count}} active task(s)</div> <div class="ext-in bg">
</ion-col> <div class="ban-text">Go to Active Task(s)</div>
</ion-row> <div class="small-text">
</ion-grid> You have {{ active_job_count }} active task(s)
</div>
</div>
</ion-col>
</ion-row>
</ion-grid>
</div> </div>
<div style="height: 160px;" *ngIf="BANNER_MODE == 2 && active_job_count == 0 ;" > <div style="height: 130px" *ngIf="BANNER_MODE == 2 && active_job_count == 0">
<ion-grid class="extra-grid"> <ion-grid class="extra-grid">
<ion-row> <ion-row>
<ion-col class="ext-col" (click)="pastDue()"> <ion-col class="ext-col" (click)="pastDue()">
<div class="ext-in l past-due"> <div class="ext-in l past-due">
<div class="ban-text">{{pastdue_job_count}} Past Due Task(s) </div> <div class="ban-text">{{ pastdue_job_count }} Past Due Task(s)</div>
</div> </div>
</ion-col> </ion-col>
<ion-col class="ext-col" (click)="reView()"> <ion-col class="ext-col" (click)="reView()">
<div class="ext-in r review"> <div class="ext-in r review">
<div class="ban-text">{{review_job_count}} Task(s) in Review</div> <div class="ban-text">{{ review_job_count }} Task(s) in Review</div>
</div> </div>
</ion-col> </ion-col>
</ion-row> </ion-row>
</ion-grid> </ion-grid>
</div> </div>
<!--<ion-grid class="extra-grid">--> <!--<ion-grid class="extra-grid">-->
@@ -66,31 +73,31 @@
<!--</ion-grid>--> <!--</ion-grid>-->
<div <div
*ngFor="let item of bannerData; let i = index" *ngFor="let item of bannerData; let i = index"
class="bg_white {{item.short_style}} {{item.card_type}} " class="bg_white {{ item.short_style }} {{ item.card_type }} "
(click)="onDetails(item)" (click)="onDetails(item)"
> >
<div class="list"> <div class="list">
<div *ngIf="item.banner_location === 'URL' "> <div *ngIf="item.banner_location === 'URL'">
<!-- code to render a large video block--> <!-- code to render a large video block-->
<div <div
class="bg_image back_image banner_image" class="bg_image back_image banner_image"
[style.backgroundImage]="'url('+item.banner+')'" [style.backgroundImage]="'url(' + item.banner + ')'"
></div> ></div>
</div>
<div *ngIf="item.banner_location === 'LOCAL' ">
<div
class="bg_image back_image banner_image"
[style.backgroundImage]="'url(assets/images/'+item.banner+')'"
></div>
</div>
<div class="detail">
<ion-label class="name">{{item.short_title}}</ion-label>
<ion-label class="bg_text ovf" style="background-color: white"
>{{item.short_description}}</ion-label
>
</div>
</div> </div>
<!-- <ion-icon slot="end" name="bookmark-outline" class="save" color="primary"></ion-icon>--> <div *ngIf="item.banner_location === 'LOCAL'">
<div
class="bg_image back_image banner_image"
[style.backgroundImage]="'url(assets/images/' + item.banner + ')'"
></div>
</div>
<div class="detail">
<ion-label class="name">{{ item.short_title }}</ion-label>
<ion-label class="bg_text ovf" style="background-color: white">{{
item.short_description
}}</ion-label>
</div>
</div>
<!-- <ion-icon slot="end" name="bookmark-outline" class="save" color="primary"></ion-icon>-->
</div> </div>
@@ -1,5 +1,5 @@
.p-w{ .p-w{
height:180px; height:170px;
background-color: rgba(46, 9, 52, 0.47); background-color: rgba(46, 9, 52, 0.47);
border-radius: 10px; border-radius: 10px;
box-shadow: 1px 1px lightgray; box-shadow: 1px 1px lightgray;
@@ -8,12 +8,12 @@
.extra-grid{ .extra-grid{
margin: 10px 0px 10px 0px; margin: 10px 0px 10px 0px;
padding: 0px; padding: 0px;
height: 140px; height: 130px;
.ext-col{ .ext-col{
padding: 5px; padding: 5px;
//background-color: #2dd36f; //background-color: #2dd36f;
height: 140px; height: 130px;
.ext-in{ .ext-in{
&.bg{ &.bg{
background-image: url("https://www.wrenchboard.com/assets/images/apps/xt/task.png"); background-image: url("https://www.wrenchboard.com/assets/images/apps/xt/task.png");
@@ -26,7 +26,8 @@
color: white; color: white;
&.past-due{ &.past-due{
background-image: url("https://www.wrenchboard.com/assets/images/apps/xt/pastdue.png"); background-image: url("https://www.wrenchboard.com/assets/images/apps/xt/pastdue.png");
background-color: darkred; background-color: #d510106b;
color:black;
} }
} }
&.r{ &.r{
@@ -37,18 +38,19 @@
color: white; color: white;
&.review{ &.review{
background-image: url("https://www.wrenchboard.com/assets/images/apps/xt/review.png"); background-image: url("https://www.wrenchboard.com/assets/images/apps/xt/review.png");
background-color: #866508; background-color: #08860f8f;
color: black;
} }
} }
background-color: antiquewhite; background-color: antiquewhite;
height: 130px; height: 120px;
border-radius: 10px; border-radius: 10px;
box-shadow: 1px 1px lightgray; box-shadow: 1px 1px lightgray;
text-align: center; text-align: center;
.ban-text{ .ban-text{
font-size: 24px; font-size: 22px;
font-weight: bolder; font-weight: bolder;
padding-top: 40px; padding-top: 40px;
padding-left: 20px; padding-left: 20px;
@@ -85,12 +85,14 @@ export class WorkersDashComponent implements OnInit {
let item: { let item: {
'tab': 'PASTDUE' 'tab': 'PASTDUE'
}; };
dispatchEvent(new Event("mytask_tab_pastdue"));
this.router.navigate(['tabs/mytasks'],{state: item}); this.router.navigate(['tabs/mytasks'],{state: item});
} }
reView(){ reView(){
let item: { let item: {
'tab': 'REVIEW' 'tab': 'REVIEW'
}; };
dispatchEvent(new Event("mytask_tab_review"));
this.router.navigate(['tabs/mytasks'],{state: item}); this.router.navigate(['tabs/mytasks'],{state: item});
} }
@@ -98,6 +100,7 @@ export class WorkersDashComponent implements OnInit {
let item: { let item: {
'tab': 'ACTIVE' 'tab': 'ACTIVE'
}; };
dispatchEvent(new Event("mytask_tab_active"));
this.router.navigate(['tabs/mytasks'],{state: item}); this.router.navigate(['tabs/mytasks'],{state: item});
} }
onDetails(item) { onDetails(item) {
@@ -149,3 +152,7 @@ export class WorkersDashComponent implements OnInit {
} }
} }
+63 -59
View File
@@ -1,73 +1,83 @@
import { Router } from '@angular/router'; import { Router } from "@angular/router";
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from "@angular/core";
import { WrenchService } from 'src/app/services/wrench.service'; import { WrenchService } from "src/app/services/wrench.service";
import {SessionDataProviderService} from "../../store/session-data-provider.service"; import { SessionDataProviderService } from "../../store/session-data-provider.service";
import {TasksDataService} from "../../store/tasks-data.service"; import { TasksDataService } from "../../store/tasks-data.service";
import {UsersoffersDataService} from "../../store/usersoffers-data.service"; import { UsersoffersDataService } from "../../store/usersoffers-data.service";
@Component({ @Component({
selector: 'app-mytasks', selector: "app-mytasks",
templateUrl: './mytasks.page.html', templateUrl: "./mytasks.page.html",
styleUrls: ['./mytasks.page.scss'], styleUrls: ["./mytasks.page.scss"],
}) })
export class MytasksPage implements OnInit { export class MytasksPage implements OnInit {
tabs: any = "tasks";
extraData: any;
tabs: any = 'tasks'; active_offers_count: number = 0;
extraData:any; active_job_count: number = 0;
active_offers_count:number =0; pastdue_job_count: number = 0;
active_job_count:number =0; review_job_count: number = 0;
pastdue_job_count:number =0; session_image_server: string = "";
review_job_count:number =0; curr_session: string = "";
session_image_server:string='';
curr_session:string='';
constructor( constructor(
private router: Router, private router: Router,
public sessionDataProviderService: SessionDataProviderService, public sessionDataProviderService: SessionDataProviderService,
private wrenchService: WrenchService, private wrenchService: WrenchService,
public tasksDataService:TasksDataService, public tasksDataService: TasksDataService,
public usersoffersDataService:UsersoffersDataService public usersoffersDataService: UsersoffersDataService
) { ) {
// this.extraData = this.router.getCurrentNavigation().extras.state; addEventListener('mytask_tab_pastdue', () => {
// debugger; this.tabs="pastdue";
});
addEventListener('mytask_tab_review', () => {
this.tabs="review";
});
addEventListener('mytask_tab_active', () => {
this.tabs="tasks";
});
} }
myOffersData :[]; myOffersData: [];
ngOnInit() { ngOnInit() {
// debugger; // debugger;
this.refreshJobsData(); this.refreshJobsData();
this.getJobsData(); this.getJobsData();
} }
startOfferPage(){ startOfferPage() {
this.router.navigate(['joboffers']); this.router.navigate(["joboffers"]);
} }
activeSelected(item) { activeSelected(item) {
this.router.navigate(['activetask'],{state: item}); this.router.navigate(["activetask"], { state: item });
} }
usrData: { usrData: {
action:number, action: number;
member_id: number, member_id: number;
uid: string, sessionid: string, uid: string;
limit:20, sessionid: string;
page:0, limit: 20;
offset: 0, page: 0;
job_mode: string, offset: 0;
allstatus: number job_mode: string;
allstatus: number;
}; };
jobsTotalInReviewData:any; jobsTotalInReviewData: any;
jobsInReviewData: []; jobsInReviewData: [];
jobsTotalPastDueData:any; jobsTotalPastDueData: any;
jobsPastDueData: []; jobsPastDueData: [];
jobsTotalData:any; jobsTotalData: any;
jobsData: []; jobsData: [];
async refreshJobsData(){ async refreshJobsData() {
this.jobsData = this.tasksDataService.jobsData; this.jobsData = this.tasksDataService.jobsData;
this.jobsPastDueData = this.tasksDataService.jobsPastDueData; this.jobsPastDueData = this.tasksDataService.jobsPastDueData;
this.jobsInReviewData = this.tasksDataService.jobsInReviewData; this.jobsInReviewData = this.tasksDataService.jobsInReviewData;
@@ -77,27 +87,23 @@ export class MytasksPage implements OnInit {
this.pastdue_job_count = this.tasksDataService.pastdue_job_count; this.pastdue_job_count = this.tasksDataService.pastdue_job_count;
this.review_job_count = this.tasksDataService.review_job_count; this.review_job_count = this.tasksDataService.review_job_count;
this.myOffersData = this.usersoffersDataService.myOffersData;
this.myOffersData = this.usersoffersDataService.myOffersData; this.active_offers_count = this.usersoffersDataService.total_offers;
this.active_offers_count = this.usersoffersDataService.total_offers; console.log("Any OFFERRRR-> :::: ", this.active_offers_count);
console.log("Any OFFERRRR-> :::: ",this.active_offers_count);
} }
async getJobsData(){ async getJobsData() {
this.curr_session = this.sessionDataProviderService.session;
this.curr_session = this.sessionDataProviderService.session; var interval = setInterval(() => {
var interval = setInterval( ()=> { this.refreshJobsData();
this.refreshJobsData();
}, 5000); }, 5000);
} }
activeSeleted(item) { activeSeleted(item) {
this.router.navigate(['activetask'],{state: item}); this.router.navigate(["activetask"], { state: item });
} }
// getPastDueJobsData(){ // getPastDueJobsData(){
// //
// this.usrData = {action:11200, member_id: this.sessionDataProviderService.member_id, uid: this.sessionDataProviderService.member_uid, // this.usrData = {action:11200, member_id: this.sessionDataProviderService.member_id, uid: this.sessionDataProviderService.member_uid,
@@ -115,7 +121,6 @@ export class MytasksPage implements OnInit {
// //
// } // }
// getInReviewJobsData(){ // getInReviewJobsData(){
// //
// this.usrData = {action:11200, // this.usrData = {action:11200,
@@ -135,5 +140,4 @@ export class MytasksPage implements OnInit {
// ); // );
// //
// } // }
} }