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

offer recieved

Browse Source
This commit is contained in:
CHIEFSOFT\ameye
2025-08-16 08:53:48 -04:00
parent ff3aab7a4f
commit c71104fad8
2 changed files with 186 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/offers-received/offers-received.component.html
+138 -98
View File
@@ -1,107 +1,147 @@
<div *ngIf="showCount==true" class="flex hdt"> <div *ngIf="showCount==true" class="flex hdt">
<ion-label class="bold_text">You have {{total_offers}} Offer(s)</ion-label> <ion-label *ngIf="total_offers>0" class="bold_text">You have {{total_offers}} Offer(s)</ion-label>
<div *ngIf="total_offers==0 || total_offers === null">
<ion-card>
<img alt="No Current Offer" src="https://www.wrenchboard.com/assets/images/apps/banners/active-jobs.jpg"/>
<ion-card-header>
<ion-card-subtitle>No current offer found.</ion-card-subtitle>
</ion-card-header>
<ion-card-content>
<div style="display: flex; flex-direction: row;">
<div>
You will be notified once you receive a new offer. You can then go to the market to show
interest in any task.
</div>
<div>
<ion-button fill="outline" (click)="getMyOffersData()">
<ion-icon slot="icon-only" name="refresh"></ion-icon>
</ion-button>
</div>
</div>
</ion-card-content>
</ion-card>
</div>
</div> </div>
<div *ngFor="let item of myOffersData"> <div *ngFor="let item of myOffersData">
<div class="offerBanner"> <div class="offerBanner">
<div style="padding: 5px 0 5px 10px; color: red; font-weight: normal; font-size: 16px;"> This Offer Expires : {{item.expire | date}}</div> <div style="padding: 5px 0 5px 10px; color: red; font-weight: bolder; font-size: 12px;"><span
<div style="padding-bottom: 5px; width: 100%"> style="color: #0b5e86;">You have a new offer, this offer expires on </span> {{item.expire | date}}</div>
<!-- <div style="min-width: 50px; padding: 10px; max-width: 50px; max-height: 50px;" ><img--> <div style="padding-bottom: 5px; width: 100%">
<!-- class="bg_image back_image banner_image"--> <!-- <div style="min-width: 50px; padding: 10px; max-width: 50px; max-height: 50px;" ><img-->
<!-- alt="job banner" src="{{session_image_server+'/'+curr_session+'/job/'+item.job_uid}}" />--> <!-- class="bg_image back_image banner_image"-->
<!-- </div>--> <!-- alt="job banner" src="{{session_image_server+'/'+curr_session+'/job/'+item.job_uid}}" />-->
<div> <!-- </div>-->
<div style="width: 100%; flex-direction: column;"> <div>
<div class="offer_title" style="padding-left: 5px;">{{(item.title.length > 65) ? item.title.substring(0,64)+"...": item.title }}</div> <div style="width: 100%; flex-direction: column; padding: 10px;">
<div class="offer_title"><span
style="color: #0b5e86;">Title : </span>{{(item.title.length > 45) ? item.title.substring(0, 44) + "..." : item.title }}
</div>
<div style="display: flex; width: 100%;"> <div style="display: flex; width: 100%;">
<div style="width: 50%;" class="price">{{item.price*0.01| number : '1.2-2'}} {{item.currency}}</div> <div style="width: 50%;" class="price"><span
<div style="text-align: right; padding: 0 5px 0 5px; width: 50%; "> style="color: #0b5e86;">Reward: </span>{{item.price * 0.01| number : '1.2-2'}} {{item.currency}}
<ion-button </div>
size="small" <div style="text-align: right; padding: 0 5px 0 5px; width: 50%; ">
(click)="openOfferDetail(item)" <ion-button
color="secondary" fill="outline" shape="round">{{ (currOpenOffer !='' && currOpenOffer==item.offer_uid)? 'Close': 'View'}} </ion-button> size="small"
(click)="openOfferDetail(item)"
color="secondary" fill="outline"
shape="round">{{ (currOpenOffer != '' && currOpenOffer == item.offer_uid) ? 'Close' : 'View Offer'}} </ion-button>
</div>
</div>
</div>
</div> </div>
</div>
</div> </div>
</div>
<div *ngIf="currOpenOffer !='' && currOpenOffer==item.offer_uid"
style="border-radius: 10px; margin: 15px; background-color: #f5f5f0; padding: 5px; margin: 5px;">
<div>
<div style="font-size: 14px; background-color: transparent;">
<div>
<ion-label class="bold_text ion-text-wrap"><span
class="soft_label">Title : </span> {{item.title}}</ion-label>
</div>
<div>
<ion-label class="ion-text-wrap"><span class="soft_label" style="font-weight: bolder">Description : </span>{{item.description}}
</ion-label>
</div>
<div>
<ion-label class="ion-text-nowrap price"><span
class="soft_label">Reward :</span> {{item.price * 0.01| number : '1.2-2'}} {{item.currency}}
<span class="soft_label">Duration :</span> {{item.timeline_days}} day(s)
</ion-label>
</div>
<div>
<span class="soft_label" style="padding-top: 5px; font-weight: bolder;">Expected Delivery Details : </span>
</div>
<div style="padding-bottom: 5px;">
<ion-textarea
style="height: 120px; background-color: white; padding: 5px; margin: 0; font-size: 14px; border-radius: 5px;"
[autoGrow]="false"
[rows]="5"
[readonly]="true"
value={{item.job_description}}
>
</ion-textarea>
</div>
<div>
<div style="display: flex; padding: 5px; width: 100%;">
<div style="width: 50%;">
<ion-button size="small" (click)="requestReject(item)" color="danger" fill="solid"
shape="round"><b>Reject Offer</b></ion-button>
</div>
<div style="width: 50%; text-align: right;">
<ion-button size="small" (click)="requestStart(item)" color="success" fill="solid"
shape="round">Start Now
</ion-button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <div *ngIf="currOpenOffer !='' && currOpenOffer==item.offer_uid" style="border-radius: 10px; margin: 15px;">-->
<!-- <div>-->
<!-- <ion-list style="font-size: 14px; background-color: transparent;">-->
<!-- <ion-item>-->
<!-- <ion-label class="bold_text ion-text-wrap">{{item.title}}</ion-label>-->
<!-- </ion-item>-->
<!-- <ion-item>-->
<!-- <ion-label class="ion-text-wrap">{{item.description}}</ion-label>-->
<!-- </ion-item>-->
<!-- <ion-item>-->
<!-- <ion-label class="ion-text-nowrap price">{{item.price*0.01| number : '1.2-2'}} {{item.currency}} {{item.timeline_days}} day(s) </ion-label>-->
<!-- </ion-item>-->
<!-- <ion-item>-->
<!-- <ion-textarea-->
<!-- style="height: 120px; background-color: whitesmoke; margin: 0; font-size: 14px"-->
<!-- [autoGrow]="false"-->
<!-- [rows]="5"-->
<!-- value={{item.job_description}}-->
<!-- >-->
<!-- </ion-textarea>-->
<!-- </ion-item>-->
<!-- <ion-item>-->
<!-- <div style="display: flex; padding: 5px; width: 100%;">-->
<!-- <div style="width: 50%;">-->
<!-- <ion-button size="small" (click)="requestReject(item)" color="danger" fill="clear" shape="round">Reject</ion-button>-->
<!-- </div>-->
<!-- <div style="width: 50%; text-align: right;">-->
<!-- <ion-button size="small" (click)="requestStart(item)" color="success" fill="solid" shape="round">Start Now</ion-button>-->
<!-- </div>-->
<!-- </div>-->
<!-- </ion-item>-->
<!-- </ion-list>-->
<!-- </div>-->
<!-- </div>-->
</div> </div>
<div *ngIf="currOpenOffer !='' && currOpenOffer==item.offer_uid" style="border-radius: 10px; margin: 15px;">
<div>
<div style="font-size: 14px; background-color: transparent;">
<div>
<ion-label class="bold_text ion-text-wrap">{{item.title}}</ion-label>
</div>
<div>
<ion-label class="ion-text-wrap">{{item.description}}</ion-label>
</div>
<div>
<ion-label class="ion-text-nowrap price">Reward : {{item.price*0.01| number : '1.2-2'}} {{item.currency}} Duration : {{item.timeline_days}} day(s) </ion-label>
</div>
<div>
<ion-textarea
style="height: 120px; background-color: white; padding: 5px; margin: 0; font-size: 14px; border-radius: 5px;"
[autoGrow]="false"
[rows]="5"
[readonly]="true"
value={{item.job_description}}
>
</ion-textarea>
</div>
<div>
<div style="display: flex; padding: 5px; width: 100%;">
<div style="width: 50%;">
<ion-button size="small" (click)="requestReject(item)" color="danger" fill="clear" shape="round"><b>Reject</b></ion-button>
</div>
<div style="width: 50%; text-align: right;">
<ion-button size="small" (click)="requestStart(item)" color="success" fill="solid" shape="round">Start Now</ion-button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <div *ngIf="currOpenOffer !='' && currOpenOffer==item.offer_uid" style="border-radius: 10px; margin: 15px;">-->
<!-- <div>-->
<!-- <ion-list style="font-size: 14px; background-color: transparent;">-->
<!-- <ion-item>-->
<!-- <ion-label class="bold_text ion-text-wrap">{{item.title}}</ion-label>-->
<!-- </ion-item>-->
<!-- <ion-item>-->
<!-- <ion-label class="ion-text-wrap">{{item.description}}</ion-label>-->
<!-- </ion-item>-->
<!-- <ion-item>-->
<!-- <ion-label class="ion-text-nowrap price">{{item.price*0.01| number : '1.2-2'}} {{item.currency}} {{item.timeline_days}} day(s) </ion-label>-->
<!-- </ion-item>-->
<!-- <ion-item>-->
<!-- <ion-textarea-->
<!-- style="height: 120px; background-color: whitesmoke; margin: 0; font-size: 14px"-->
<!-- [autoGrow]="false"-->
<!-- [rows]="5"-->
<!-- value={{item.job_description}}-->
<!-- >-->
<!-- </ion-textarea>-->
<!-- </ion-item>-->
<!-- <ion-item>-->
<!-- <div style="display: flex; padding: 5px; width: 100%;">-->
<!-- <div style="width: 50%;">-->
<!-- <ion-button size="small" (click)="requestReject(item)" color="danger" fill="clear" shape="round">Reject</ion-button>-->
<!-- </div>-->
<!-- <div style="width: 50%; text-align: right;">-->
<!-- <ion-button size="small" (click)="requestStart(item)" color="success" fill="solid" shape="round">Start Now</ion-button>-->
<!-- </div>-->
<!-- </div>-->
<!-- </ion-item>-->
<!-- </ion-list>-->
<!-- </div>-->
<!-- </div>-->
</div>
</div> </div>
src/app/components/offers-received/offers-received.component.scss
+48 -33
View File
@@ -2,71 +2,80 @@
font-size: 16px; font-size: 16px;
font-weight: bolder; font-weight: bolder;
} }
.offerBanner{
.soft_label {
color: #0b5e86;
}
.offerBanner {
box-shadow: 2px 1px 1px #bbadad; box-shadow: 2px 1px 1px #bbadad;
//background-color: #e8f1e8; //background-color: #e8f1e8;
background: linear-gradient(to top, #f0f8ff 0%, #f0f9fd 100%); background: linear-gradient(to top, #f6f8fa 0%, #f0f9fd 100%);
border-radius: 10px; border-radius: 10px;
border-color: #383a3e; border-color: #383a3e;
margin-top: 10px; margin-top: 10px;
margin-bottom: 5px; margin-bottom: 5px;
//display: flex;
.offer_title{ .offer_title {
font-size: 16px; font-size: 16px;
font-weight: bolder; font-weight: bolder;
//width: 100%;
//display: block;
//white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
padding-top: 5px; padding-top: 5px;
height: 55px; height: 35px;
// background-color:whitesmoke;
} }
.price{
.price {
margin-top: 5px; margin-top: 5px;
margin-bottom: 5px; margin-bottom: 5px;
color:green; color: green;
font-size: 14px; font-size: 14px;
font-weight: bolder; font-weight: bolder;
} }
.expire{
.expire {
font-weight: bold; font-weight: bold;
color: red; color: red;
font-size: 14px; font-size: 14px;
} }
} }
.offers_div{ .offers_div {
background-color: aliceblue; background-color: aliceblue;
border-radius: 10px; border-radius: 10px;
border-color: #383a3e; border-color: #383a3e;
margin: 10px 0 10px 0; margin: 10px 0 10px 0;
.offer_title{
.offer_title {
font-size: 18px; font-size: 18px;
font-weight: bolder; font-weight: bolder;
} }
.action_area{
background-color:whitesmoke; .action_area {
background-color: whitesmoke;
} }
.offer_banner{
.offer_banner {
border-radius: 100%; border-radius: 100%;
background-color: white; background-color: white;
width: 100%; width: 100%;
height: auto; height: auto;
} }
.price{
.price {
margin-top: 5px; margin-top: 5px;
margin-bottom: 5px; margin-bottom: 5px;
color:green; color: green;
font-size: 14px; font-size: 14px;
} }
.expire{
.expire {
font-weight: bold; font-weight: bold;
color: red; color: red;
font-size: 10px; font-size: 10px;
} }
.detail_txt{
.detail_txt {
font-size: 14px; font-size: 14px;
margin: 5px; margin: 5px;
font-weight: bold; font-weight: bold;
@@ -75,15 +84,16 @@
min-height: 120px; min-height: 120px;
padding: 3px; padding: 3px;
overflow: hidden; overflow: hidden;
text-overflow:ellipsis; text-overflow: ellipsis;
} }
} }
ion-content { ion-content {
.hdt{ .hdt {
padding-bottom: 10px; padding-bottom: 10px;
} }
.back_image { .back_image {
width: 100%; width: 100%;
height: 100px; height: 100px;
@@ -432,32 +442,35 @@ ion-content {
} }
.bold_text { .bold_text {
font-size: 20px; font-size: 20px;
font-family: 'bold'; font-family: 'bold';
} }
} }
ion-card{ ion-card {
border-color: #3dc2ff; border-color: #3dc2ff;
background-color: aliceblue; background-color: aliceblue;
margin-left: 0px; margin-left: 0px;
margin-right: 0px; margin-right: 0px;
ion-card-content{
ion-card-content {
font-size: 14px; font-size: 14px;
} }
ion-card-subtitle{
ion-card-subtitle {
color: red; color: red;
} }
.top_banner{
.top_banner {
background-color: white; background-color: white;
width: 100%; width: 100%;
//background-color: #2dd36f; //background-color: #2dd36f;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
text-align: center; text-align: center;
.offer_banner{
.offer_banner {
width: auto; width: auto;
height: 100px; height: 100px;
background-size: contain; background-size: contain;
@@ -466,12 +479,14 @@ ion-card{
} }
} }
.offer_title{ .offer_title {
font-size: 18px; font-size: 18px;
} }
ion-grid{
ion-grid {
background-color: white; background-color: white;
ion-col{
ion-col {
text-align: center; text-align: center;
} }
} }