gaf-mobile
Version:
GAF mobile Web site
209 lines (194 loc) • 14.5 kB
HTML
<div class="post-project scroll-container" fl-analytics-section="PostProject">
<!-- PAGE VIEW -->
<header class="PageHeader">
<div class="section-inner">
<h1 ng-if="ctrl.skill" ng-cloak class="PageHeader-title">Find {{ ctrl.skill.plural_phrase_worker }}</h1>
<span ng-if="!ctrl.skill">
<h1 ng-if="!ctrl.isRepost" class="PageHeader-title">Post Your Project (it's free!)</h1>
<h1 ng-if="ctrl.isRepost" class="PageHeader-title">Hire freelancers for a fraction of the cost</h1>
</span>
</div>
</header>
<!-- Project details form -->
<section class="section-inner" ng-if="ctrl.state === 'start'">
<button class="btn btn-text post-project-help" ng-click="ctrl.modal.show = true" fl-analytics="ToggleModal" fl-analytics-label="ShowPostProjectHelp">
<span class="icon-help"> </span> Not sure how it works?
</button>
<fl-form name="projectform" class="form" action="ctrl.create(ctrl.project)">
<fieldset ng-if="!ctrl.isRepost">
<!-- Category select -->
<label class="post-project-label" for="category">Select a Project Category</label>
<select id="category" name="category" required ng-model="ctrl.project.category" ng-change="ctrl.project.bundle = null; ctrl.setLocalOption(ctrl.project.category)" ng-options="cat.name for cat in ctrl.categoriesWithBundles.getList() track by cat.id" fl-analytics="ChangedCategory" fl-analytics-value="ctrl.project.category.id">
<option value="">Select a project category...</option>
<option value="other">Other...</option>
</select>
<div ng-if="projectform.$submitted || projectform.category.$touched" ng-messages="projectform.category.$error">
<span class="validation validation-error" ng-message="required">
<span class="icon-notification"> </span>
Please select a category
</span>
</div>
<!-- Sub-Category select -->
<div ng-if="ctrl.project.category && ctrl.project.category.id !== 'OTHER'">
<select id="bundle" name="bundle" required ng-model="ctrl.project.bundle" ng-options="bundle.name for bundle in ctrl.project.category.job_bundles track by bundle.id" ng-change="ctrl.setBundle(ctrl.jobList, ctrl.project.bundle)" fl-analytics="ChangedBundle" fl-analytics-value="ctrl.project.bundle.id">
<option value="">Select a job...</option>
</select>
<div ng-if="projectform.$submitted || projectform.bundle.$touched" ng-messages="projectform.bundle.$error">
<span class="validation validation-error" ng-message="required">
<span class="icon-notification"> </span>
Please select a job
</span>
</div>
</div>
</fieldset>
<fieldset>
<!-- Project title input -->
<label class="post-project-label">Project name:</label>
<input type="text" placeholder="What do you need done?" name="title" required ng-minlength="4" ng-maxlength="150" ng-model="ctrl.project.title" fl-analytics="ChangedTitle">
<div ng-if="projectform.$submitted || projectform.title.$touched" ng-messages="projectform.title.$error">
<span class="validation validation-error" ng-message="required">
<span class="icon-notification"> </span>
Please enter a title for your project
</span>
<span class="validation validation-error" ng-message="minlength">
<span class="icon-notification"> </span>
Your project title must be at least 4 characters
</span>
<span class="validation validation-error" ng-message="maxlength">
<span class="icon-notification"> </span>
Your project title must be at most 150 characters
</span>
</div>
<!-- Skills select -->
<div ng-if="ctrl.isRepost || ctrl.project.category.id === 'OTHER' || ctrl.project.bundle.id === 'OTHER'">
<label>Enter some skills that relate to the project:</label>
<fl-selectbox name="jobs" placeholder="eg. graphic design, excel, HTML..." ng-model="ctrl.project.jobs" options="ctrl.jobs" label="name" required max="5" fl-analytics="ChangedSkills"></fl-selectbox>
<div ng-if="projectform.$submitted || projectform.jobs.$touched" ng-messages="projectform.jobs.$error">
<span class="validation validation-error" ng-message="required">
<span class="icon-notification"> </span>
Please enter at least one skill
</span>
<span class="validation validation-error" ng-message="maxlength">
<span class="icon-notification"> </span>
Please select a maximum of 5 skills
</span>
</div>
</div>
<!-- Project description textarea -->
<label class="post-project-label">Project details:</label>
<textarea name="description" placeholder="Describe what you need done in a few sentences..." required ng-minlength="10" ng-model="ctrl.project.description" fl-autoresize fl-analytics="ChangedDescription"></textarea>
<div ng-if="projectform.$submitted || projectform.description.$touched" ng-messages="projectform.description.$error">
<span class="validation validation-error" ng-message="required">
<span class="icon-notification"> </span>
Please enter a description for your project
</span>
<span class="validation validation-error" ng-message="minlength">
<span class="icon-notification"> </span>
Your description must be at least 10 characters
</span>
</div>
<aside ng-if="!skill" class="post-project-tip">
<span class="icon-info"> </span>
The more detail you provide, the more accurate the bids you'll receive.
</aside>
<aside ng-if="skill" class="post-project-tip">
<span class="icon-info"> </span>
The more detail you provide, the more accurate the quotes you'll receive.
</aside>
</fieldset>
<fieldset>
<label class="post-project-label">What budget do you have in mind?</label>
<div class="post-project-budgetWrapper">
<span class="post-project-budgetContainer">
<!-- Currency select -->
<select class="inline-input post-project-budgetSelect" name="currency" required ng-model="ctrl.project.currency" ng-options="c.code for c in ctrl.currencies | orderBy:'code' track by c.id" ng-change="ctrl.updateBudget(ctrl.budgetList, ctrl.project.currency)" fl-analytics="ChangedCurrency" fl-analytics-value="ctrl.project.currency.id"></select>
</span>
<span class="post-project-budgetContainer">
<!-- Budget select -->
<select class="inline-input post-project-budgetSelect" name="budget" required ng-model="ctrl.project.budget" ng-options="ctrl.formatBudget(b, ctrl.project.currency) for b in ctrl.budgets['fixed'] | filter:{currency_id: ctrl.project.currency.id}:true track by b.id" fl-analytics="ChangedBudget"></select>
</span>
</div>
</fieldset>
<fieldset>
<label class="post-project-label">Where would you like this project done?</label>
<select class="inline-input post-project-jobType" name="local" required
ng-model="ctrl.project.local"
ng-options="value as label for (label, value) in {'Online': false, 'At a specific location': true}"
ng-change="ctrl.project.local && ctrl.getLocation()">
<option value="">Select...</option>
</select>
<div ng-if="projectform.$submitted || projectform.local.$touched" ng-messages="projectform.local.$error">
<span class="validation validation-error" ng-message="required">
<span class="icon-notification"> </span>
Please select where do you like this project to be done.
</span>
</div>
<div class="summary-block summary-block-full-width summary-block-location" ng-if="ctrl.project.local">
<span ng-show="ctrl.isFetchingLocation()" class="summary-block-content">Fetching your location...</span>
<span ng-show="!ctrl.isFetchingLocation()" class="summary-block-content editable-text has-icon needsfocus"
name="location"
contenteditable="true"
fl-contenteditable required
fl-invalid-if="!ctrl.project.place || !ctrl.locationValid()"
g-places-autocomplete
ng-model="ctrl.project.place">
</span>
</div>
<span class="validation validation-error" ng-if="ctrl.project.local && ctrl.error.locationError && ctrl.project.place === undefined && !ctrl.locationValid()">
<span class="icon-notification"> </span>
We were unable to fetch your location. Please enter it manually.
</span>
<span class="validation validation-error" ng-if="!ctrl.error.locationError && ctrl.project.local && !ctrl.isFetchingLocation() && ctrl.project.place === undefined">
<span class="icon-notification"> </span>
You need to enter a location for a local project.
</span>
<span class="validation validation-error" ng-if="ctrl.project.local && !ctrl.isFetchingLocation() && ctrl.project.place !== undefined && !ctrl.locationValid()">
<span class="icon-notification"></span>
The location you entered is not valid. Please select a valid location for your local project.
</span>
</fieldset>
<span class="validation validation-error" ng-if="ctrl.error.unverifiedPayment">
<span class="icon-notification"> </span>
You need to <a href="https://www.freelancer.com/payments/verify.php" fl-gaf-link target="_blank" fl-analytics="GoToVerifyPayment">verify your payment source</a> before posting another project.
</span>
<span class="validation validation-error" ng-if="ctrl.error.negativeBalance">
<span class="icon-notification"> </span>
You have a negative balance. Please <a href="/deposit" fl-analytics="GoToMakeDeposit">add funds to your account</a> before posting a project.
</span>
<span class="validation validation-error" ng-if="ctrl.error.internalError">
<span class="icon-notification"> </span>
An internal error occurred: {{ ctrl.error.internalError }}
</span>
<fl-button type="submit" class="btn btn-primary post-project-button" ng-if="!ctrl.skill" fl-analytics="PostProject" fl-analytics-label="PostProject">Post Project</fl-button>
<fl-button type="submit" class="btn btn-primary post-project-button" ng-if="ctrl.skill" fl-analytics="GoToPostProject" fl-analytics-label="FreeQuotes">Get Free Quotes</fl-button>
</fl-form>
</section>
<!-- PAGE VIEW -->
<!-- Display on loading -->
<section class="post-project-loading section-inner" ng-if="ctrl.state === 'loading'">
<div class="loadingicon">Loading...</div>
</section>
<!-- View Modals -->
<aside class="modal post-project-process" ng-if="ctrl.modal.show" fl-analytics-subsection="HelpModal">
<div class="modal-inner">
<div class="section-inner" ng-click="ctrl.modal.show=false" fl-analytics="ToggleModal" fl-analytics-label="HidePostProjectHelp">
<h2 class="post-project-process-title">How the process works</h2>
<ol class="post-project-steps">
<li class="post-project-steps-item">
<span class="post-project-step-icon icon-post-project-step-01"> </span>
1. Tell Freelancers what you need
</li>
<li class="post-project-steps-item">
<span class="post-project-step-icon icon-post-project-step-02"> </span>
2. Freelancers contact you
</li>
<li class="post-project-steps-item">
<span class="post-project-step-icon icon-post-project-step-03"> </span>
3. You choose the best Freelancer
</li>
</ol>
<button class="btn-close modal-close-button" title="Close" ng-click="ctrl.modal.show=false || $event.stopPropagation()" fl-analytics="ToggleModal" fl-analytics-label="HidePostProjectHelp"><span class="icon-circled-plus"> </span></button>
</div>
</div>
</aside>
</div>