VRFS-3359 : Initial react components.
This commit is contained in:
Steven Miers
parent
d76899be54
commit
176f2b9e2f
|
|
@ -263,10 +263,9 @@ ChannelGroupIds = context.JK.ChannelGroupIds
|
|||
# All the JamTracks
|
||||
mediaTracks.push(`<SessionJamTrackCategory key="JamTrackCategory" jamTrackName={this.state.jamTrackName} mixers={this.state.mediaCategoryMixer} mode={MIX_MODES.PERSONAL} />`)
|
||||
|
||||
# this is not ready yet until VRFS-3363 is done
|
||||
#if @state.metronome?
|
||||
# @state.metronome.mode = MIX_MODES.PERSONAL
|
||||
# mediaTracks.push(`<SessionMetronome key="JamTrackMetronome" {...this.state.metronome} />`)
|
||||
if @state.metronome?
|
||||
@state.metronome.mode = MIX_MODES.PERSONAL
|
||||
mediaTracks.push(`<SessionMetronome key="JamTrackMetronome" {...this.state.metronome} location="jam-track" />`)
|
||||
|
||||
for jamTrack in @state.jamTracks
|
||||
jamTrack.mode = MIX_MODES.PERSONAL
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@ MIX_MODES = context.JK.MIX_MODES
|
|||
"session-track" : true
|
||||
"metronome" : true
|
||||
"no-mixer" : @props.mode == MIX_MODES.MASTER # show it as disabled if in master mode
|
||||
"in-jam-track" : @props.location == 'jam-track'
|
||||
})
|
||||
|
||||
pan = if mixers.mixer? then mixers.mixer?.pan else 0
|
||||
|
|
|
|||
|
|
@ -0,0 +1,99 @@
|
|||
context = window
|
||||
teacherActions = window.JK.Actions.Teacher
|
||||
logger = context.JK.logger
|
||||
rest = window.JK.Rest()
|
||||
|
||||
@TeacherProfile = React.createClass({
|
||||
mixins: [
|
||||
@TeacherMixin,
|
||||
Reflux.listenTo(@AppStore,"onAppInit"),
|
||||
Reflux.listenTo(TeacherStore, "onTeacherStateChanged")
|
||||
]
|
||||
|
||||
setTeacherError: () ->
|
||||
|
||||
|
||||
getInitialState: () ->
|
||||
{}
|
||||
|
||||
beforeShow: (data) ->
|
||||
logger.debug("TeacherProfile beforeShow", data, data.d)
|
||||
|
||||
|
||||
if data? && data.d?
|
||||
@teacherId = data.d
|
||||
teacherActions.load.trigger({teacher_id: @teacherId})
|
||||
else
|
||||
teacherActions.load.trigger({})
|
||||
|
||||
onTeacherStateChanged: (changes) ->
|
||||
$root = jQuery(this.getDOMNode())
|
||||
logger.debug("onTeacherStateChanged", changes, changes.errors?, changes.errors)
|
||||
$(".error-text", $root).remove()
|
||||
$(".input-error", $root).removeClass("input-error")
|
||||
if changes.errors?
|
||||
for k,v of changes.errors
|
||||
logger.debug("error", k, v)
|
||||
teacherField = $root.find(".teacher-field[name='#{k}']")
|
||||
teacherField.append("<div class='error-text'>#{v.join()}</div>")
|
||||
$("input", teacherField).addClass("input-error")
|
||||
#$(".error-text", teacherField).show()
|
||||
|
||||
else
|
||||
teacher = changes.teacher
|
||||
logger.debug("@teacher", teacher)
|
||||
this.setState({
|
||||
biography: teacher.biography,
|
||||
introductory_video: teacher.introductory_video,
|
||||
years_teaching: teacher.years_teaching,
|
||||
years_playing: teacher.years_playing,
|
||||
validate_introduction: true
|
||||
})
|
||||
|
||||
|
||||
|
||||
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()
|
||||
});
|
||||
logger.debug("capturedFormState", this.state, changes)
|
||||
|
||||
handleSave: (e) ->
|
||||
logger.debug("HANDLESAVE: ", this.state, this, e)
|
||||
teacherActions.change.trigger(this.state)
|
||||
|
||||
render: () ->
|
||||
logger.debug("RENDERING", this.props, this.state)
|
||||
`<div className="TeacherSetupComponent" >
|
||||
<div className="teacher-big-column left">
|
||||
<div className="teacher-field" name="biography">
|
||||
<label for="teacher-biography">Teacher Bio:</label>
|
||||
<textarea className="teacher-biography" rows="12" value={this.state.biography} onChange={this.captureFormState} required/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="teacher-small-column left">
|
||||
<div className="teacher-field" name="introductory_video">
|
||||
<label for="teacher-introductory-video">Teacher Introductory Video:</label>
|
||||
<input className="teacher-introductory-video youtube-video" type="url" maxLength="1024" value={this.state.introductory_video} onChange={this.captureFormState} required/>
|
||||
<em>(enter YouTube URL)</em>
|
||||
</div>
|
||||
|
||||
<div className="teacher-field" name="years_teaching">
|
||||
<label for="years-teaching-experience">Years Teaching Experience:</label>
|
||||
<input className="years-teaching-experience" type="number" min="0" max="99" value={this.state.years_teaching} onChange={this.captureFormState} placeholder="Select" />
|
||||
</div>
|
||||
|
||||
<div className="teacher-field" name="years_playing">
|
||||
<label for="teacher-playing-experience">Years Playing Experience:</label>
|
||||
<input className="years-playing-experience" type="number" min="0" max="99" value={this.state.years_playing} onChange={this.captureFormState} placeholder="Select" />
|
||||
</div>
|
||||
</div>
|
||||
<TeacherSetupNav handleSave={this.handleSave}/>
|
||||
</div>
|
||||
`
|
||||
|
||||
})
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
context = window
|
||||
teacherActions = window.JK.Actions.Teacher
|
||||
logger = context.JK.logger
|
||||
rest = window.JK.Rest()
|
||||
|
||||
@TeacherSetupBasics = React.createClass({
|
||||
mixins: [
|
||||
@TeacherMixin,
|
||||
Reflux.listenTo(@AppStore,"onAppInit"),
|
||||
Reflux.listenTo(TeacherStore, "onTeacherStateChanged")
|
||||
]
|
||||
|
||||
setTeacherError: () ->
|
||||
|
||||
|
||||
getInitialState: () ->
|
||||
{}
|
||||
|
||||
onTeacherStateChanged: (changes) ->
|
||||
$root = jQuery(this.getDOMNode())
|
||||
logger.debug("onTeacherStateChanged", changes, changes.errors?, changes.errors)
|
||||
$(".error-text", $root).remove()
|
||||
$(".input-error", $root).removeClass("input-error")
|
||||
if changes.errors?
|
||||
for k,v of changes.errors
|
||||
logger.debug("error", k, v)
|
||||
teacherField = $root.find(".teacher-field[name='#{k}']")
|
||||
teacherField.append("<div class='error-text'>#{v.join()}</div>")
|
||||
$("input", teacherField).addClass("input-error")
|
||||
else
|
||||
teacher = changes.teacher
|
||||
logger.debug("@teacher", teacher)
|
||||
this.setState({
|
||||
biography: teacher.biography,
|
||||
introductory_video: teacher.introductory_video,
|
||||
years_teaching: teacher.years_teaching,
|
||||
years_playing: teacher.years_playing,
|
||||
validate_introduction: true
|
||||
})
|
||||
|
||||
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()
|
||||
});
|
||||
logger.debug("capturedFormState", this.state, changes)
|
||||
|
||||
handleSave: (e) ->
|
||||
logger.debug("HANDLESAVE: ", this.state, this, e)
|
||||
teacherActions.change.trigger(this.state)
|
||||
|
||||
render: () ->
|
||||
logger.debug("RENDERING", this.props, this.state)
|
||||
`<div className="TeacherSetupComponent" >
|
||||
<div className="teacher-big-column left">
|
||||
<div className="teacher-field" name="biography">
|
||||
<label for="teacher-biography">Teacher Bio:</label>
|
||||
<textarea className="teacher-biography" rows="12" value={this.state.biography} onChange={this.captureFormState} required/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="teacher-small-column left">
|
||||
<div className="teacher-field" name="introductory_video">
|
||||
<label for="teacher-introductory-video">Teacher Introductory Video:</label>
|
||||
<input className="teacher-introductory-video youtube-video" type="url" maxLength="1024" value={this.state.introductory_video} onChange={this.captureFormState} required/>
|
||||
<em>(enter YouTube URL)</em>
|
||||
</div>
|
||||
|
||||
<div className="teacher-field" name="years_teaching">
|
||||
<label for="years-teaching-experience">Years Teaching Experience:</label>
|
||||
<input className="years-teaching-experience" type="number" min="0" max="99" value={this.state.years_teaching} onChange={this.captureFormState} placeholder="Select" />
|
||||
</div>
|
||||
|
||||
<div className="teacher-field" name="years_playing">
|
||||
<label for="teacher-playing-experience">Years Playing Experience:</label>
|
||||
<input className="years-playing-experience" type="number" min="0" max="99" value={this.state.years_playing} onChange={this.captureFormState} placeholder="Select" />
|
||||
</div>
|
||||
</div>
|
||||
<TeacherSetupNav handleSave={this.handleSave}/>
|
||||
</div>
|
||||
`
|
||||
|
||||
})
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
context = window
|
||||
SessionActions = @SessionActions
|
||||
|
||||
@TeacherSetupNav = React.createClass({
|
||||
|
||||
navPrevious: (e) ->
|
||||
e.preventDefault();
|
||||
|
||||
|
||||
navNext: (e) ->
|
||||
e.preventDefault()
|
||||
console.log("navNext this.props", this.state, this.props)
|
||||
this.props.handleSave()
|
||||
|
||||
render: () ->
|
||||
console.log("SetupNav: this.props", this.state, this.props, this.props.handleSave)
|
||||
`<div className="TeacherSetupNav">
|
||||
<a className="nav-button button-grey" onClick={this.navPrevious}>
|
||||
BACK
|
||||
</a>
|
||||
<a className="nav-button button-orange" onClick={this.navNext}>
|
||||
NEXT
|
||||
</a>
|
||||
</div>`
|
||||
})
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
context = window
|
||||
|
||||
@TeacherActions = Reflux.createActions({
|
||||
load: {},
|
||||
change: {}
|
||||
})
|
||||
|
||||
context.JK.Actions.Teacher = TeacherActions
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
context = window
|
||||
teacherActions = window.JK.Actions.Teacher
|
||||
|
||||
@TeacherMixin = {
|
||||
onAppInit: (app) ->
|
||||
logger.debug("TeacherProfile onAppInit", app, document.referrer)
|
||||
screenBindings = {
|
||||
'beforeShow': @beforeShow
|
||||
}
|
||||
|
||||
app.bindScreen('teachers/setup/introduction', screenBindings)
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
$ = jQuery
|
||||
context = window
|
||||
logger = context.JK.logger
|
||||
rest = context.JK.Rest()
|
||||
EVENTS = context.JK.EVENTS
|
||||
|
||||
|
||||
TeacherActions = @TeacherActions
|
||||
|
||||
@TeacherStore = Reflux.createStore(
|
||||
{
|
||||
listenables: TeacherActions
|
||||
teacher: null
|
||||
|
||||
init: ->
|
||||
# Register with the app store to get @app
|
||||
this.listenTo(context.AppStore, this.onAppInit)
|
||||
this.listenTo(context.TeacherActions.load, this.onLoadTeacher)
|
||||
this.listenTo(context.TeacherActions.change, this.onSaveTeacher)
|
||||
|
||||
|
||||
onAppInit: (app) ->
|
||||
@app = app
|
||||
|
||||
onLoadTeacher: (options) ->
|
||||
logger.debug("onLoadTeacher", options)
|
||||
if !options?
|
||||
throw new Error('@teacher must be specified')
|
||||
|
||||
rest.getTeacher(options)
|
||||
.done((savedTeacher) =>
|
||||
logger.debug("LOADING TEACHER",savedTeacher)
|
||||
this.trigger({teacher: savedTeacher}))
|
||||
.fail((jqXHR, textStatus, errorMessage) =>
|
||||
logger.debug("FAILED",jqXHR, textStatus, errorMessage)
|
||||
if (jqXHR.status==404)
|
||||
this.trigger({teacher: {}})
|
||||
else
|
||||
context.JK.app.ajaxError(jqXHR, textStatus, errorMessage)
|
||||
)
|
||||
|
||||
onSaveTeacher: (teacher) ->
|
||||
logger.debug("onSaveTeacher", teacher)
|
||||
rest.updateTeacher(teacher)
|
||||
.done((savedTeacher) =>
|
||||
logger.debug("SAVED TEACHER",savedTeacher)
|
||||
this.trigger({teacher: savedTeacher}))
|
||||
.fail((jqXHR, textStatus, errorMessage) =>
|
||||
logger.debug("FAILED",jqXHR, textStatus, errorMessage)
|
||||
#errors = JSON.parse(jqXHR.responseText)
|
||||
|
||||
if (jqXHR.status==422)
|
||||
logger.debug("FAILED422",jqXHR.responseJSON.errors)
|
||||
this.trigger({errors: jqXHR.responseJSON.errors})
|
||||
else
|
||||
context.JK.app.ajaxError(jqXHR, textStatus, errorMessage)
|
||||
)
|
||||
}
|
||||
)
|
||||
Loading…
Reference in New Issue