276 lines
9.1 KiB
CoffeeScript
276 lines
9.1 KiB
CoffeeScript
context = window
|
|
rest = window.JK.Rest()
|
|
logger = context.JK.logger
|
|
|
|
@FindSessionRow = React.createClass({
|
|
|
|
createInstrument: (participant) ->
|
|
|
|
instruments = []
|
|
existingTracks = []
|
|
logger.debug("Find:Finding instruments. Participant tracks:", participant.tracks)
|
|
for track in participant.tracks
|
|
|
|
if existingTracks.indexOf(track.instrument_id) < 0
|
|
existingTracks.push(track.instrument_id)
|
|
inst = context.JK.getInstrumentIcon24(track.instrument_id)
|
|
instruments.push(`<img title={context.JK.getInstrumentId(track.instrument_id)} hoveraction="instrument" data-instrument-id={track.instrument_id} src={inst} width="24" height="24" />`)
|
|
|
|
instruments
|
|
|
|
|
|
createInSessionUser: (participant) ->
|
|
|
|
instruments = @createInstrument(participant)
|
|
id = participant.user.id;
|
|
name = participant.user.name;
|
|
userId = id
|
|
avatar_url = context.JK.resolveAvatarUrl(participant.user.photo_url)
|
|
profile_url = "/client#/profile/" + id
|
|
musician_name = name
|
|
more_link = ''
|
|
|
|
`<tr>
|
|
<td width="24">
|
|
<a user-id={userId} hoveraction="musician" href={profile_url} className="avatar-tiny">
|
|
<img src={avatar_url} />
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<a user-id={userId} hoveraction="musician" href={profile_url}>{musician_name}</a>
|
|
</td>
|
|
<td>
|
|
<div className="instruments nowrap">{instruments}</div>
|
|
</td>
|
|
<td>{more_link} </td>
|
|
</tr>`
|
|
|
|
|
|
createOpenSlot:(slot) ->
|
|
|
|
inst = context.JK.getInstrumentIcon24(slot.instrument_id);
|
|
|
|
proficiency_desc = slot.proficiency_desc
|
|
if !proficiency_desc
|
|
# this is to allow unstructured RSVPs to not specify proficiency_desc
|
|
proficiency_desc = "Any Skill Level"
|
|
|
|
moreLinkHtml = '';
|
|
if isLast
|
|
moreLinkHtml = `<span><a className="slots more">more</a><a className="details-arrow arrow-down-orange"></a></span>`
|
|
|
|
instrument_url = inst
|
|
instrument = slot.description
|
|
proficiency = proficiency_desc
|
|
more_link = moreLinkHtml
|
|
|
|
|
|
`<tr>
|
|
<td width="24">
|
|
<img src="{instrument_url}" />
|
|
</td>
|
|
<td>
|
|
<div className="instruments nowrap">{instrument} ({proficiency})</div>
|
|
</td>
|
|
<td>{more_link} </td>
|
|
</tr>`
|
|
|
|
|
|
createRsvpUser: (user, session, isLast) ->
|
|
instruments = []
|
|
|
|
if user.instrument_list
|
|
for instrument in user.instrument_list
|
|
inst = context.JK.getInstrumentIcon24(instrument.id);
|
|
instruments.push(`<img title={context.JK.getInstrumentId(instrument.id)} hoveraction="instrument" data-instrument-id={instrument.id} key={instrument.id} src={inst} width="24" height="24" />`)
|
|
|
|
moreLinkHtml = '';
|
|
if isLast
|
|
moreLinkHtml = `<span><a class="rsvps more">more</a><a className="details-arrow arrow-down-orange"></a></span>`
|
|
|
|
#instruments = @createInstrument(user)
|
|
id = user.id;
|
|
name = user.name;
|
|
userId = id
|
|
avatar_url = context.JK.resolveAvatarUrl(user.photo_url)
|
|
profile_url = "/client#/profile/" + id
|
|
musician_name = name
|
|
more_link = ''
|
|
|
|
`<tr>
|
|
<td width="24">
|
|
<a user-id={userId} hoveraction="musician" href={profile_url} className="avatar-tiny">
|
|
<img src={avatar_url} />
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<a user-id={userId} hoveraction="musician" href={profile_url}>{musician_name}</a>
|
|
</td>
|
|
<td>
|
|
<div className="instruments nowrap">{instruments}</div>
|
|
</td>
|
|
<td>{more_link} </td>
|
|
</tr>`
|
|
|
|
|
|
|
|
inSessionUsersHtml: (session) ->
|
|
inSessionUsers = []
|
|
|
|
result = []
|
|
console.log("render active", session)
|
|
if session.active_music_session && session.active_music_session.participants && session.active_music_session.participants.length > 0
|
|
for participant in session.active_music_session.participants
|
|
inSessionUsers.push(participant.user.id);
|
|
result.push(@createInSessionUser(participant))
|
|
|
|
return [result, inSessionUsers]
|
|
|
|
|
|
createRsvpUsers:(session) ->
|
|
|
|
firstResults = []
|
|
lastResults = []
|
|
|
|
approvedRsvpCount = session.approved_rsvps.length
|
|
|
|
if session.approved_rsvps
|
|
first = session.approved_rsvps.slice(0, 3)
|
|
last = session.approved_rsvps.slice(3)
|
|
|
|
for approved_rsvp in first
|
|
firstResults.push(@createRsvpUser(approved_rsvp, session, approvedRsvpCount > 3 && i == 2))
|
|
for approved_rsvp in last
|
|
lastResults.push(@createRsvpUser(approved_rsvp, session, false))
|
|
|
|
[firstResults, lastResults]
|
|
|
|
|
|
|
|
createOpenSlots: (session) ->
|
|
|
|
firstResults = []
|
|
remainingResults = []
|
|
|
|
if session['is_unstructured_rsvp?']
|
|
firstResults.push(@createOpenSlot({description: 'Any Instrument'}))
|
|
|
|
if session.open_slots
|
|
openSlotCount = session.open_slots.length
|
|
for openSlot in session.open_slots
|
|
if i < 3
|
|
firstResults.push(@createOpenSlot(openSlot, openSlotCount > 3 && i == 2))
|
|
else
|
|
remainingResults.push(@createOpenSlot(openSlot, false))
|
|
|
|
return [firstResults, remainingResults]
|
|
|
|
showJoinLink: (session, inSessionUsers) ->
|
|
showJoinLink = session.musician_access
|
|
if session.approved_rsvps
|
|
for approved_rsvps in session.approved_rsvps
|
|
# do not show the user in this section if he is already in the session
|
|
if $.inArray(approved_rsvps.id, inSessionUsers) == -1
|
|
if approved_rsvps.id == context.JK.currentUserId
|
|
showJoinLink = true
|
|
else
|
|
showJoinLink = true
|
|
|
|
showJoinLink
|
|
|
|
rsvps: (session, rsvp_musicians_first_3, rsvp_musicians_remaining) ->
|
|
|
|
if session.create_type == 'quick-start' || !rsvp_musicians_first_3 || rsvp_musicians_first_3.length == 0
|
|
return null
|
|
|
|
` <tr>
|
|
<td>RSVPs:</td>
|
|
<td>
|
|
<table className="musicians" cellpadding="0" cellspacing="0" width="100%">
|
|
{rsvp_musicians_first_3}
|
|
</table>
|
|
<div style={{display:'none'}}>
|
|
<table className="musicians" cellpadding="0" cellspacing="0" width="100%">
|
|
{rsvp_musicians_remaining}
|
|
</table>
|
|
</div>
|
|
</td>
|
|
</tr>`
|
|
|
|
render: () ->
|
|
|
|
session = @props.session
|
|
|
|
id = session.id
|
|
name = session.name
|
|
description = session.description || "(No description)"
|
|
genres = '(' + session.genres.join (', ')
|
|
genres += ')'
|
|
[in_session_musicians, inSessionUsers] = @inSessionUsersHtml(session)
|
|
[rsvp_musicians_first_3, rsvp_musicians_remaining] = @createRsvpUsers(session)
|
|
[open_slots_first_3, open_slots_remaining] = @createOpenSlots(session)
|
|
showJoinLink = @showJoinLink(session, inSessionUsers)
|
|
showListenLink = session.fan_access && session.active_music_session && session.active_music_session.mount
|
|
join_link_display_style = {display: "none"}
|
|
listen_link_display_style = {display: "none"}
|
|
if showJoinLink
|
|
join_link_display_style = {display: "block"}
|
|
if showListenLink
|
|
listen_link_display_style = {display: "inline-block"}
|
|
listen_link_text = ''
|
|
|
|
if !session.fan_access
|
|
listen_link_text = ''
|
|
else if session.active_music_session && session.active_music_session.mount
|
|
listen_link_text = 'Listen'
|
|
else
|
|
listen_link_text = '';
|
|
|
|
rsvps = @rsvps(rsvp_musicians_first_3, rsvp_musicians_remaining)
|
|
|
|
`<tr data-session-id={id} className="found-session">
|
|
<td width="40%" className="session-cell">
|
|
<table className="musician-groups" cellpadding="0" cellspacing="0" width="100%">
|
|
<tr>
|
|
<td className="bold"><a className="session-name" href={"/sessions/" + id} rel="external">{name}</a></td>
|
|
<td align="right" width="75" className="session-genre">{genres}</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2" className="session-description">{description}</td>
|
|
</tr>
|
|
</table>
|
|
<div className="spacer"></div>
|
|
</td>
|
|
<td width="45%" className="session-musicians">
|
|
<table className="musicians" cellpadding="0" cellspacing="0">
|
|
<tr>
|
|
<td>In Session:</td>
|
|
<td>
|
|
<table className="musicians" cellpadding="0" cellspacing="0" width="100%">
|
|
{in_session_musicians}
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
{rsvps}
|
|
</table>
|
|
<div className="spacer"></div>
|
|
</td>
|
|
<td width="10%" className="actions">
|
|
<div className="center">
|
|
<a className="listen-link" style={listen_link_display_style}>
|
|
<div className="listen-icon"></div>
|
|
</a>
|
|
<br/>
|
|
<span className="listen-link-details"><span className="listen-link-text">{listen_link_text}</span><a href="#" className="listen-detail-hover">?</a></span>
|
|
</div>
|
|
<div className="center">
|
|
<a className="join-link" style={join_link_display_style}>
|
|
<div className="join-icon"></div>
|
|
</a>
|
|
<span className="join-link-text">Join</span>
|
|
</div>
|
|
<div className="spacer"></div>
|
|
|
|
</td>
|
|
</tr>`
|
|
}) |