UNPKG

gaf-mobile

Version:

GAF mobile Web site

209 lines (194 loc) 14.5 kB
<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>