From 90fee4987e5eb3440416568e5d011a7d3e55a929 Mon Sep 17 00:00:00 2001 From: Ben Ramey Date: Tue, 24 Jun 2014 21:54:03 -0500 Subject: [PATCH] Factor our run form template --- assets/linker/js/app.coffee | 2 +- assets/linker/templates/run/_form.jade | 78 +++++++++++++++++++++++ assets/linker/templates/run/create.jade | 79 +---------------------- assets/linker/templates/run/edit.jade | 83 +------------------------ 4 files changed, 83 insertions(+), 159 deletions(-) create mode 100644 assets/linker/templates/run/_form.jade diff --git a/assets/linker/js/app.coffee b/assets/linker/js/app.coffee index aa4b06c..c14ba51 100644 --- a/assets/linker/js/app.coffee +++ b/assets/linker/js/app.coffee @@ -16,7 +16,7 @@ lunchApp.config ['$routeProvider', .when '/run/:id', templateUrl: 'templates/run/show.html', controller: 'RunCtrl' - .when '/run/:id', + .when '/run/:id/edit', templateUrl: 'templates/run/edit.html', controller: 'EditRunCtrl' .when '/order/:inviteeId', diff --git a/assets/linker/templates/run/_form.jade b/assets/linker/templates/run/_form.jade new file mode 100644 index 0000000..8fd40b1 --- /dev/null +++ b/assets/linker/templates/run/_form.jade @@ -0,0 +1,78 @@ +.col-xs-12.col-sm-6 + section.name.row + .col-xs-12.col-lg-2.step-num + span.glyphicon.glyphicon-info-sign(title='Lunch Run Info') + .col-xs-12.col-lg-10 + .form-group(ng-class="{'has-error has-feedback': form.Name.$dirty && form.Name.$invalid, 'has-success has-feedback': form.Name.$dirty && form.Name.$valid}") + input#name.form-control.input-lg(type='text',ng-model='run.name',required,placeholder='Name your run',name='Name') + div(ng-show='form.Name.$dirty && form.Name.$invalid') + span.glyphicon.glyphicon-remove.form-control-feedback + span(ng-show='form.Name.$error.required') What should we call you lunch run? + span.glyphicon.glyphicon-ok.form-control-feedback(ng-show="form.Name.$dirty && form.Name.$valid") + + section.row + .col-xs-12.col-lg-2.step-num + span.glyphicon.glyphicon-user(title='Your Info') + .col-xs-12.col-lg-10 + .form-group(ng-class="{'has-error has-feedback': form.CreatorName.$dirty && form.CreatorName.$invalid, 'has-success has-feedback': form.CreatorName.$dirty && form.CreatorName.$valid}") + input#creatorName.form-control.input-lg(type='text',ng-model='run.creatorName',required,placeholder='Your name',name='CreatorName') + div(ng-show="form.CreatorName.$dirty && form.CreatorName.$invalid") + span.glyphicon.glyphicon-remove.form-control-feedback + span(ng-show='form.CreatorName.$error.required') What's your name? + span.glyphicon.glyphicon-ok.form-control-feedback(ng-show='form.CreatorName.$dirty && form.CreatorName.$valid') + + .form-group(ng-class="{'has-error has-feedback': form.Email.$dirty && form.Email.$invalid, 'has-success has-feedback': form.Email.$dirty && form.Email.$valid}") + input#creatorEmail.form-control.input-lg(type='email',ng-model='run.creatorEmail',required,placeholder='Your email',name='Email') + div(ng-show='form.Email.$dirty && form.Email.$invalid') + span.glyphicon.glyphicon-remove.form-control-feedback + span(ng-show='form.Email.$error.required') What's your email address? + span(ng-show='form.Email.$error.email') That doesn't look like a valid email address. + span.glyphicon.glyphicon-ok.form-control-feedback(ng-show='form.Email.$dirty && form.Email.$valid') + + section.row + .col-xs-12.col-lg-2.step-num + span.glyphicon.glyphicon-map-marker(title='Lunch Location') + .col-xs-12.col-lg-10 + .form-group(ng-class="{'has-error has-feedback': form.Restaurant.$dirty && form.Restaurant.$invalid, 'has-success has-feedback': form.Restaurant.$dirty && form.Restaurant.$valid}") + input#restaurant.form-control.input-lg(type='text',ng-model='run.restaurant',placeholder='Restaurant',name='Restaurant',required) + div(ng-show="form.Restaurant.$dirty && form.Restaurant.$invalid") + span.glyphicon.glyphicon-remove.form-control-feedback + span(ng-show='form.Restaurant.$error.required') Where are you going to eat? + span.glyphicon.glyphicon-ok.form-control-feedback(ng-show='form.Restaurant.$dirty && form.Restaurant.$valid') + + .form-group + input#menuUrl.form-control.input-lg(type='url',ng-model='run.menuUrl',placeholder='Menu URL') + +.col-xs-12.col-sm-6 + section.invitees.row + .col-xs-12.col-lg-2.step-num + span.glyphicon.glyphicon-list(title='Lunch Invitees') + .col-xs-12.col-lg-10 + .invitee.clearfix(ng-repeat='i in invitees') + ng-form(name='inviteeForm') + .row + .col-xs-10.name-wrapper + .form-group(ng-class="{'has-error has-feedback': inviteeForm.Name.$dirty && inviteeForm.Name.$invalid, 'has-success has-feedback': inviteeForm.Name.$dirty && inviteeForm.Name.$valid}") + input.form-control.input-lg(ng-model='i.name',required,placeholder='Name',name="Name") + div(ng-show='inviteeForm.Name.$dirty && inviteeForm.Name.$invalid') + span.glyphicon.glyphicon-remove.form-control-feedback + span(ng-show='inviteeForm.Name.$error.required') Give this person a name + span.glyphicon.glyphicon-ok.form-control-feedback(ng-show='inviteeForm.Name.$dirty && inviteeForm.Name.$valid') + + .col-xs-2.deletebtn-wrapper + button.btn.btn-block.btn-lg.btn-warning(ng-click='removeInvitee($index)') + span.glyphicon.glyphicon-remove + + .col-xs-10.email-wrapper + .form-group(ng-class="{'has-error has-feedback': inviteeForm.Email.$dirty && inviteeForm.Email.$invalid, 'has-success has-feedback': inviteeForm.Email.$dirty && inviteeForm.Email.$valid}") + input.form-control.input-lg(type='email',ng-model='i.email',required,placeholder='Email',name="Email") + div(ng-show='inviteeForm.Email.$dirty && inviteeForm.Email.$invalid') + span.glyphicon.glyphicon-remove.form-control-feedback + span(ng-show='inviteeForm.Email.$error.required') What's this person's email address? + span(ng-show='inviteeForm.Email.$error.email') That doesn't look like a valid email address. + span.glyphicon.glyphicon-ok.form-control-feedback(ng-show='inviteeForm.Email.$dirty && inviteeForm.Email.$valid') + + button.btn.btn-default.btn-lg.btn-block(ng-click='addInvitee()') + span.glyphicon.glyphicon-plus + |  Invite another! + diff --git a/assets/linker/templates/run/create.jade b/assets/linker/templates/run/create.jade index 675f6ea..cb0ec68 100644 --- a/assets/linker/templates/run/create.jade +++ b/assets/linker/templates/run/create.jade @@ -7,84 +7,7 @@ block pagetitle block interiorcontent .create-run-form(ng-controller='CreateRunCtrl') form.row(name='form',novalidate,role='form') - .col-xs-12.col-sm-6 - section.name.row - .col-xs-12.col-lg-2.step-num - span.glyphicon.glyphicon-info-sign(title='Lunch Run Info') - .col-xs-12.col-lg-10 - .form-group(ng-class="{'has-error has-feedback': form.Name.$dirty && form.Name.$invalid, 'has-success has-feedback': form.Name.$dirty && form.Name.$valid}") - input#name.form-control.input-lg(type='text',ng-model='run.name',required,placeholder='Name your run',name='Name') - div(ng-show='form.Name.$dirty && form.Name.$invalid') - span.glyphicon.glyphicon-remove.form-control-feedback - span(ng-show='form.Name.$error.required') What should we call you lunch run? - span.glyphicon.glyphicon-ok.form-control-feedback(ng-show="form.Name.$dirty && form.Name.$valid") - - section.row - .col-xs-12.col-lg-2.step-num - span.glyphicon.glyphicon-user(title='Your Info') - .col-xs-12.col-lg-10 - .form-group(ng-class="{'has-error has-feedback': form.CreatorName.$dirty && form.CreatorName.$invalid, 'has-success has-feedback': form.CreatorName.$dirty && form.CreatorName.$valid}") - input#creatorName.form-control.input-lg(type='text',ng-model='run.creatorName',required,placeholder='Your name',name='CreatorName') - div(ng-show="form.CreatorName.$dirty && form.CreatorName.$invalid") - span.glyphicon.glyphicon-remove.form-control-feedback - span(ng-show='form.CreatorName.$error.required') What's your name? - span.glyphicon.glyphicon-ok.form-control-feedback(ng-show='form.CreatorName.$dirty && form.CreatorName.$valid') - - .form-group(ng-class="{'has-error has-feedback': form.Email.$dirty && form.Email.$invalid, 'has-success has-feedback': form.Email.$dirty && form.Email.$valid}") - input#creatorEmail.form-control.input-lg(type='email',ng-model='run.creatorEmail',required,placeholder='Your email',name='Email') - div(ng-show='form.Email.$dirty && form.Email.$invalid') - span.glyphicon.glyphicon-remove.form-control-feedback - span(ng-show='form.Email.$error.required') What's your email address? - span(ng-show='form.Email.$error.email') That doesn't look like a valid email address. - span.glyphicon.glyphicon-ok.form-control-feedback(ng-show='form.Email.$dirty && form.Email.$valid') - - section.row - .col-xs-12.col-lg-2.step-num - span.glyphicon.glyphicon-map-marker(title='Lunch Location') - .col-xs-12.col-lg-10 - .form-group(ng-class="{'has-error has-feedback': form.Restaurant.$dirty && form.Restaurant.$invalid, 'has-success has-feedback': form.Restaurant.$dirty && form.Restaurant.$valid}") - input#restaurant.form-control.input-lg(type='text',ng-model='run.restaurant',placeholder='Restaurant',name='Restaurant',required) - div(ng-show="form.Restaurant.$dirty && form.Restaurant.$invalid") - span.glyphicon.glyphicon-remove.form-control-feedback - span(ng-show='form.Restaurant.$error.required') Where are you going to eat? - span.glyphicon.glyphicon-ok.form-control-feedback(ng-show='form.Restaurant.$dirty && form.Restaurant.$valid') - - .form-group - input#menuUrl.form-control.input-lg(type='url',ng-model='run.menuUrl',placeholder='Menu URL') - - .col-xs-12.col-sm-6 - section.invitees.row - .col-xs-12.col-lg-2.step-num - span.glyphicon.glyphicon-list(title='Lunch Invitees') - .col-xs-12.col-lg-10 - .invitee.clearfix(ng-repeat='i in invitees') - ng-form(name='inviteeForm') - .row - .col-xs-10.name-wrapper - .form-group(ng-class="{'has-error has-feedback': inviteeForm.Name.$dirty && inviteeForm.Name.$invalid, 'has-success has-feedback': inviteeForm.Name.$dirty && inviteeForm.Name.$valid}") - input.form-control.input-lg(ng-model='i.name',required,placeholder='Name',name="Name") - div(ng-show='inviteeForm.Name.$dirty && inviteeForm.Name.$invalid') - span.glyphicon.glyphicon-remove.form-control-feedback - span(ng-show='inviteeForm.Name.$error.required') Give this person a name - span.glyphicon.glyphicon-ok.form-control-feedback(ng-show='inviteeForm.Name.$dirty && inviteeForm.Name.$valid') - - .col-xs-2.deletebtn-wrapper - button.btn.btn-block.btn-lg.btn-warning(ng-click='removeInvitee($index)') - span.glyphicon.glyphicon-remove - - .col-xs-10.email-wrapper - .form-group(ng-class="{'has-error has-feedback': inviteeForm.Email.$dirty && inviteeForm.Email.$invalid, 'has-success has-feedback': inviteeForm.Email.$dirty && inviteeForm.Email.$valid}") - input.form-control.input-lg(type='email',ng-model='i.email',required,placeholder='Email',name="Email") - div(ng-show='inviteeForm.Email.$dirty && inviteeForm.Email.$invalid') - span.glyphicon.glyphicon-remove.form-control-feedback - span(ng-show='inviteeForm.Email.$error.required') What's this person's email address? - span(ng-show='inviteeForm.Email.$error.email') That doesn't look like a valid email address. - span.glyphicon.glyphicon-ok.form-control-feedback(ng-show='inviteeForm.Email.$dirty && inviteeForm.Email.$valid') - - button.btn.btn-default.btn-lg.btn-block(ng-click='addInvitee()') - span.glyphicon.glyphicon-plus - |  Invite another! - + include _form section.submit button.btn.btn-lg.btn-success.btn-block(ng-click="create(run,invitees)",ng-disabled="form.$invalid") | Create diff --git a/assets/linker/templates/run/edit.jade b/assets/linker/templates/run/edit.jade index 675f6ea..0150423 100644 --- a/assets/linker/templates/run/edit.jade +++ b/assets/linker/templates/run/edit.jade @@ -2,89 +2,12 @@ extends ../layouts/interior-page block pagetitle span.glyphicon.glyphicon-chevron-right.title-icon - | start a new lunch run + | update your lunch run block interiorcontent .create-run-form(ng-controller='CreateRunCtrl') form.row(name='form',novalidate,role='form') - .col-xs-12.col-sm-6 - section.name.row - .col-xs-12.col-lg-2.step-num - span.glyphicon.glyphicon-info-sign(title='Lunch Run Info') - .col-xs-12.col-lg-10 - .form-group(ng-class="{'has-error has-feedback': form.Name.$dirty && form.Name.$invalid, 'has-success has-feedback': form.Name.$dirty && form.Name.$valid}") - input#name.form-control.input-lg(type='text',ng-model='run.name',required,placeholder='Name your run',name='Name') - div(ng-show='form.Name.$dirty && form.Name.$invalid') - span.glyphicon.glyphicon-remove.form-control-feedback - span(ng-show='form.Name.$error.required') What should we call you lunch run? - span.glyphicon.glyphicon-ok.form-control-feedback(ng-show="form.Name.$dirty && form.Name.$valid") - - section.row - .col-xs-12.col-lg-2.step-num - span.glyphicon.glyphicon-user(title='Your Info') - .col-xs-12.col-lg-10 - .form-group(ng-class="{'has-error has-feedback': form.CreatorName.$dirty && form.CreatorName.$invalid, 'has-success has-feedback': form.CreatorName.$dirty && form.CreatorName.$valid}") - input#creatorName.form-control.input-lg(type='text',ng-model='run.creatorName',required,placeholder='Your name',name='CreatorName') - div(ng-show="form.CreatorName.$dirty && form.CreatorName.$invalid") - span.glyphicon.glyphicon-remove.form-control-feedback - span(ng-show='form.CreatorName.$error.required') What's your name? - span.glyphicon.glyphicon-ok.form-control-feedback(ng-show='form.CreatorName.$dirty && form.CreatorName.$valid') - - .form-group(ng-class="{'has-error has-feedback': form.Email.$dirty && form.Email.$invalid, 'has-success has-feedback': form.Email.$dirty && form.Email.$valid}") - input#creatorEmail.form-control.input-lg(type='email',ng-model='run.creatorEmail',required,placeholder='Your email',name='Email') - div(ng-show='form.Email.$dirty && form.Email.$invalid') - span.glyphicon.glyphicon-remove.form-control-feedback - span(ng-show='form.Email.$error.required') What's your email address? - span(ng-show='form.Email.$error.email') That doesn't look like a valid email address. - span.glyphicon.glyphicon-ok.form-control-feedback(ng-show='form.Email.$dirty && form.Email.$valid') - - section.row - .col-xs-12.col-lg-2.step-num - span.glyphicon.glyphicon-map-marker(title='Lunch Location') - .col-xs-12.col-lg-10 - .form-group(ng-class="{'has-error has-feedback': form.Restaurant.$dirty && form.Restaurant.$invalid, 'has-success has-feedback': form.Restaurant.$dirty && form.Restaurant.$valid}") - input#restaurant.form-control.input-lg(type='text',ng-model='run.restaurant',placeholder='Restaurant',name='Restaurant',required) - div(ng-show="form.Restaurant.$dirty && form.Restaurant.$invalid") - span.glyphicon.glyphicon-remove.form-control-feedback - span(ng-show='form.Restaurant.$error.required') Where are you going to eat? - span.glyphicon.glyphicon-ok.form-control-feedback(ng-show='form.Restaurant.$dirty && form.Restaurant.$valid') - - .form-group - input#menuUrl.form-control.input-lg(type='url',ng-model='run.menuUrl',placeholder='Menu URL') - - .col-xs-12.col-sm-6 - section.invitees.row - .col-xs-12.col-lg-2.step-num - span.glyphicon.glyphicon-list(title='Lunch Invitees') - .col-xs-12.col-lg-10 - .invitee.clearfix(ng-repeat='i in invitees') - ng-form(name='inviteeForm') - .row - .col-xs-10.name-wrapper - .form-group(ng-class="{'has-error has-feedback': inviteeForm.Name.$dirty && inviteeForm.Name.$invalid, 'has-success has-feedback': inviteeForm.Name.$dirty && inviteeForm.Name.$valid}") - input.form-control.input-lg(ng-model='i.name',required,placeholder='Name',name="Name") - div(ng-show='inviteeForm.Name.$dirty && inviteeForm.Name.$invalid') - span.glyphicon.glyphicon-remove.form-control-feedback - span(ng-show='inviteeForm.Name.$error.required') Give this person a name - span.glyphicon.glyphicon-ok.form-control-feedback(ng-show='inviteeForm.Name.$dirty && inviteeForm.Name.$valid') - - .col-xs-2.deletebtn-wrapper - button.btn.btn-block.btn-lg.btn-warning(ng-click='removeInvitee($index)') - span.glyphicon.glyphicon-remove - - .col-xs-10.email-wrapper - .form-group(ng-class="{'has-error has-feedback': inviteeForm.Email.$dirty && inviteeForm.Email.$invalid, 'has-success has-feedback': inviteeForm.Email.$dirty && inviteeForm.Email.$valid}") - input.form-control.input-lg(type='email',ng-model='i.email',required,placeholder='Email',name="Email") - div(ng-show='inviteeForm.Email.$dirty && inviteeForm.Email.$invalid') - span.glyphicon.glyphicon-remove.form-control-feedback - span(ng-show='inviteeForm.Email.$error.required') What's this person's email address? - span(ng-show='inviteeForm.Email.$error.email') That doesn't look like a valid email address. - span.glyphicon.glyphicon-ok.form-control-feedback(ng-show='inviteeForm.Email.$dirty && inviteeForm.Email.$valid') - - button.btn.btn-default.btn-lg.btn-block(ng-click='addInvitee()') - span.glyphicon.glyphicon-plus - |  Invite another! - + include _form section.submit button.btn.btn-lg.btn-success.btn-block(ng-click="create(run,invitees)",ng-disabled="form.$invalid") - | Create + | Update