Refactor markup into partials. Switch to use partials for some unit tests.

This commit is contained in:
Jonathon Wilson 2012-11-23 10:20:13 -07:00
parent d0154c502b
commit e0ee12d09a
20 changed files with 646 additions and 628 deletions

View File

@ -0,0 +1,97 @@
<!-- Account Summary Dialog -->
<div layout="dialog" layout-id="account" class="dialog">
<h1>Account Settings</h1>
<div class="panel">
<h2>Identity</h2>
<div id="identity-summary"></div>
<a layout-link="account-identity">Update</a>
</div>
<div class="panel">
<h2>Profile</h2>
<div id="profile-summary"></div>
<a layout-link="account-profile">Update</a>
</div>
<div class="buttonrow">
<a layout-action="close" class="button1">Close</a>
</div>
</div>
<script type="text/template" id="template-identity-summary">
<p>Username: {email}</p>
<p>Change Password Here</p>
</script>
<!-- Account Identity Update Form -->
<div layout="dialog" layout-id="account-identity" class="dialog">
<form id="account-identity-form">
<fieldset>
<legend>Identity</legend>
<div class="formrow">
<label>Email
<input name="email" type="text"/>
</label>
</div>
<div class="formrow">
<label>Password
<input name="password" type="password"/>
</label>
<p class="tip">Leave blank to leave unchanged</p>
</div>
<div class="formrow">
<label>Confirm Password
<input name="password_confirmation" type="password"/>
</label>
</div>
<div class="buttonrow">
<button layout-action="close">Cancel</button>
<input type="submit" value"Update"/>
</div>
</fieldset>
</form>
</div>
<!-- Account Profile Update Form -->
<div layout="dialog" layout-id="account-profile" class="dialog">
<form id="account-profile-form">
<fieldset>
<legend>Profile</legend>
<div class="formrow">
<label>Name
<input type="text" name="name"/>
</label>
</div>
<div class="formrow">
<label>Profile Picture
<p>TO DO</p>
</label>
</div>
<div class="formrow">
<div id="added-profile-instruments"></div>
<div id="profile-instruments-controls">
<label>Instruments
<input id="profile-instruments" type="text"/>
</label>
<p class="tip">Limit of 5</p>
</div>
</div>
<div class="buttonrow">
<button layout-action="close">Cancel</button>
<input type="submit" value"Update"/>
</div>
</fieldset>
</form>
</div>
<script type="text/template" id="template-profile-instrument">
<div class="profile-instrument" instrument-id="{instrumentId}">
<div class="instrument">{instrumentName} <span>X</span></div>
<div class="proficiency">
<select>
<option value="1">Beginner</option>
<option selected="selected" value="2">Intermediate</option>
<option value="3">Advanced</option>
<option value="4">Expert</option>
</select>
</div>
</div>
</script>

View File

@ -0,0 +1,6 @@
<!-- Bands Screen -->
<div layout="screen" layout-id="bands" class="screen secondary">
<h1>Bands</h1>
<p>TODO</p>
<p layout-link="home">Home</p>
</div>

View File

@ -0,0 +1,251 @@
<!-- Create Session Screen -->
<div layout="screen" layout-id="createSession" class="screen secondary">
<div class="breadcrumb">
<p layout-link="home">Home &gt; </p>
<p class="current">Create Session</p>
</div>
<form id="create-session-form">
<div class="body">
<fieldset class="unstyled">
<legend>Unstyled and Lots of things omitted</legend>
<!--
<div class="formrow">
<label>Band
<select>
<option>Not a band session</option>
<option>The Killers</option>
<option>J&amp;J AdHoc Electronica Duo</option>
</select>
</label>
</div>
<div class="formrow">
<label>Fan Access
<label>
<input type="radio" name="fan_access"/>
Public
</label>
<label>
<input type="radio" name="fan_access"/>
Private
</label>
</label>
</div>
<div class="formrow">
<label>Fan Chat
<label>
<input type="radio" name="fan_chat"/>
Yes
</label>
<label>
<input type="radio" name="fan_chat"/>
No
</label>
</label>
</div>
-->
<div class="formrow">
<fieldset>Musician Access
<label>By request/approval
<input type="radio" value="false" name="musician_access"/>
</label>
<label>Open
<input type="radio" value="true" checked="checked" name="musician_access"/>
</label>
</fieldset>
</div>
<div class="formrow">
<label>Genres
<select multiple="multiple" name="genres">
</select>
</label>
<input type="text" class="hidden"/>
</div>
<div class="formrow">
<label>Tracks (TODO! - hardcoded in form handler)
</label>
</div>
<div class="formrow">
<label>Session Description</label>
<textarea name="description"></textarea>
</div>
<div class="formrow">
<div id="added-invitations"></div>
<div id="invitation-controls">
<label>Musician Invitations
<input id="invitations" type="text"/>
</label>
</div>
</div>
<!--
<div class="formrow">
<label>Fan Invitations
<label>
<input type="checkbox"/>
Post link to this session for fans on
</label>
<a href="#">Facebook</a>
<a href="#">Twitter</a>
<a href="#">Google+</a>
</label>
<p><a href="#">
Upgrade your Studio subscription to let more fans listen
</a></p>
</div>
<div class="formrow">
<label>Legal Terms
<input type="checkbox"/>
I agree that intellectual property ownership of any musical works created during this session shall be governed by the terms of the Creative Commons CC BY-NC-SA license in accordance with the JamKazam Terms of Service.
</label>
</div>
-->
</fieldset>
</div>
<div class="footer">
<input type="submit" id="btn-create-session" value="Create Session"/>
<button layout-link="home">Cancel</button>
</div>
</form>
</div>
<!-- Added Invitation Template -->
<script type="text/template" id="template-added-invitation">
<div class="invitation" user-id="{userId}">{userName} <span>X</span></div>
</script>
<!-- Genre option template -->
<script type="text/template" id="template-genre-option">
<option value="{value}">{label}</option>
</script>
<!-- Create Session:Audio Screen -->
<!-- Keeping as this will move into a user settings dialog... -->
<div layout="screen" layout-id="createSessionAudio" class="screen secondary">
<div class="breadcrumb">
<p layout-link="home">Home &gt; </p>
<p class="current">Create a Session (3/3): Audio</p>
</div>
<form>
<p>Configure your instruments, headphones or speakers, and voice chat settings. Then play your instrument and sing or speak into your microphone, and ensure you hear everything correctly before entering the session.</p>
<fieldset>
<legend>Audio Settings</legend>
<fieldset>
<legend>Instrument 1</legend>
<label>
Sound Card
<select>
<option>Internal Intel Audio</option>
<option>Tascam US-800</option>
</select>
</label>
<label>
Driver
<select>
<option>These will be tied to the sound card</option>
</select>
</label>
<label>
Input
<select>
<option>Input 1</option>
<option>Input 2</option>
<option>Input 3</option>
<option>Input 4</option>
<option>Input 5</option>
<option>Input 6</option>
</select>
</label>
<label>
Instrument
<select>
<optgroup label="High Popular">
<option>Acoustic Guitar</option>
<option>Bass Guitar</option>
<option>Computer</option>
<option>Drums</option>
<option>Electric Guitar</option>
<option>Keyboard</option>
<option>Voice</option>
</optgroup>
<optgroup label="Mid Popular">
<option>Flute</option>
<option>Clarinet</option>
<option>Saxophone</option>
<option>Trumpet</option>
<option>Violin</option>
<option>Trombone</option>
<option>Banjo</option>
<option>Harmonica</option>
<option>Accordian</option>
</optgroup>
<optgroup label="Low Popular">
<option>French Horn</option>
<option>Euphonium</option>
<option>Tuba</option>
<option>Oboe</option>
<option>Ukulele</option>
<option>Cello</option>
<option>Viola</option>
<option>Mandolin</option>
</optgroup>
</select>
</label>
<label>Other <input type="text"/></label>
<label>Gain Slider goes here</label>
<label>VU Meter goes here</label>
</fieldset>
</fieldset>
<fieldset>
<legend>Headphone/Speaker Settings</legend>
<label>
Sound Card
<select>
<option>Internal Intel Audio</option>
<option>Tascam US-800</option>
</select>
</label>
<label>
Driver
<select>
<option>These will be tied to the sound card</option>
</select>
</label>
<label>
Output
<select>
<option>Output 1</option>
<option>Output 2</option>
<option>Output 3</option>
<option>Output 4</option>
<option>Output 5</option>
<option>Output 6</option>
</select>
</label>
</fieldset>
<fieldset>
<legend>Voice Chat Settings</legend>
<label>
Sound Card
<select>
<option>Internal Intel Audio</option>
<option>Tascam US-800</option>
</select>
</label>
<label>Gain Slider goes here</label>
<label>VU Meter goes here</label>
</fieldset>
<div class="footer">
<button layout-link="createSessionInvite">Back</button>
<button layout-link="session">Jam</button>
<button layout-link="home">Cancel</button>
</div>
</form>
</div>

View File

@ -0,0 +1,22 @@
<!-- Find Session Screen -->
<div layout="screen" layout-id="findSession" class="screen secondary">
<h1>Find a Session</h1>
<p layout-link="home">Home</p>
<table>
<tr>
<th>Members</th>
<th>Name</th>
<th>Delete</th>
</tr>
<tbody id="findSession-tableBody">
</tbody>
</table>
</div>
<script type="text/template" id="template-findSession-row">
<tr>
<td>{participants}</td>
<td><a href="#/session/{id}">{description}</a></td>
<td><a action="delete" action-id="{id}">X</a></td>
</tr>
</script>

View File

@ -0,0 +1,11 @@
<div class="footer">
<p class="left">
Copyright &copy; 2012 JamKazam, Inc. All Rights Reserved.
</p>
<p class="right">
<a href="/#/contact">contact</a> |
<a href="/#/terms">terms fo use</a> |
<a href="/#/privacy">privacy</a>
</p>
</div>

View File

@ -0,0 +1,41 @@
<div layout="header" class="header" style="display:none;">
<h1>Jamkazam</h1>
<div class="search">
<input type="text" class="searchtextinput" placeholder="Search for Bands, Musicians and Fans"/>
</div>
<script type="text/template" id="template-search-section">
<h2>{section}</h2>
<ul>
{items}
</ul>
</script>
<script type="text/template" id="template-search-noresults">
<h2 class="emptyresult">No Matches</h2>
<p>No results returned</p>
</script>
<script type="text/template" id="template-search-item">
<li>
<a>
<img src="{image}"/>
<span class="text">{first_name} {last_name}</span>
<span class="subtext">{subtext}</span>
</a>
</li>
</script>
<div class="userinfo">
<!-- gravatar_for current_user, size: 52, hclass: "avatar medium" -->
<div class="username">
<h2>TODO Name</h2>
<%= image_tag "down_arrow.png", :class=> "profile-toggle" %>
<ul>
<li><a layout-link="account">Profile</a></li>
<li><%= link_to "Sign out", signout_path, method: "delete" %></li>
</ul>
</div>
</div>
</div>

View File

@ -0,0 +1,26 @@
<div layout="screen" layout-id="home" class="screen">
<!-- Grid is the count of the smallest spaces, then
individual spells span those spaces -->
<div layout-grid="2x4" class="grid">
<div layout-grid-position="0,0" layout-grid-rows="1" layout-grid-columns="2"
layout-link="createSession" class="homecard createsession">
<h2>Create Session</h2>
</div>
<div layout-grid-position="2,0" layout-grid-rows="1" layout-grid-columns="2"
layout-link="findSession" class="homecard findsession">
<h2>Find Session</h2>
</div>
<div layout-grid-position="0,1" layout-grid-rows="1" layout-grid-columns="1"
layout-link="bands" class="homecard bands">
<h2>Bands</h2>
</div>
<div layout-grid-position="1,1" layout-grid-rows="1" layout-grid-columns="2"
layout-link="recordings" class="homecard recordings">
<h2>Recordings</h2>
</div>
<div layout-grid-position="3,1" layout-grid-rows="1" layout-grid-columns="1"
layout-link="practice" class="homecard practice">
<h2>Practice</h2>
</div>
</div>
</div>

View File

@ -0,0 +1,7 @@
<!-- Shown to users who are not logged in -->
<div layout="landing" class="landing" style="display:none;">
<h1>Welcome to JamKazam!</h1>
<p>This is a landing page for users who haven't registered or signed-in. Marketing text to convince you how great it would be to use the service goes here.</p>
<p>No account? <a href="signup">Register!</a></p>
<p>or <a href="/signin">Sign In</a></p>
</div>

View File

@ -0,0 +1,6 @@
<div layout="notify" class="notify">
<h1>Notification Popup</h1>
<a layout-action="close">Close</a>
<p></p>
<div></div>
</div>

View File

@ -0,0 +1,6 @@
<!-- Practice Screen -->
<div layout="screen" layout-id="practice" class="screen secondary">
<h1>Practice</h1>
<p>TODO</p>
<p layout-link="home">Home</p>
</div>

View File

@ -0,0 +1,6 @@
<!-- Recordings Screen -->
<div layout="screen" layout-id="recordings" class="screen secondary">
<h1>Recordings</h1>
<p>TODO</p>
<p layout-link="home">Home</p>
</div>

View File

@ -0,0 +1,31 @@
<!-- Actual Session Screen -->
<div layout="screen" layout-id="session" layout-arg="id" class="screen secondary">
<div class="breadcrumb">
<p layout-link="home">Home &gt; </p>
<p class="current">Session</p>
</div>
<div id="session-contents">
<div id="session-info"></div>
<div id="session-tracks"></div>
</div>
</div>
<script type="text/template" id="template-session-contents">
<h1>Session Info</h1>
<p>Description: {description}</p>
<p>Participants: {participants}</p>
<p><a action="delete" action-id="{id}">Delete?</a></p>
</script>
<!-- Template for an individual session track -->
<script type="text/template" id="template-session-track">
<div class="session-track" client-id="{clientId}">
<div track-role="latency" class="latency {latency}">Network</div>
<div track-role="vu" class="vu">VU: {vu}</div>
<div track-role="gain" class="gain">Gain: {gain}</div>
<div track-role="mute" class="mute">Muted: {mute}</div>
<div track-role="name" class="name">{name}</div>
<div track-role="part" class="part">{part}</div>
<div track-role="avatar" class="avatar"><img src="{avatar}"/></div>
</div>
</script>

View File

@ -0,0 +1,57 @@
<div layout="sidebar" class="sidebar" style="display:none;">
<div layout-sidebar-expander="visible" class="expander visible">
<p>Hide <span>&gt;&gt;</span></p>
</div>
<div layout-sidebar-expander="hidden" class="expander hidden">
<p><span>&lt;&lt;</span></p>
</div>
<div layout="panel" layout-id="panel1">
<div layout-panel="collapsed">
F
</div>
<div layout-panel="expanded" class="panel expanded">
<div layout-panel="header" class="panel-header">
<h2>Friends</h2>
</div>
<div layout-panel="contents" class="panelcontents">
<ul>
<li>
<%= image_tag "avatars/avatar_david.jpg", :class => "avatar small" %>
<p class="name">David Wilson</p>
<p class="status">Session: <a href="#">Blues at Seven</a></p>
</li>
<li>
<%= image_tag "avatars/avatar_brian.jpg", :class => "avatar small" %>
<p class="name">Brian Smith</p>
<p class="status">Available</p>
</li>
<li>
<%= image_tag "avatars/avatar_peter.jpg", :class => "avatar small" %>
<p class="name">Peter Walker</p>
<p class="status">Practicing</p>
</li>
<li class="offline">
<%= image_tag "avatars/avatar_seth.jpg", :class => "avatar small" %>
<p class="name">Seth Call</p>
<p class="status">Offline</p>
</li>
</ul>
</div>
</div>
</div>
<div layout="panel" layout-id="panel2">
<div layout-panel="collapsed">
S
</div>
<div layout-panel="expanded" class="panel expanded">
<div layout-panel="header" class="panel-header">
<h2>Session</h2>
</div>
<div layout-panel="contents" class="panelcontents">
When in a session, this will show details.
</div>
</div>
</div>
</div>

View File

@ -1,625 +1,59 @@
<div class="curtain" style="width:100%; height:100%; z-index:9999; background-color:#ffffff;"></div>
<div class="curtain" style="width:100%; height:100%; z-index:9999; background-color:#ffffff;"></div>
<!-- Shown to users who are not logged in -->
<div layout="landing" class="landing" style="display:none;">
<h1>Welcome to JamKazam!</h1>
<p>This is a landing page for users who haven't registered or signed-in. Marketing text to convince you how great it would be to use the service goes here.</p>
<p>No account? <a href="signup">Register!</a></p>
<p>or <a href="/signin">Sign In</a></p>
</div>
<%= render "landing" %>
<%= render "footer" %>
<%= render "header" %>
<%= render "home" %>
<%= render "sidebar" %>
<%= render "createSession" %>
<%= render "session" %>
<%= render "findSession" %>
<%= render "practice" %>
<%= render "bands" %>
<%= render "recordings" %>
<%= render "account" %>
<%= render "notify" %>
<div class="footer">
<p class="left">
Copyright &copy; 2012 JamKazam, Inc. All Rights Reserved.
</p>
<p class="right">
<a href="/#/contact">contact</a> |
<a href="/#/terms">terms fo use</a> |
<a href="/#/privacy">privacy</a>
</p>
</div>
<script type="text/javascript">
$(function() {
<!-- Normal signed-in user content -->
<div layout="header" class="header" style="display:none;">
<h1>Jamkazam</h1>
<div class="search">
<input type="text" class="searchtextinput" placeholder="Search for Bands, Musicians and Fans"/>
</div>
JK = JK || {};
<script type="text/template" id="template-search-section">
<h2>{section}</h2>
<ul>
{items}
</ul>
</script>
<% if current_user %>
JK.currentUserId = '<%= current_user.id %>';
<% else %>
JK.currentUserId = null;
<% end %>
<script type="text/template" id="template-search-noresults">
<h2 class="emptyresult">No Matches</h2>
<p>No results returned</p>
</script>
if (JK.currentUserId) {
<script type="text/template" id="template-search-item">
<li>
<a>
<img src="{image}"/>
<span class="text">{first_name} {last_name}</span>
<span class="subtext">{subtext}</span>
</a>
</li>
</script>
var jk = JK.JamKazam();
jk.initialize();
<div class="userinfo">
<!-- gravatar_for current_user, size: 52, hclass: "avatar medium" -->
<div class="username">
<h2>TODO Name</h2>
<%= image_tag "down_arrow.png", :class=> "profile-toggle" %>
<ul>
<li><a layout-link="account">Profile</a></li>
<li><%= link_to "Sign out", signout_path, method: "delete" %></li>
</ul>
</div>
</div>
</div>
<div layout="screen" layout-id="home" class="screen">
<!-- Grid is the count of the smallest spaces, then
individual spells span those spaces -->
<div layout-grid="2x4" class="grid">
<div layout-grid-position="0,0" layout-grid-rows="1" layout-grid-columns="2"
layout-link="createSession" class="homecard createsession">
<h2>Create Session</h2>
</div>
<div layout-grid-position="2,0" layout-grid-rows="1" layout-grid-columns="2"
layout-link="findSession" class="homecard findsession">
<h2>Find Session</h2>
</div>
<div layout-grid-position="0,1" layout-grid-rows="1" layout-grid-columns="1"
layout-link="bands" class="homecard bands">
<h2>Bands</h2>
</div>
<div layout-grid-position="1,1" layout-grid-rows="1" layout-grid-columns="2"
layout-link="recordings" class="homecard recordings">
<h2>Recordings</h2>
</div>
<div layout-grid-position="3,1" layout-grid-rows="1" layout-grid-columns="1"
layout-link="practice" class="homecard practice">
<h2>Practice</h2>
</div>
</div>
</div>
var header = new JK.Header(jk);
header.initialize();
<div layout="sidebar" class="sidebar" style="display:none;">
<div layout-sidebar-expander="visible" class="expander visible">
<p>Hide <span>&gt;&gt;</span></p>
</div>
<div layout-sidebar-expander="hidden" class="expander hidden">
<p><span>&lt;&lt;</span></p>
</div>
<div layout="panel" layout-id="panel1">
<div layout-panel="collapsed">
F
</div>
<div layout-panel="expanded" class="panel expanded">
<div layout-panel="header" class="panel-header">
<h2>Friends</h2>
</div>
<div layout-panel="contents" class="panelcontents">
<ul>
<li>
<%= image_tag "avatars/avatar_david.jpg", :class => "avatar small" %>
<p class="name">David Wilson</p>
<p class="status">Session: <a href="#">Blues at Seven</a></p>
</li>
<li>
<%= image_tag "avatars/avatar_brian.jpg", :class => "avatar small" %>
<p class="name">Brian Smith</p>
<p class="status">Available</p>
</li>
<li>
<%= image_tag "avatars/avatar_peter.jpg", :class => "avatar small" %>
<p class="name">Peter Walker</p>
<p class="status">Practicing</p>
</li>
<li class="offline">
<%= image_tag "avatars/avatar_seth.jpg", :class => "avatar small" %>
<p class="name">Seth Call</p>
<p class="status">Offline</p>
</li>
</ul>
</div>
</div>
</div>
var homeScreen = new JK.HomeScreen(jk);
homeScreen.initialize();
<div layout="panel" layout-id="panel2">
<div layout-panel="collapsed">
S
</div>
<div layout-panel="expanded" class="panel expanded">
<div layout-panel="header" class="panel-header">
<h2>Session</h2>
</div>
<div layout-panel="contents" class="panelcontents">
When in a session, this will show details.
</div>
</div>
</div>
var createSessionScreen = new JK.CreateSessionScreen(jk);
createSessionScreen.initialize();
</div>
var findSessionScreen = new JK.FindSessionScreen(jk);
findSessionScreen.initialize();
<!-- Create Session Screen -->
<div layout="screen" layout-id="createSession" class="screen secondary">
<div class="breadcrumb">
<p layout-link="home">Home &gt; </p>
<p class="current">Create Session</p>
</div>
<form id="create-session-form">
<div class="body">
<fieldset class="unstyled">
<legend>Unstyled and Lots of things omitted</legend>
<!--
<div class="formrow">
<label>Band
<select>
<option>Not a band session</option>
<option>The Killers</option>
<option>J&amp;J AdHoc Electronica Duo</option>
</select>
</label>
</div>
var sessionScreen = new JK.SessionScreen(jk);
sessionScreen.initialize();
<div class="formrow">
<label>Fan Access
<label>
<input type="radio" name="fan_access"/>
Public
</label>
<label>
<input type="radio" name="fan_access"/>
Private
</label>
</label>
</div>
var jam_server = JK.JamServer;
jam_server.connect();
<div class="formrow">
<label>Fan Chat
<label>
<input type="radio" name="fan_chat"/>
Yes
</label>
<label>
<input type="radio" name="fan_chat"/>
No
</label>
</label>
</div>
-->
<div class="formrow">
<fieldset>Musician Access
<label>By request/approval
<input type="radio" value="false" name="musician_access"/>
</label>
<label>Open
<input type="radio" value="true" checked="checked" name="musician_access"/>
</label>
</fieldset>
</div>
} else {
var landing = new JK.LandingPage(jk);
landing.initialize();
}
<div class="formrow">
<label>Genres
<select multiple="multiple" name="genres">
</select>
</label>
<input type="text" class="hidden"/>
</div>
<div class="formrow">
<label>Tracks (TODO! - hardcoded in form handler)
</label>
</div>
<div class="formrow">
<label>Session Description</label>
<textarea name="description"></textarea>
</div>
<div class="formrow">
<div id="added-invitations"></div>
<div id="invitation-controls">
<label>Musician Invitations
<input id="invitations" type="text"/>
</label>
</div>
</div>
<!--
<div class="formrow">
<label>Fan Invitations
<label>
<input type="checkbox"/>
Post link to this session for fans on
</label>
<a href="#">Facebook</a>
<a href="#">Twitter</a>
<a href="#">Google+</a>
</label>
<p><a href="#">
Upgrade your Studio subscription to let more fans listen
</a></p>
</div>
<div class="formrow">
<label>Legal Terms
<input type="checkbox"/>
I agree that intellectual property ownership of any musical works created during this session shall be governed by the terms of the Creative Commons CC BY-NC-SA license in accordance with the JamKazam Terms of Service.
</label>
</div>
-->
</fieldset>
</div>
<div class="footer">
<input type="submit" id="btn-create-session" value="Create Session"/>
<button layout-link="home">Cancel</button>
</div>
</form>
</div>
<!-- Added Invitation Template -->
<script type="text/template" id="template-added-invitation">
<div class="invitation" user-id="{userId}">{userName} <span>X</span></div>
</script>
<!-- Genre option template -->
<script type="text/template" id="template-genre-option">
<option value="{value}">{label}</option>
</script>
<!-- Create Session:Audio Screen -->
<!-- Keeping as this will move into a user settings dialog... -->
<div layout="screen" layout-id="createSessionAudio" class="screen secondary">
<div class="breadcrumb">
<p layout-link="home">Home &gt; </p>
<p class="current">Create a Session (3/3): Audio</p>
</div>
<form>
<p>Configure your instruments, headphones or speakers, and voice chat settings. Then play your instrument and sing or speak into your microphone, and ensure you hear everything correctly before entering the session.</p>
<fieldset>
<legend>Audio Settings</legend>
<fieldset>
<legend>Instrument 1</legend>
<label>
Sound Card
<select>
<option>Internal Intel Audio</option>
<option>Tascam US-800</option>
</select>
</label>
<label>
Driver
<select>
<option>These will be tied to the sound card</option>
</select>
</label>
<label>
Input
<select>
<option>Input 1</option>
<option>Input 2</option>
<option>Input 3</option>
<option>Input 4</option>
<option>Input 5</option>
<option>Input 6</option>
</select>
</label>
<label>
Instrument
<select>
<optgroup label="High Popular">
<option>Acoustic Guitar</option>
<option>Bass Guitar</option>
<option>Computer</option>
<option>Drums</option>
<option>Electric Guitar</option>
<option>Keyboard</option>
<option>Voice</option>
</optgroup>
<optgroup label="Mid Popular">
<option>Flute</option>
<option>Clarinet</option>
<option>Saxophone</option>
<option>Trumpet</option>
<option>Violin</option>
<option>Trombone</option>
<option>Banjo</option>
<option>Harmonica</option>
<option>Accordian</option>
</optgroup>
<optgroup label="Low Popular">
<option>French Horn</option>
<option>Euphonium</option>
<option>Tuba</option>
<option>Oboe</option>
<option>Ukulele</option>
<option>Cello</option>
<option>Viola</option>
<option>Mandolin</option>
</optgroup>
</select>
</label>
<label>Other <input type="text"/></label>
<label>Gain Slider goes here</label>
<label>VU Meter goes here</label>
</fieldset>
</fieldset>
<fieldset>
<legend>Headphone/Speaker Settings</legend>
<label>
Sound Card
<select>
<option>Internal Intel Audio</option>
<option>Tascam US-800</option>
</select>
</label>
<label>
Driver
<select>
<option>These will be tied to the sound card</option>
</select>
</label>
<label>
Output
<select>
<option>Output 1</option>
<option>Output 2</option>
<option>Output 3</option>
<option>Output 4</option>
<option>Output 5</option>
<option>Output 6</option>
</select>
</label>
</fieldset>
<fieldset>
<legend>Voice Chat Settings</legend>
<label>
Sound Card
<select>
<option>Internal Intel Audio</option>
<option>Tascam US-800</option>
</select>
</label>
<label>Gain Slider goes here</label>
<label>VU Meter goes here</label>
</fieldset>
<div class="footer">
<button layout-link="createSessionInvite">Back</button>
<button layout-link="session">Jam</button>
<button layout-link="home">Cancel</button>
</div>
</form>
</div>
<!-- Actual Session Screen -->
<div layout="screen" layout-id="session" layout-arg="id" class="screen secondary">
<div class="breadcrumb">
<p layout-link="home">Home &gt; </p>
<p class="current">Session</p>
</div>
<div id="session-contents">
<div id="session-info"></div>
<div id="session-tracks"></div>
</div>
</div>
<script type="text/template" id="template-session-contents">
<h1>Session Info</h1>
<p>Description: {description}</p>
<p>Participants: {participants}</p>
<p><a action="delete" action-id="{id}">Delete?</a></p>
</script>
<!-- Template for an individual session track -->
<script type="text/template" id="template-session-track">
<div class="session-track" client-id="{clientId}">
<div track-role="latency" class="latency {latency}">Network</div>
<div track-role="vu" class="vu">VU: {vu}</div>
<div track-role="gain" class="gain">Gain: {gain}</div>
<div track-role="mute" class="mute">Muted: {mute}</div>
<div track-role="name" class="name">{name}</div>
<div track-role="part" class="part">{part}</div>
<div track-role="avatar" class="avatar"><img src="{avatar}"/></div>
</div>
</script>
<!-- Find Session Screen -->
<div layout="screen" layout-id="findSession" class="screen secondary">
<h1>Find a Session</h1>
<p layout-link="home">Home</p>
<table>
<tr>
<th>Members</th>
<th>Name</th>
<th>Delete</th>
</tr>
<tbody id="findSession-tableBody">
</tbody>
</table>
</div>
<script type="text/template" id="template-findSession-row">
<tr>
<td>{participants}</td>
<td><a href="#/session/{id}">{description}</a></td>
<td><a action="delete" action-id="{id}">X</a></td>
</tr>
</script>
<!-- Practice Screen -->
<div layout="screen" layout-id="practice" class="screen secondary">
<h1>Practice</h1>
<p>TODO</p>
<p layout-link="home">Home</p>
</div>
<!-- Bands Screen -->
<div layout="screen" layout-id="bands" class="screen secondary">
<h1>Bands</h1>
<p>TODO</p>
<p layout-link="home">Home</p>
</div>
<!-- Recordings Screen -->
<div layout="screen" layout-id="recordings" class="screen secondary">
<h1>Recordings</h1>
<p>TODO</p>
<p layout-link="home">Home</p>
</div>
<!-- Account Summary Dialog -->
<div layout="dialog" layout-id="account" class="dialog">
<h1>Account Settings</h1>
<div class="panel">
<h2>Identity</h2>
<div id="identity-summary"></div>
<a layout-link="account-identity">Update</a>
</div>
<div class="panel">
<h2>Profile</h2>
<div id="profile-summary"></div>
<a layout-link="account-profile">Update</a>
</div>
<div class="buttonrow">
<a layout-action="close" class="button1">Close</a>
</div>
</div>
<script type="text/template" id="template-identity-summary">
<p>Username: {email}</p>
<p>Change Password Here</p>
</script>
<!-- Account Identity Update Form -->
<div layout="dialog" layout-id="account-identity" class="dialog">
<form id="account-identity-form">
<fieldset>
<legend>Identity</legend>
<div class="formrow">
<label>Email
<input name="email" type="text"/>
</label>
</div>
<div class="formrow">
<label>Password
<input name="password" type="password"/>
</label>
<p class="tip">Leave blank to leave unchanged</p>
</div>
<div class="formrow">
<label>Confirm Password
<input name="password_confirmation" type="password"/>
</label>
</div>
<div class="buttonrow">
<button layout-action="close">Cancel</button>
<input type="submit" value"Update"/>
</div>
</fieldset>
</form>
</div>
<!-- Account Profile Update Form -->
<div layout="dialog" layout-id="account-profile" class="dialog">
<form id="account-profile-form">
<fieldset>
<legend>Profile</legend>
<div class="formrow">
<label>Name
<input type="text" name="name"/>
</label>
</div>
<div class="formrow">
<label>Profile Picture
<p>TO DO</p>
</label>
</div>
<div class="formrow">
<div id="added-profile-instruments"></div>
<div id="profile-instruments-controls">
<label>Instruments
<input id="profile-instruments" type="text"/>
</label>
<p class="tip">Limit of 5</p>
</div>
</div>
<div class="buttonrow">
<button layout-action="close">Cancel</button>
<input type="submit" value"Update"/>
</div>
</fieldset>
</form>
</div>
<script type="text/template" id="template-profile-instrument">
<div class="profile-instrument" instrument-id="{instrumentId}">
<div class="instrument">{instrumentName} <span>X</span></div>
<div class="proficiency">
<select>
<option value="1">Beginner</option>
<option selected="selected" value="2">Intermediate</option>
<option value="3">Advanced</option>
<option value="4">Expert</option>
</select>
</div>
</div>
</script>
<div layout="notify" class="notify">
<h1>Notification Popup</h1>
<a layout-action="close">Close</a>
<p></p>
<div></div>
</div>
<script type="text/javascript">
$(function() {
JK = JK || {};
<% if current_user %>
JK.currentUserId = '<%= current_user.id %>';
<% else %>
JK.currentUserId = null;
<% end %>
if (JK.currentUserId) {
var jk = JK.JamKazam();
jk.initialize();
var header = new JK.Header(jk);
header.initialize();
var homeScreen = new JK.HomeScreen(jk);
homeScreen.initialize();
var createSessionScreen = new JK.CreateSessionScreen(jk);
createSessionScreen.initialize();
var findSessionScreen = new JK.FindSessionScreen(jk);
findSessionScreen.initialize();
var sessionScreen = new JK.SessionScreen(jk);
sessionScreen.initialize();
var jam_server = JK.JamServer;
jam_server.connect();
} else {
var landing = new JK.LandingPage(jk);
landing.initialize();
}
})
</script>
})
</script>

View File

@ -11,17 +11,24 @@
ajaxError: function() { console.debug("ajaxError"); }
};
var selectors = {
genres: '#create-session-form select[name="genres"]',
description: '#create-session-form textarea[name="description"]'
};
beforeEach(function() {
loadFixtures('createSession.htm');
// Use the actual screen markup
jasmine.getFixtures().fixturesPath = '/app/views/clients';
loadFixtures('_createSession.html.erb');
spyOn(appFake, 'notify');
css = new context.JK.CreateSessionScreen(appFake);
});
describe("resetForm", function() {
it("description should be empty", function() {
$('#create-session-form textarea[name="description"]').val('XYZ');
$(selectors.description).val('XYZ');
css.resetForm();
expect($('#create-session-form textarea[name="description"]').val()).toEqual('');
expect($(selectors.description).val()).toEqual('');
});
});
@ -33,11 +40,22 @@
});
it("should populate genres select", function() {
css.loadGenres();
expect($('#create-session-form select[name="genres"] option').length).toEqual(2);
expect($(selectors.genres + ' option').length).toEqual(2);
});
});
describe("validateForm", function() {
function makeValid() {
var genre = '<option selected="selected" value="1">1</option>';
$(selectors.genres).html(genre);
$(selectors.description).val('XYZ');
}
beforeEach(function() {
makeValid();
});
it("valid form", function() {
var errs = css.validateForm();
expect(errs).toBeNull();
@ -48,7 +66,7 @@
'<option selected="selected" value="2">2</option>' +
'<option selected="selected" value="3">3</option>' +
'<option selected="selected" value="4">4</option>';
$('#create-session-form select[name="genres"]').html(htm);
$(selectors.genres).html(htm);
var errs = css.validateForm();
// Verify that we have an error.
expect(errs).toBeTruthy();
@ -59,7 +77,7 @@
});
it("should fail with 0 genres", function() {
$('#create-session-form select[name="genres"]').html('');
$(selectors.genres).html('');
var errs = css.validateForm();
// Verify that we have an error.
expect(errs).toBeTruthy();
@ -68,7 +86,7 @@
});
it("should fail with empty description", function() {
$('#create-session-form textarea[name="description"]').html('');
$(selectors.description).val('');
var errs = css.validateForm();
// Verify that we have an error.
expect(errs).toBeTruthy();

View File

@ -1,11 +0,0 @@
<form id="create-session-form">
<select multiple="multiple" name="genres">
<option value="African" selected="selected">African</option>
</select>
<input type="radio" name="musician_access" value="true" selected="selected"/>
<textarea name="description">Sample Description</textarea>
</form>
<script type="text/html" id="template-genre-option">
<option value"{value}">{label}</option>
</script>

View File

@ -2,6 +2,10 @@
describe("jquery.formToObject tests", function() {
beforeEach(function() {
jasmine.getFixtures().fixturesPath = '/spec/javascripts/fixtures';
});
describe("Top level", function() {
describe("text input named foo, val bar", function() {

View File

@ -4,6 +4,7 @@
var jamkazam;
beforeEach(function() {
jasmine.getFixtures().fixturesPath = '/spec/javascripts/fixtures';
jamkazam = new context.JK.JamKazam();
});
@ -48,4 +49,4 @@
});
}(window, jQuery));
}(window, jQuery));

View File

@ -4,6 +4,7 @@
var layout, cardLayout, testOpts;
beforeEach(function() {
jasmine.getFixtures().fixturesPath = '/spec/javascripts/fixtures';
layout = new context.JK.Layout();
});

View File

@ -2,6 +2,10 @@
describe("searcher.js tests", function() {
beforeEach(function() {
jasmine.getFixtures().fixturesPath = '/spec/javascripts/fixtures';
});
describe("Empty Search", function() {
// See the markup in fixtures/searcher.htm