gaf-mobile
Version:
GAF mobile Web site
585 lines (554 loc) • 45.8 kB
HTML
<!-- PAGE VIEW -->
<!-- User projects lists -->
<div class="my-projects scroll-container" fl-analytics-section="MyProjects">
<!-- Use to scroll to top when click on the tab of the same name -->
<a id="employer"></a>
<a id="freelancer"></a>
<header class="PageHeader">
<div class="section-inner">
<h1 class="PageHeader-title">My Projects</h1>
</div>
</header>
<nav class="PageNav">
<ul class="PageNav-list">
<li class="PageNav-item">
<a class="PageNav-link" fl-active-tab
ng-click="ctrl.changeTab('employer')"
tab="employer" fl-analytics="GoToEmployerTab">
Employer
</a>
</li>
<li class="PageNav-item">
<a class="PageNav-link" fl-active-tab
ng-click="ctrl.changeTab('freelancer')"
tab="freelancer" fl-analytics="GoToFreelancerTab">
Freelancer
</a>
</li>
</ul>
</nav>
<div class="my-projects-inner">
<section>
<div class="my-projects-header section-inner" ng-if="ctrl.loading">
<div class="my-projects-loading">
<div class="loadingicon">Loading...</div>
</div>
</div>
<div class="my-projects-jobs section-inner">
<!-- PAGE VIEW -->
<!-- Employer Projects -->
<!-- TODO AB Test: ordered employer control -->
<section class="project-info" ng-show="tab.name === 'employer'" ng-if="!ctrl.isInOrderEmployerVariation">
<section class="my-projects-empty" ng-if="!ctrl.loading && !ctrl.projects.employer.open.length && !ctrl.projects.employer.work_in_progress.length && !ctrl.projects.employer.complete.length && !ctrl.projects.employer.draft.length">
<div class="icon-roundy-square large-icon watermark-icon">
<span class="icon-file-powerpoint large-icon-inner"></span>
</div>
<h2>Haven't posted a project?</h2>
<p>Once you start posting projects they will be here for you to manage.</p>
<a class="my-projects-empty-btn btn btn-tertiary" href="/post-project">Post a project</a>
</section>
<!-- Open For Bidding -->
<section class="Card" ng-if="!ctrl.loading && ctrl.projects.employer.open.length" fl-analytics-subsection="OpenProjects">
<header class="Card-header">
<h2 class="Card-title">Open for Bidding</h2>
<a class="Card-headerBtn btn btn-tertiary btn-small" href="/post-project" fl-analytics="PostProject">Post project</a>
</header>
<project-item ng-repeat="project in ctrl.projects.employer.open" project="project">
<!-- Frozen -->
<div ng-if="project.get().status === 'frozen'">
<ng-switch on="project.get().sub_status">
<div class="ProjectStatus ProjectStatus--complete" ng-switch-when="frozen_awarded">
<fl-svg src="/images/icons/flicon-tick-circled.svg" class="ProjectStatus-icon"></fl-svg>
<span class="ProjectStatus-text">Awarded</span>
</div>
<div class="ProjectStatus ProjectStatus--incomplete" ng-switch-when="frozen_timeout">
<fl-svg src="/images/icons/flicon-cross-circled.svg" class="ProjectStatus-icon"></fl-svg>
<span class="ProjectStatus-text">Expired</span>
</div>
<div class="ProjectStatus" ng-switch-default>
<span class="ProjectStatus-text">{{ project.get().sub_status }}</span>
</div>
</ng-switch>
</div>
<div class="ProjectSnapshot-details">
<span class="ProjectSnapshot-budget" ng-if="project.get().bid_stats.bid_avg > 0">
{{ project.get().currency.sign }}{{ (project.get().bid_stats.bid_avg || 0)|number:0 }} {{ project.get().currency.code }}
<span ng-show="project.get().type === 'hourly'"> / hour </span>
<span class="ProjectSnapshot-deadline" ng-show="project.getDaysLeft() === 1">Tomorrow</span>
<span class="ProjectSnapshot-deadline" ng-show="project.getDaysLeft() > 1">in {{ project.getDaysLeft() }} days</span>
</span>
<span class="ProjectSnapshot-budget" ng-if="project.get().bid_stats.bid_avg === 0 || !project.get().bid_stats.bid_avg">
<span class="ProjectSnapshot-deadline" ng-show="project.getDaysLeft() === 0">Bid period has ended</span>
<span class="ProjectSnapshot-deadline" ng-show="project.getDaysLeft() === 1">Bid ends tomorrow</span>
<span class="ProjectSnapshot-deadline" ng-show="project.getDaysLeft() > 1">Bid ends in {{ project.getDaysLeft() }} days</span>
</span>
<span class="ProjectSnapshot-detail">
<!-- TODO: fl-pluralize -->
<span ng-show="project.get().bid_stats.bid_count === 0">No Bids</span>
<span ng-show="project.get().bid_stats.bid_count === 1">1 Bid</span>
<span ng-show="project.get().bid_stats.bid_count > 1">{{ project.get().bid_stats.bid_count }} Bids</span>
</span>
</div>
<button ng-if="ctrl.shouldShowAwardBidButton(project.get())" class="btn btn-small btn-primary ProjectSnapshot-btn" fl-analytics="AwardBid"> Award </button>
</project-item>
<footer class="Card-footer" ng-if="ctrl.hasMoreProjects.employer.open" >
<fl-button class="ContentToggle" action="ctrl.loadProjects('open', 'employer')" fl-analytics="ShowMoreOpenProjects">
<span class="ContentToggle-inner">
<span class="ContentToggle-text">Show more</span>
<span class="ContentToggle-icon">
<fl-svg src="/images/icons/flicon-arrow-down-circled.svg" class="flicon-arrow-down-circled">
</span>
</span>
</fl-button>
</footer>
</section>
<!-- In Progress -->
<section class="Card" ng-if="!ctrl.loading && ctrl.projects.employer.work_in_progress.length" fl-analytics-subsection="WIPProjects">
<header class="Card-header">
<h2 class="Card-title">Work In Progress</h2>
</header>
<project-item ng-repeat="project in ctrl.projects.employer.work_in_progress" project="project">
<div class="ProjectSnapshot-awarded">
<img ng-repeat="bid in ctrl.selectedBids[project.get().id]" class="ProjectSnapshot-avatar profile-img profile-img--xsmall"
src="{{ ctrl.users[bid.bidder_id].avatar_cdn }}"
alt="{{ ctrl.users[bid.bidder_id].username }}" />
<!-- Show if more than 2 awarded bidders show this as the third -->
<span class="ProjectSnapshot-avatar profile-img profile-img--xsmall profile-img--other" ng-if="ctrl.selectedBids[project.get().id] > 2">
<fl-svg src="/images/icons/flicon-ellipsis.svg" class="profile-img-icon"></fl-svg>
</span>
<!-- TODO: fl-pluralize -->
<span ng-if="ctrl.selectedBids[project.get().id].length === 1">{{ ctrl.selectedBids[project.get().id].length }} freelancer awarded</span>
<span ng-if="ctrl.selectedBids[project.get().id].length > 1">{{ ctrl.selectedBids[project.get().id].length }} freelancers awarded</span>
</div>
<div class="ProjectSnapshot-details">
<span class="ProjectSnapshot-budget">
{{ project.get().currency.sign }}{{ (project.get().bid_stats.bid_avg || 0)|number:0 }} {{ project.get().currency.code }}
<span ng-show="project.get().type === 'hourly'"> / hour </span>
<span ng-if="!project.isHourlyProject()">
<span ng-if="ctrl.getDeadline(project).secondsLeft" class="ProjectSnapshot-deadline">
- {{ ctrl.getDeadline(project).secondsLeft | timeAgoFilter }} ago
</span>
<span ng-if="ctrl.getDeadline(project).secondsMore" class="ProjectSnapshot-deadline">
in {{ ctrl.getDeadline(project).secondsMore | timeAgoFilter }}
</span>
</span>
</span>
</div>
<button ng-if="ctrl.shouldShowCreateMilestoneButton[project.get().id]" class="btn btn-small btn-primary ProjectSnapshot-btn" fl-analytics="CreateMilestone"> Create Milestone </button>
</project-item>
<footer class="Card-footer" ng-if="ctrl.hasMoreProjects.employer.work_in_progress">
<fl-button class="ContentToggle" action="ctrl.loadProjects('work_in_progress', 'employer')" fl-analytics="ShowMoreWipProjects">
<span class="ContentToggle-inner">
<span class="ContentToggle-text">Show more</span>
<span class="ContentToggle-icon">
<fl-svg src="/images/icons/flicon-arrow-down-circled.svg" class="flicon-arrow-down-circled">
</span>
</span>
</fl-button>
</footer>
</section>
<!-- Past Projects -->
<section class="Card" ng-if="!ctrl.loading && ctrl.projects.employer.complete.length" fl-analytics-subsection="CompleteProjects">
<header class="Card-header">
<h2 class="Card-title">Past Projects</h2>
</header>
<project-item ng-repeat="project in ctrl.projects.employer.complete" project="project">
<div class="ProjectSnapshot-awarded" ng-if="ctrl.selectedBids[project.get().id][0]">
<img ng-repeat="bid in ctrl.selectedBids[project.get().id]" class="ProjectSnapshot-avatar profile-img profile-img--xsmall"
src="{{ ctrl.users[bid.bidder_id].avatar_cdn }}"
alt="{{ ctrl.users[bid.bidder_id].username }}" />
<!-- Show if more than 2 awarded bidders show this as the third -->
<span class="ProjectSnapshot-avatar profile-img profile-img--xsmall profile-img--other" ng-if="ctrl.selectedBids[project.get().id] > 2">
<fl-svg src="/images/icons/flicon-ellipsis.svg" class="profile-img-icon"></fl-svg>
</span>
<!-- TODO: fl-pluralize -->
<span ng-if="ctrl.selectedBids[project.get().id].length === 1">{{ ctrl.selectedBids[project.get().id].length }} freelancer awarded</span>
<span ng-if="ctrl.selectedBids[project.get().id].length > 1">{{ ctrl.selectedBids[project.get().id].length }} freelancers awarded</span>
</div>
<!-- Closed -->
<div ng-if="project.get().status === 'closed'">
<div class="ProjectStatus ProjectStatus--complete" ng-if="project.get().frontend_project_status === 'complete' && project.get().sub_status !== 'cancel_buyer' && project.get().sub_status !== 'cancel_admin' && project.get().sub_status !== 'closed_expired'">
<fl-svg src="/images/icons/flicon-tick-circled.svg" class="ProjectStatus-icon"></fl-svg>
<span class="ProjectStatus-text">Complete</span>
</div>
<div class="ProjectStatus ProjectStatus--incomplete" ng-if="project.get().sub_status === 'cancel_buyer' || project.get().sub_status === 'cancel_admin'">
<fl-svg src="/images/icons/flicon-cross-circled.svg" class="ProjectStatus-icon"></fl-svg>
<span class="ProjectStatus-text">Cancelled</span>
</div>
<div class="ProjectStatus ProjectStatus--incomplete" ng-if="project.get().sub_status === 'closed_expired'">
<fl-svg src="/images/icons/flicon-cross-circled.svg" class="ProjectStatus-icon"></fl-svg>
<span class="ProjectStatus-text">Closed</span>
</div>
<div class="ProjectStatus" ng-if="project.get().sub_status !== 'closed_awarded' && project.get().sub_status !== 'closed_expired' && project.get().sub_status !== 'cancel_buyer' && project.get().sub_status !== 'cancel_admin'">
<fl-svg src="/images/icons/flicon-cross-circled.svg" class="ProjectStatus-icon"></fl-svg>
<span class="ProjectStatus-text">{{ project.get().sub_status }} </span>
</div>
</div>
<div class="ProjectSnapshot-details">
<span class="ProjectSnapshot-budget">
{{ project.get().currency.sign }}{{ (project.get().bid_stats.bid_avg || 0)|number:0 }} {{ project.get().currency.code }}
<span ng-show="project.get().type === 'hourly'"> / hour </span>
</span>
<small class="ProjectSnapshot-detail">
<!-- TODO: fl-pluralize -->
<span ng-show="project.get().bid_stats.bid_count === 0">No Bids</span>
<span ng-show="project.get().bid_stats.bid_count === 1">1 Bid</span>
<span ng-show="project.get().bid_stats.bid_count > 1">{{ project.get().bid_stats.bid_count }} Bids</span> - {{ project.get().time_submitted |timeAgoFilter }} ago
</small>
</div>
</project-item>
<footer class="Card-footer" ng-if="ctrl.hasMoreProjects.employer.complete" >
<fl-button class="ContentToggle" action="ctrl.loadProjects('complete', 'employer')" fl-analytics="ShowMorePastProjects">
<span class="ContentToggle-inner">
<span class="ContentToggle-text">Show more</span>
<span class="ContentToggle-icon">
<fl-svg src="/images/icons/flicon-arrow-down-circled.svg" class="flicon-arrow-down-circled">
</span>
</span>
</fl-button>
</footer>
</section>
</section>
<!-- TODO AB Test: ordered employer variation -->
<section class="project-info" ng-show="tab.name === 'employer'" ng-if="ctrl.isInOrderEmployerVariation">
<section class="my-projects-empty" ng-if="!ctrl.loading && !ctrl.projects.employer.open.length && !ctrl.projects.employer.work_in_progress.length && !ctrl.projects.employer.complete.length && !ctrl.projects.employer.draft.length">
<div class="icon-roundy-square large-icon watermark-icon">
<span class="icon-file-powerpoint large-icon-inner"></span>
</div>
<h2>Haven't posted a project?</h2>
<p>Once you start posting projects they will be here for you to manage.</p>
<a class="my-projects-empty-btn btn btn-primary" href="/post-project">Post a project</a>
</section>
<!-- Open For Bidding -->
<section class="Card" ng-if="!ctrl.loading && ctrl.projects.employer.open.length > 0" fl-analytics-subsection="OpenProjects">
<header class="Card-header">
<h2 class="Card-title">Open for Bidding</h2>
</header>
<project-item ng-repeat="project in ctrl.projects.employer.open" project="project">
<!-- Frozen -->
<div ng-if="project.get().status === 'frozen'">
<ng-switch on="project.get().sub_status">
<div class="ProjectStatus ProjectStatus--complete" ng-switch-when="frozen_awarded">
<fl-svg src="/images/icons/flicon-tick-circled.svg" class="ProjectStatus-icon"></fl-svg>
<span class="ProjectStatus-text">Awarded</span>
</div>
<div class="ProjectStatus ProjectStatus--incomplete" ng-switch-when="frozen_timeout">
<fl-svg src="/images/icons/flicon-cross-circled.svg" class="ProjectStatus-icon"></fl-svg>
<span class="ProjectStatus-text">Expired</span>
</div>
<div class="ProjectStatus" ng-switch-default>
<span class="ProjectStatus-text">{{ project.get().sub_status }}</span>
</div>
</ng-switch>
</div>
<div class="ProjectSnapshot-details">
<span class="ProjectSnapshot-budget" ng-if="project.get().bid_stats.bid_avg > 0">
{{ project.get().currency.sign }}{{ (project.get().bid_stats.bid_avg || 0)|number:0 }} {{ project.get().currency.code }}
<span ng-show="project.get().type === 'hourly'"> / hour </span>
<span class="ProjectSnapshot-deadline" ng-show="project.getDaysLeft() === 1">Tomorrow</span>
<span class="ProjectSnapshot-deadline" ng-show="project.getDaysLeft() > 1">in {{ project.getDaysLeft() }} days</span>
</span>
<span class="ProjectSnapshot-budget" ng-if="project.get().bid_stats.bid_avg === 0 || !project.get().bid_stats.bid_avg">
<span class="ProjectSnapshot-deadline" ng-show="project.getDaysLeft() === 0">Bid period has ended</span>
<span class="ProjectSnapshot-deadline" ng-show="project.getDaysLeft() === 1">Bid ends tomorrow</span>
<span class="ProjectSnapshot-deadline" ng-show="project.getDaysLeft() > 1">Bid ends in {{ project.getDaysLeft() }} days</span>
</span>
<span class="ProjectSnapshot-detail">
<!-- TODO: fl-pluralize -->
<span ng-show="project.get().bid_stats.bid_count === 0">No Bids</span>
<span ng-show="project.get().bid_stats.bid_count === 1">1 Bid</span>
<span ng-show="project.get().bid_stats.bid_count > 1">{{ project.get().bid_stats.bid_count }} Bids</span>
</span>
</div>
</project-item>
<footer class="Card-footer" ng-if="ctrl.hasMoreProjects.employer.open" >
<fl-button class="ContentToggle" action="ctrl.loadProjects('open', 'employer')" fl-analytics="ShowMoreOpenProjects">
<span class="ContentToggle-inner">
<span class="ContentToggle-text">Show more</span>
<span class="ContentToggle-icon">
<fl-svg src="/images/icons/flicon-arrow-down-circled.svg" class="flicon-arrow-down-circled">
</span>
</span>
</fl-button>
</footer>
</section>
<!-- In Progress -->
<section class="Card" ng-if="!ctrl.loading && ctrl.projects.employer.work_in_progress.length" fl-analytics-subsection="WIPProjects">
<header class="Card-header">
<h2 class="Card-title">Work In Progress</h2>
</header>
<project-item ng-repeat="project in ctrl.projects.employer.work_in_progress" project="project">
<div class="ProjectSnapshot-awarded">
<img ng-repeat="bid in ctrl.selectedBids[project.get().id]" class="ProjectSnapshot-avatar profile-img profile-img--xsmall"
src="{{ ctrl.users[bid.bidder_id].avatar_cdn }}"
alt="{{ ctrl.users[bid.bidder_id].username }}" />
<!-- Show if more than 2 awarded bidders show this as the third -->
<span class="ProjectSnapshot-avatar profile-img profile-img--xsmall profile-img--other" ng-if="ctrl.selectedBids[project.get().id] > 2">
<fl-svg src="/images/icons/flicon-ellipsis.svg" class="profile-img-icon"></fl-svg>
</span>
<!-- TODO: fl-pluralize -->
<span ng-if="ctrl.selectedBids[project.get().id].length === 1">{{ ctrl.selectedBids[project.get().id].length }} freelancer awarded</span>
<span ng-if="ctrl.selectedBids[project.get().id].length > 1">{{ ctrl.selectedBids[project.get().id].length }} freelancers awarded</span>
</div>
<div class="ProjectSnapshot-details">
<span class="ProjectSnapshot-budget">
{{ project.get().currency.sign }}{{ (project.get().bid_stats.bid_avg || 0)|number:0 }} {{ project.get().currency.code }}
<span ng-show="project.get().type === 'hourly'"> / hour </span>
<span ng-if="!project.isHourlyProject()">
<span ng-if="ctrl.getDeadline(project).secondsLeft" class="ProjectSnapshot-deadline">
- {{ ctrl.getDeadline(project).secondsLeft | timeAgoFilter }} ago
</span>
<span ng-if="ctrl.getDeadline(project).secondsMore" class="ProjectSnapshot-deadline">
in {{ ctrl.getDeadline(project).secondsMore | timeAgoFilter }}
</span>
</span>
</span>
</div>
</project-item>
<footer class="Card-footer" ng-if="ctrl.hasMoreProjects.employer.work_in_progress">
<fl-button class="ContentToggle" action="ctrl.loadProjects('work_in_progress', 'employer')" fl-analytics="ShowMoreWipProjects">
<span class="ContentToggle-inner">
<span class="ContentToggle-text">Show more</span>
<span class="ContentToggle-icon">
<fl-svg src="/images/icons/flicon-arrow-down-circled.svg" class="flicon-arrow-down-circled">
</span>
</span>
</fl-button>
</footer>
</section>
<!-- Draft Projects -->
<section class="Card" ng-if="!ctrl.loading && ctrl.projects.employer.draft.length" fl-analytics-subsection="DraftProjects">
<header class="Card-header">
<h2 class="Card-title">Draft Projects</h2>
</header>
<project-item ng-repeat="project in ctrl.projects.employer.draft" project="project">
<span class="ProjectSnapshot-budget">
{{ project.get().type | uppercase }} PROJECT
</span>
</project-item>
<footer class="Card-footer" ng-if="ctrl.hasMoreProjects.employer.draft">
<fl-button class="ContentToggle" action="ctrl.loadProjects('draft', 'employer')" fl-analytics="ShowMoreDraftProjects">
<span class="ContentToggle-inner">
<span class="ContentToggle-text">Show more</span>
<span class="ContentToggle-icon">
<fl-svg src="/images/icons/flicon-arrow-down-circled.svg" class="flicon-arrow-down-circled">
</span>
</span>
</fl-button>
</footer>
</section>
<!-- Past Projects -->
<section class="Card" ng-if="!ctrl.loading && ctrl.projects.employer.complete.length" fl-analytics-subsection="CompleteProjects">
<header class="Card-header">
<h2 class="Card-title">Past Projects</h2>
</header>
<project-item ng-repeat="project in ctrl.projects.employer.complete" project="project">
<div class="ProjectSnapshot-awarded" ng-if="ctrl.selectedBids[project.get().id][0]">
<img ng-repeat="bid in ctrl.selectedBids[project.get().id]" class="ProjectSnapshot-avatar profile-img profile-img--xsmall"
src="{{ ctrl.users[bid.bidder_id].avatar_cdn }}"
alt="{{ ctrl.users[bid.bidder_id].username }}" />
<!-- Show if more than 2 awarded bidders show this as the third -->
<span class="ProjectSnapshot-avatar profile-img profile-img--xsmall profile-img--other" ng-if="ctrl.selectedBids[project.get().id] > 2">
<fl-svg src="/images/icons/flicon-ellipsis.svg" class="profile-img-icon"></fl-svg>
</span>
<!-- TODO: fl-pluralize -->
<span ng-if="ctrl.selectedBids[project.get().id].length === 1">{{ ctrl.selectedBids[project.get().id].length }} freelancer awarded</span>
<span ng-if="ctrl.selectedBids[project.get().id].length > 1">{{ ctrl.selectedBids[project.get().id].length }} freelancers awarded</span>
</div>
<!-- Closed -->
<div ng-if="project.get().status === 'closed'">
<div class="ProjectStatus ProjectStatus--complete" ng-if="project.get().frontend_project_status === 'complete' && project.get().sub_status !== 'cancel_buyer' && project.get().sub_status !== 'cancel_admin' && project.get().sub_status !== 'closed_expired'">
<fl-svg src="/images/icons/flicon-tick-circled.svg" class="ProjectStatus-icon"></fl-svg>
<span class="ProjectStatus-text">Complete</span>
</div>
<div class="ProjectStatus ProjectStatus--incomplete" ng-if="project.get().sub_status === 'cancel_buyer' || project.get().sub_status === 'cancel_admin'">
<fl-svg src="/images/icons/flicon-cross-circled.svg" class="ProjectStatus-icon"></fl-svg>
<span class="ProjectStatus-text">Cancelled</span>
</div>
<div class="ProjectStatus ProjectStatus--incomplete" ng-if="project.get().sub_status === 'closed_expired'">
<fl-svg src="/images/icons/flicon-cross-circled.svg" class="ProjectStatus-icon"></fl-svg>
<span class="ProjectStatus-text">Closed</span>
</div>
<div class="ProjectStatus" ng-if="project.get().sub_status !== 'closed_awarded' && project.get().sub_status !== 'closed_expired' && project.get().sub_status !== 'cancel_buyer' && project.get().sub_status !== 'cancel_admin'">
<fl-svg src="/images/icons/flicon-cross-circled.svg" class="ProjectStatus-icon"></fl-svg>
<span class="ProjectStatus-text">{{ project.get().sub_status }} </span>
</div>
</div>
<div class="ProjectSnapshot-details">
<span class="ProjectSnapshot-budget">
{{ project.get().currency.sign }}{{ (project.get().bid_stats.bid_avg || 0)|number:0 }} {{ project.get().currency.code }}
<span ng-show="project.get().type === 'hourly'"> / hour </span>
</span>
<small class="ProjectSnapshot-detail">
<!-- TODO: fl-pluralize -->
<span ng-show="project.get().bid_stats.bid_count === 0">No Bids</span>
<span ng-show="project.get().bid_stats.bid_count === 1">1 Bid</span>
<span ng-show="project.get().bid_stats.bid_count > 1">{{ project.get().bid_stats.bid_count }} Bids</span> - {{ project.get().time_submitted |timeAgoFilter }} ago
</small>
</div>
</project-item>
<footer class="Card-footer" ng-if="ctrl.hasMoreProjects.employer.complete" >
<fl-button class="ContentToggle" action="ctrl.loadProjects('complete', 'employer')" fl-analytics="ShowMorePastProjects">
<span class="ContentToggle-inner">
<span class="ContentToggle-text">Show more</span>
<span class="ContentToggle-icon">
<fl-svg src="/images/icons/flicon-arrow-down-circled.svg" class="flicon-arrow-down-circled">
</span>
</span>
</fl-button>
</footer>
</section>
</section>
<!-- PAGE VIEW -->
<!-- freelancer projects -->
<section class="project-info" ng-show="tab.name === 'freelancer'">
<section class="my-projects-empty" ng-if="!ctrl.loading && !ctrl.projects.freelancer.active.length && !ctrl.projects.freelancer.in_progress.length && !ctrl.projects.freelancer.complete.length">
<div class="icon-roundy-square large-icon watermark-icon">
<span class="icon-file-powerpoint large-icon-inner"></span>
</div>
<h2>Haven't bid on a project?</h2>
<p>After bidding on a project, it will be shown here.</p>
<a class="my-projects-empty-btn btn btn-primary" href="/jobs">Start bidding</a>
</section>
<section class="Card" ng-if="!ctrl.loading && ctrl.projects.freelancer.active.length" fl-analytics-subsection="OpenProjects">
<header class="Card-header">
<h2 class="Card-title">Active Bids</h2>
</header>
<project-item ng-repeat="project in ctrl.projects.freelancer.active" project="project">
<!-- Frozen -->
<div ng-if="project.get().status === 'frozen'">
<ng-switch on="project.get().sub_status">
<div class="ProjectStatus ProjectStatus--complete" ng-switch-when="frozen_awarded">
<fl-svg src="/images/icons/flicon-tick-circled.svg" class="ProjectStatus-icon"></fl-svg>
<span class="ProjectStatus-text">Awarded</span>
</div>
<div class="ProjectStatus ProjectStatus--incomplete" ng-switch-when="frozen_timeout">
<fl-svg src="/images/icons/flicon-cross-circled.svg" class="ProjectStatus-icon"></fl-svg>
<span class="ProjectStatus-text">Expired</span>
</div>
<div class="ProjectStatus" ng-switch-default>
<span class="ProjectStatus-text">{{ project.get().sub_status }}</span>
</div>
</ng-switch>
</div>
<div class="ProjectSnapshot-details">
<span class="ProjectSnapshot-budget">
{{ project.get().currency.sign }}{{ (ctrl.selectedBids[project.get().id][0].amount || 0)|number:0 }} {{ project.get().currency.code }}
<span class="ProjectSnapshot-deadline" ng-show="project.getDaysLeft() === 1">Tomorrow</span>
<span class="ProjectSnapshot-deadline" ng-show="project.getDaysLeft() > 1">in {{ project.getDaysLeft() }} days</span>
</span>
<small class="ProjectSnapshot-detail">
<!-- TODO: fl-pluralize -->
Avg Bid: {{ project.get().currency.sign }}{{ (project.get().bid_stats.bid_avg || 0)|number:0 }} {{ project.get().currency.code }} -
<span ng-show="project.get().bid_stats.bid_count === 0">No Bids</span>
<span ng-show="project.get().bid_stats.bid_count === 1">1 Bid</span>
<span ng-show="project.get().bid_stats.bid_count > 1">{{ project.get().bid_stats.bid_count }} Bids</span>
</small>
</div>
</project-item>
<footer class="Card-footer" ng-if="ctrl.hasMoreProjects.freelancer.active" >
<fl-button class="ContentToggle" action="ctrl.loadProjects('active', 'freelancer')" fl-analytics="ShowMoreActiveProjects">
<span class="ContentToggle-inner">
<span class="ContentToggle-text">Show more</span>
<span class="ContentToggle-icon">
<fl-svg src="/images/icons/flicon-arrow-down-circled.svg" class="flicon-arrow-down-circled">
</span>
</span>
</fl-button>
</footer>
</section>
<section class="Card" ng-if="!ctrl.loading && ctrl.projects.freelancer.in_progress.length" fl-analytics-subsection="WIPProjects">
<header class="Card-header">
<h2 class="Card-title">Current Work</h2>
</header>
<project-item ng-repeat="project in ctrl.projects.freelancer.in_progress" project="project">
<div class="ProjectSnapshot-awarded">
<img class="ProjectSnapshot-avatar profile-img profile-img--xsmall"
src="{{ ctrl.users[project.get().owner_id].avatar_cdn }}"
alt="{{ ctrl.users[project.get().owner_id].username }}" />
<span>Awarded by {{ ctrl.users[project.get().owner_id].username }}</span>
</div>
<div class="ProjectSnapshot-details">
<span class="ProjectSnapshot-budget">
{{ project.get().currency.sign }}{{ (ctrl.selectedBids[project.get().id][0].amount || 0)|number:0 }} {{ project.get().currency.code }}
<span ng-show="project.isHourlyProject()"> / hour </span>
<span ng-if="!project.isHourlyProject()" class="ProjectSnapshot-deadline">
<span ng-if="ctrl.getDeadline(project).secondsLeft">
- {{ ctrl.getDeadline(project).secondsLeft | timeAgoFilter }} ago
</span>
<span ng-if="ctrl.getDeadline(project).secondsMore">
in {{ ctrl.getDeadline(project).secondsMore | timeAgoFilter }}
</span>
</span>
</span>
</div>
</project-item>
<footer class="Card-footer" ng-if="ctrl.hasMoreProjects.freelancer.in_progress">
<fl-button class="ContentToggle" action="ctrl.loadProjects('in_progress', 'freelancer')" fl-analytics="ShowMoreCurrentWork">
<span class="ContentToggle-inner">
<span class="ContentToggle-text">Show more</span>
<span class="ContentToggle-icon">
<fl-svg src="/images/icons/flicon-arrow-down-circled.svg" class="flicon-arrow-down-circled">
</span>
</span>
</fl-button>
</footer>
</section>
<section class="Card" ng-if="!ctrl.loading && ctrl.projects.freelancer.complete.length" fl-analytics-subsection="PastProjects">
<header class="Card-header">
<h2 class="Card-title">Past Completed Work</h2>
</header>
<project-item ng-repeat="project in ctrl.projects.freelancer.complete" project="project">
<div class="ProjectSnapshot-awarded">
<img class="ProjectSnapshot-avatar profile-img profile-img--xsmall"
src="http://extremelifechanger.com/web_images/avatar-sam09-8-251.jpg"
alt="{{ ctrl.users[project.get().owner_id].username }}" />
<span>Awarded by {{ ctrl.users[project.get().owner_id].username }}</span>
</div>
<!-- Closed -->
<div ng-if="project.get().status === 'closed'">
<div class="ProjectStatus ProjectStatus--complete" ng-if="project.get().frontend_project_status === 'complete' && project.get().sub_status !== 'cancel_buyer' && project.get().sub_status !== 'cancel_admin' && project.get().sub_status !== 'closed_expired'">
<fl-svg src="/images/icons/flicon-tick-circled.svg" class="ProjectStatus-icon"></fl-svg>
<span class="ProjectStatus-text">Complete</span>
</div>
<div class="ProjectStatus ProjectStatus--incomplete" ng-if="project.get().sub_status === 'cancel_buyer' || project.get().sub_status === 'cancel_admin'">
<fl-svg src="/images/icons/flicon-cross-circled.svg" class="ProjectStatus-icon"></fl-svg>
<span class="ProjectStatus-text">Cancelled</span>
</div>
<div class="ProjectStatus ProjectStatus--incomplete" ng-if="project.get().sub_status === 'closed_expired'">
<fl-svg src="/images/icons/flicon-cross-circled.svg" class="ProjectStatus-icon"></fl-svg>
<span class="ProjectStatus-text">Closed</span>
</div>
<div class="ProjectStatus" ng-if="project.get().sub_status !== 'closed_awarded' && project.get().sub_status !== 'closed_expired' && project.get().sub_status !== 'cancel_buyer' && project.get().sub_status !== 'cancel_admin'">
<fl-svg src="/images/icons/flicon-cross-circled.svg" class="ProjectStatus-icon"></fl-svg>
<span class="ProjectStatus-text">{{ project.get().sub_status }} </span>
</div>
</div>
<div class="ProjectSnapshot-details">
<span class="ProjectSnapshot-budget">
{{ project.get().currency.sign }}{{ (project.get().bid_stats.bid_avg || 0)|number:0 }} {{ project.get().currency.code }}
</span>
<small class="ProjectSnapshot-detail">
<!-- TODO: fl-pluralize -->
<span ng-show="project.get().bid_stats.bid_count === 0">No Bids</span>
<span ng-show="project.get().bid_stats.bid_count === 1">1 Bid</span>
<span ng-show="project.get().bid_stats.bid_count > 1">{{ project.get().bid_stats.bid_count }} Bids</span>
</small>
</div>
</project-item>
<footer class="Card-footer" ng-if="ctrl.hasMoreProjects.freelancer.complete">
<fl-button class="ContentToggle" action="ctrl.loadProjects('complete', 'freelancer')" fl-analytics="ShowMoreCompletedFreelancerProjects">
<span class="ContentToggle-inner">
<span class="ContentToggle-text">Show more</span>
<span class="ContentToggle-icon">
<fl-svg src="/images/icons/flicon-arrow-down-circled.svg" class="flicon-arrow-down-circled">
</span>
</span>
</fl-button>
</footer>
</section>
</section>
</div>
</section>
</div>
</div>