272 lines
9.0 KiB
CoffeeScript
272 lines
9.0 KiB
CoffeeScript
|
context = window
|
||
|
|
rest = window.JK.Rest()
|
||
|
|
logger = context.JK.logger
|
||
|
|
|
||
|
|
@FindSessionRow = React.createClass({
|
||
|
|
|
||
|
|
createInstrument: (participant) ->
|
||
|
|
|
||
|
|
instruments = []
|
||
|
|
existingTracks = []
|
||
|
|
for j in [0 .. participant.tracks.length]
|
||
|
|
|
||
|
|
track = participant.tracks[j]
|
||
|
|
|
||
|
|
if existingTracks.indexOf(track.instrument_id) < 0
|
||
|
|
existingTracks.push(track.instrument_id)
|
||
|
|
logger.debug("Find:Finding instruments. Participant tracks:", participant.tracks)
|
||
|
|
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) ->
|
||
|
|
|
||
|
|
|
||
|
|
` <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) ->
|
||
|
|
instrumentLogoHtml = []
|
||
|
|
|
||
|
|
if user.instrument_list
|
||
|
|
for j in [0 .. user.instrument_list.length]
|
||
|
|
instrument = user.instrument_list[j];
|
||
|
|
inst = context.JK.getInstrumentIcon24(instrument.id);
|
||
|
|
instrumentLogoHtml.push(`<img title={context.JK.getInstrumentId(instrument.id)} hoveraction="instrument" data-instrument-id={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 = 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>`
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
inSessionUsersHtml: (session) ->
|
||
|
|
inSessionUsers = []
|
||
|
|
|
||
|
|
result = []
|
||
|
|
if session.active_music_session && "participants" in session.active_music_session && session.active_music_session.participants.length > 0
|
||
|
|
for i in [0 .. session.active_music_session.participants.length]
|
||
|
|
participant = session.active_music_session.participants[i]
|
||
|
|
inSessionUsers.push(participant.user.id);
|
||
|
|
result.push(@createInSessionUser(participant))
|
||
|
|
|
||
|
|
return [result, inSessionUsers]
|
||
|
|
|
||
|
|
|
||
|
|
createRsvpUsers:( ) ->
|
||
|
|
|
||
|
|
session = @props.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 i in [0..first]
|
||
|
|
user = first[i]
|
||
|
|
firstResults.push(@createRsvpUser(user, session, approvedRsvpCount > 3 && i == 2))
|
||
|
|
for i in [0..last]
|
||
|
|
user = last[i]
|
||
|
|
lastResults.push(@createRsvpUser(user, session, false))
|
||
|
|
|
||
|
|
[firstResults, lastResults]
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
createOpenSlots: () ->
|
||
|
|
session = @prop.session
|
||
|
|
|
||
|
|
firstResults = []
|
||
|
|
remainingResults = []
|
||
|
|
|
||
|
|
if session['is_unstructured_rsvp?']
|
||
|
|
firstResults.push(@createOpenSlot({description: 'Any Instrument'}))
|
||
|
|
|
||
|
|
if session.open_slots
|
||
|
|
openSlotCount = session.open_slots.length
|
||
|
|
for i in [0 .. openSlotCount]
|
||
|
|
openSlot = session.open_slots[i]
|
||
|
|
if i < 3
|
||
|
|
firstResults.push(@createOpenSlot(session.open_slots[i], openSlotCount > 3 && i == 2))
|
||
|
|
else
|
||
|
|
remainingResults.push(@createOpenSlot(session.open_slots[i], false))
|
||
|
|
|
||
|
|
return [firstResults, remainingResults]
|
||
|
|
|
||
|
|
showJoinLinks: (inSessionUsers) ->
|
||
|
|
session = @prop.session
|
||
|
|
showJoinLink = session.musician_access
|
||
|
|
if session.approved_rsvps
|
||
|
|
approvedRsvpCount = session.approved_rsvps.length
|
||
|
|
for i in [0 .. approvedRsvpCount]
|
||
|
|
# do not show the user in this section if he is already in the session
|
||
|
|
if $.inArray(session.approved_rsvps[i].id, inSessionUsers) == -1
|
||
|
|
if session.approved_rsvps[i].id == context.JK.currentUserId
|
||
|
|
showJoinLink = true
|
||
|
|
else
|
||
|
|
showJoinLink = true
|
||
|
|
|
||
|
|
showJoinLink
|
||
|
|
|
||
|
|
|
||
|
|
render: () ->
|
||
|
|
|
||
|
|
session = @props.session
|
||
|
|
|
||
|
|
id = session.id
|
||
|
|
name = session.name
|
||
|
|
description = session.description || "(No description)"
|
||
|
|
genres = '(' + session.genres.join (', ') + ')'
|
||
|
|
[in_session_musicians, inSessionUsers] = @inSessionUsersHtml()
|
||
|
|
[rsvp_musicians_first_3, rsvp_musicians_remaining] = @createRsvpUsers()
|
||
|
|
[open_slots_first_3, open_slots_remaining] = @createOpenSlots()
|
||
|
|
showJoinLink = @showJoinLink(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 = '';
|
||
|
|
|
||
|
|
|
||
|
|
`<tr data-session-id={id} className="found-session">
|
||
|
|
<td width="30%">
|
||
|
|
<table className="musician-groups" cellpadding="0" cellspacing="0" width="100%">
|
||
|
|
<tr>
|
||
|
|
<td className="bold"><a href={"/sessions/" + id} rel="external">{name}</a></td>
|
||
|
|
<td align="right" width="75">{genres}</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td colspan="2">{description}</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</td>
|
||
|
|
<td width="35%">
|
||
|
|
<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>
|
||
|
|
<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>
|
||
|
|
<tr>
|
||
|
|
<td>Still Needed:</td>
|
||
|
|
<td>
|
||
|
|
<table className="musicians" cellpadding="0" cellspacing="0">
|
||
|
|
{open_slots_first_3}
|
||
|
|
</table>
|
||
|
|
<div style="display:none">
|
||
|
|
<table className="musicians" cellpadding="0" cellspacing="0">
|
||
|
|
{open_slots_remaining}
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</td>
|
||
|
|
<td width="30%" className="latency">
|
||
|
|
<div className="center">
|
||
|
|
<a className="listen-link" style="display:{listen_link_display_style};">
|
||
|
|
<img className="listen-icon" />
|
||
|
|
</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="display:{join_link_display_style};">
|
||
|
|
<img className="join-icon" />
|
||
|
|
</a>
|
||
|
|
<span className="join-link-text">Join</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</td>
|
||
|
|
</tr>`
|
||
|
|
})
|