VRFS-3359 : Teacher pricing
Display or hide fields depending on checkboxes.
This commit is contained in:
Steven Miers
parent
005ee8aabd
commit
8ce313f5c7
|
|
@ -16,7 +16,7 @@ SessionActions = @SessionActions
|
|||
|
||||
render: () ->
|
||||
console.log("SetupNav: this.props", this.state, this.ref, this.props.handleNav)
|
||||
`<div className="TeacherSetupNav">
|
||||
`<div className="TeacherSetupNav right">
|
||||
<a className="nav-button button-grey" onClick={this.navBack}>
|
||||
BACK
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -10,14 +10,35 @@ rest = window.JK.Rest()
|
|||
Reflux.listenTo(TeacherStore, "onTeacherStateChanged")
|
||||
]
|
||||
|
||||
componentDidUnmount: () ->
|
||||
@root.off("change", ".checkbox-enabler")
|
||||
|
||||
componentDidMount: () ->
|
||||
@root = jQuery(this.getDOMNode())
|
||||
@root.off("change", ".checkbox-enabler").on("change", ".checkbox-enabler", @enableCheckBoxTargets)
|
||||
@enableCheckBoxTargets()
|
||||
|
||||
getInitialState: () ->
|
||||
{}
|
||||
|
||||
enableCheckBoxTargets: (e) ->
|
||||
# Do unchecked boxes last since any unchecked target has priority:
|
||||
checkBoxes = $("input[type='checkbox'].checkbox-enabler:checked", @root)
|
||||
checkBoxes = $.merge(checkBoxes, $("input[type='checkbox'].checkbox-enabler:not(:checked)", @root))
|
||||
checkBoxes.each ->
|
||||
targetClass = $(this).data("enable-target")
|
||||
|
||||
if ($(this).is(":checked"))
|
||||
logger.debug("Enabling", targetClass, $(this).is(":checked"), $(".#{targetClass}"))
|
||||
$(".#{targetClass}").removeClass("hidden")
|
||||
else
|
||||
logger.debug("Disabling", targetClass, $(this).is(":checked"), $(".#{targetClass}"))
|
||||
$(".#{targetClass}").addClass("hidden")
|
||||
|
||||
screenName: () ->
|
||||
"pricing"
|
||||
|
||||
onTeacherStateChanged: (changes) ->
|
||||
$root = jQuery(this.getDOMNode())
|
||||
logger.debug("onTeacherPricingStateChanged", changes, changes.errors?, changes.errors)
|
||||
unless this.handleErrors(changes)
|
||||
teacher = changes.teacher
|
||||
|
|
@ -31,12 +52,11 @@ rest = window.JK.Rest()
|
|||
})
|
||||
|
||||
captureFormState: (changes) ->
|
||||
$root = jQuery(this.getDOMNode())
|
||||
this.setState({
|
||||
biography: $root.find(".teacher-biography").val(),
|
||||
introductory_video: $root.find(".teacher-introductory-video").val(),
|
||||
years_teaching: $root.find(".years-teaching-experience").val(),
|
||||
years_playing: $root.find(".years-playing-experience").val()
|
||||
biography: @root.find(".teacher-biography").val(),
|
||||
introductory_video: @root.find(".teacher-introductory-video").val(),
|
||||
years_teaching: @root.find(".years-teaching-experience").val(),
|
||||
years_playing: @root.find(".years-playing-experience").val()
|
||||
});
|
||||
logger.debug("capturedFormState", this.state, changes)
|
||||
|
||||
|
|
@ -61,18 +81,77 @@ rest = window.JK.Rest()
|
|||
|
||||
render: () ->
|
||||
logger.debug("RENDERING TeacherSetupPricing", this.props, this.state)
|
||||
instrumentsTaughtCheckboxes = []
|
||||
priceRows = []
|
||||
for minutes in [30, 45, 60, 90, 120]
|
||||
logger.debug("RENDERING THIS", minutes)
|
||||
priceRows.push `
|
||||
<div className="teacher-price-row">
|
||||
<div className="teacher-half-column left pricing-options">
|
||||
<div className="teacher-field" name={"lesson_duration_"+minutes}>
|
||||
<input type='checkbox' className="checkbox-enabler" data-enable-target={"lesson-"+minutes+"-target"} name={"lesson_duration_"+minutes+"_input"} defaultChecked={this.state["lesson_duration_"+minutes]}/>
|
||||
<label htmlFor={"lesson_duration_"+minutes+"_input"} className="checkbox-label">{minutes} Minutes</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="teacher-half-column right pricing-amounts">
|
||||
<div className={"teacher-field lesson-"+minutes+"-target"} name={"price_duration_"+minutes+"_cents"}>
|
||||
<div className="teacher-third-column inline">
|
||||
<label>{minutes} Minutes</label>
|
||||
</div>
|
||||
<div className="teacher-third-column inline per-lesson">
|
||||
<input name="price-duration-{minutes}-cents" className="per-lesson-target" type="number" min="0" max="100000" value={this.state["lesson_duration_"+minutes]} onChange={this.captureFormState} value="0" />
|
||||
</div>
|
||||
<div className="teacher-third-column inline per-month">
|
||||
<input name="price-duration-{minutes}-cents-month" className="per-month-target" type="number" min="0" max="100000" value={this.state["price_duration_"+minutes]} onChange={this.captureFormState} value="0" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br className="clearall"/>
|
||||
</div>`
|
||||
|
||||
#instrumentsTaughtCheckboxes.push(`<input />`)
|
||||
|
||||
`<div className="TeacherSetupPricing TeacherSetupComponent" >
|
||||
<div className="teacher-quarter-column left">
|
||||
<div className="teacher-field" name="instruments_taught">
|
||||
<label for="teacher-instruments-taught">Instruments Taught:</label>
|
||||
<div className="checkbox-scroller">
|
||||
</div>
|
||||
<div className="teacher-half-column left pricing-options">
|
||||
<label className="margined">Offer Lessons Pricing & Payments:</label>
|
||||
|
||||
<div className="teacher-field" name="prices_per_lesson">
|
||||
<input type='checkbox' className='checkbox-enabler' data-enable-target="per-lesson-target" name="prices_per_lesson_input" defaultChecked={this.state.prices_per_lesson}></input>
|
||||
<label htmlFor='prices_per_lesson_input' className="checkbox-label">Per Lesson</label>
|
||||
</div>
|
||||
|
||||
<div className="teacher-field" name="prices_per_month">
|
||||
<input type='checkbox' className='checkbox-enabler' data-enable-target="per-month-target" name="prices_per_month_input" defaultChecked={this.state.prices_per_month}></input>
|
||||
<label htmlFor='prices_per_month_input' className="checkbox-label">Per Month</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<TeacherSetupNav handleNav={this.handleNav}/>
|
||||
|
||||
<div className="teacher-half-column right pricing-options">
|
||||
<label className="margined">Please fill in the prices (in US Dollars) for the lessons you have chosen to offer in the boxes below:</label>
|
||||
</div>
|
||||
<br className="clearall"/>
|
||||
|
||||
<div className="teacher-price-row">
|
||||
<div className="teacher-half-column left pricing-options">
|
||||
<label className="margined">Offer Lessons of These Durations:</label>
|
||||
</div>
|
||||
<div className="teacher-half-column right pricing-options">
|
||||
<div className="teacher-third-column"> </div>
|
||||
<div className="teacher-third-column">
|
||||
<label className="margined">Price Per Lesson</label>
|
||||
</div>
|
||||
<div className="teacher-third-column">
|
||||
<label className="margined">Price Per Month</label>
|
||||
</div>
|
||||
</div>
|
||||
<br className="clearall"/>
|
||||
</div>
|
||||
|
||||
{priceRows}
|
||||
|
||||
<br className="clearall"/>
|
||||
<TeacherSetupNav handleNav={this.handleNav}></TeacherSetupNav>
|
||||
</div>`
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -22,6 +22,16 @@
|
|||
}
|
||||
}
|
||||
|
||||
label.margined {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
|
||||
.inline {
|
||||
display: inline;
|
||||
//width: auto !important;
|
||||
}
|
||||
|
||||
.teacher-setup-form {
|
||||
padding: 1em;
|
||||
.error-text {
|
||||
|
|
@ -41,6 +51,10 @@
|
|||
@extend .w25;
|
||||
}
|
||||
|
||||
.teacher-half-column {
|
||||
@extend .w50;
|
||||
}
|
||||
|
||||
.teacher-third-column {
|
||||
@include border_box_sizing;
|
||||
width: 33%;
|
||||
|
|
@ -67,8 +81,9 @@
|
|||
|
||||
}
|
||||
|
||||
|
||||
.teacher-field {
|
||||
padding: 1em;
|
||||
padding: 0.25em;
|
||||
@include border_box_sizing;
|
||||
input, select, textarea {
|
||||
@include border_box_sizing;
|
||||
|
|
@ -79,19 +94,6 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: auto;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
border-radius: 4px;
|
||||
|
||||
|
|
@ -100,6 +102,30 @@
|
|||
height: 24px;
|
||||
//padding: 5px;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
display: inline;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
label.checkbox-label {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: auto;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
#teacher-setup-pricing.screen.secondary layout="screen" layout-id="teachers/setup/pricing"
|
||||
#teacher-setup-pricing.teacher-setup.screen.secondary layout="screen" layout-id="teachers/setup/pricing"
|
||||
.content-head
|
||||
.content-icon
|
||||
= image_tag "content/icon_bands.png", :size => "19x19"
|
||||
|
|
|
|||
Loading…
Reference in New Issue