Update mobile control page to use team alternate name if set

Add entry to operator page alternate name edit popup for mobile alt name
rollerderby · Oct 20, 2013 · 38bd57d · 38bd57d
1 parent 9d56a55
commit 38bd57d
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 17 deletions.
diff --git a/html/controls/mobile.css b/html/controls/mobile.css
@@ -14,6 +14,11 @@
 	span.ClockBubble.Running { background: rgba(0, 255, 0, 0.5); }
 /* END ClockBubbles */
 
+/* Alternate Names */
+	.HasAlternateName>.Name { display: none; }
+	:not(.HasAlternateName)>.AlternateName { display: none; }
+/* END Alternate Names */
+
 
 /* JamControlPage */
 	#JamControlPage div { text-align: center; }

diff --git a/html/controls/mobile.html b/html/controls/mobile.html
@@ -119,14 +119,20 @@ <h1>Jam Control</h1>
 				<button class="StartJam" data-role="button" data-icon="check" data-iconpos="right">Start Jam</button>
 			</div>
 			<div class="ui-block-b">
-				<button class="StopJam" data-role="button" data-icon="plus" data-iconpos="left">Stop Jam</button>
+				<button class="StopJam" data-role="button" data-icon="delete" data-iconpos="left">Stop Jam</button>
 			</div>
 		</div>
 		<button class="Timeout" data-role="button">Timeout</button>
 		<div class="ui-grid-b Timeout">
-			<div class="ui-block-a"><button class="Team1"><a class="Name"></a></button></div>
+			<div class="ui-block-a"><button class="Team1">
+				<span class="Team1 Name">Team 1</span>
+				<span class="Team1 AlternateName"></span>
+			</button></div>
 			<div class="ui-block-b"><button class="Official">Official</button></div>
-			<div class="ui-block-c"><button class="Team2"><a class="Name"></a></button></div>
+			<div class="ui-block-c"><button class="Team2">
+				<span class="Team2 Name">Team 2</span>
+				<span class="Team2 AlternateName"></span>
+			</button></div>
 		</div>
 		<p class="Clocks">
 			<span class="ClockBubble Period">Period</span>
@@ -165,8 +171,16 @@ <h1>Team Score</h1>
 		<ul data-role="listview">
 			<li><a href="#TeamSetScorePage">Both Teams Set Score</a></li>
 			<li><a href="#TeamBothScorePage">Both Teams Manage Score</a></li>
-			<li><a href="#Team1ScorePage"><span class="Team1 Name"></span> Manage Score</a></li>
-			<li><a href="#Team2ScorePage"><span class="Team2 Name"></span> Manage Score</a></li>
+			<li><a href="#Team1ScorePage">
+				<span class="Team1 Name"></span>
+				<span class="Team1 AlternateName"></span>
+				Manage Score
+			</a></li>
+			<li><a href="#Team2ScorePage">
+				<span class="Team2 Name"></span>
+				<span class="Team2 AlternateName"></span>
+				Manage Score
+			</a></li>
 		</ul>
 	</div>
 </div>
@@ -178,14 +192,20 @@ <h1>Set Team Score</h1>
 	</div>
 
 	<div data-role="content">
-		<div><a class="Team1 Name"></a></div>
+		<div>
+			<a class="Team1 Name"></a>
+			<a class="Team1 AlternateName"></a>
+		</div>
 		<div><a class="Team1 Score"></a></div>
 		<div>
 			<input type="number" class="Team1 SetScore"/>
 			<button class="Team1 SetScore" data-inline="true">Set Score</button>
 		</div>
 
-		<div><a class="Team2 Name"></a></div>
+		<div>
+			<a class="Team2 Name"></a>
+			<a class="Team2 AlternateName"></a>
+		</div>
 		<div><a class="Team2 Score"></a></div>
 		<div>
 			<input type="number" class="Team2 SetScore"/>
@@ -204,7 +224,10 @@ <h1>Both Team Score</h1>
 	<div data-role="content">
 
 		<div data-role="collapsible" class="Orientation Portrait HV Vertical">
-			<h3><a class="Team1 Name"></a></h3>
+			<h3>
+				<a class="Team1 Name"></a>
+				<a class="Team1 AlternateName"></a>
+			</h3>
 			<div class="ui-grid-b">
 				<div class="ui-block-a">
 					<button class="Team1 ScoreDown" data-inline="true" value="-1">-1</button>
@@ -247,7 +270,10 @@ <h3><a class="Team1 Name"></a></h3>
 		</div>
 
 		<div data-role="collapsible" class="Orientation Portrait HV Vertical">
-			<h3><a class="Team2 Name"></a></h3>
+			<h3>
+				<a class="Team2 Name"></a>
+				<a class="Team2 AlternateName"></a>
+			</h3>
 			<div class="ui-grid-b">
 				<div class="ui-block-a">
 					<button class="Team2 ScoreDown" data-inline="true" value="-1">-1</button>
@@ -292,6 +318,7 @@ <h3><a class="Team2 Name"></a></h3>
 		<div class="ui-grid-a Orientation Landscape HV Vertical">
 			<div class="ui-block-a">
 				<a class="Team1 Name"></a>
+				<a class="Team1 AlternateName"></a>
 				<div class="ui-grid-b">
 					<div class="ui-block-a">
 						<button class="Team1 ScoreDown" data-inline="true" value="-1">-1</button>
@@ -334,6 +361,7 @@ <h3><a class="Team2 Name"></a></h3>
 			</div>
 			<div class="ui-block-b">
 				<a class="Team2 Name"></a>
+				<a class="Team2 AlternateName"></a>
 				<div class="ui-grid-b">
 					<div class="ui-block-a">
 						<button class="Team2 ScoreDown" data-inline="true" value="-1">-1</button>
@@ -377,7 +405,10 @@ <h3><a class="Team2 Name"></a></h3>
 		</div>
 
 		<div class="HV Horizontal">
-			<div><a class="Team1 Name"></a></div>
+			<div>
+				<a class="Team1 Name"></a>
+				<a class="Team1 AlternateName"></a>
+			</div>
 			<div><a class="Team1 Score"></a></div>
 			<div class="ui-grid-d">
 				<div class="ui-block-a">
@@ -411,7 +442,10 @@ <h3><a class="Team2 Name"></a></h3>
 					<button class="Team1 ScoreDown" data-inline="true" value="-5">-5</button>
 				</div>
 			</div>
-			<div><a class="Team2 Name"></a></div>
+			<div>
+				<a class="Team2 Name"></a>
+				<a class="Team2 AlternateName"></a>
+			</div>
 			<div><a class="Team2 Score"></a></div>
 			<div class="ui-grid-d">
 				<div class="ui-block-a">
@@ -453,11 +487,18 @@ <h3><a class="Team2 Name"></a></h3>
 <div data-role="page" id="Team1ScorePage">
 	<div data-role="header">
 		<a href="#TeamScorePage" data-direction="reverse" data-icon="arrow-l">Score</a>
-		<h1><span class="Team1 Name"></span> Score</h1>
+		<h1>
+			<span class="Team1 Name"></span>
+			<span class="Team1 AlternateName"></span>
+			Score
+		</h1>
 	</div>
 
 	<div data-role="content">
-		<div><a class="Team1 Name"></a></div>
+		<div>
+			<a class="Team1 Name"></a>
+			<a class="Team1 AlternateName"></a>
+		</div>
 		<div><a class="Team1 Score"></a></div>
 		<div class="ui-grid-a">
 			<div class="ui-block-a">
@@ -497,11 +538,18 @@ <h1><span class="Team1 Name"></span> Score</h1>
 <div data-role="page" id="Team2ScorePage">
 	<div data-role="header">
 		<a href="#TeamScorePage" data-direction="reverse" data-icon="arrow-l">Score</a>
-		<h1><span class="Team2 Name"></span> Score</h1>
+		<h1>
+			<span class="Team2 Name"></span>
+			<span class="Team2 AlternateName"></span>
+			Score
+		</h1>
 	</div>
 
 	<div data-role="content">
-		<div><a class="Team2 Name"></a></div>
+		<div>
+			<a class="Team2 Name"></a>
+			<a class="Team2 AlternateName"></a>
+		</div>
 		<div><a class="Team2 Score"></a></div>
 		<div class="ui-grid-a">
 			<div class="ui-block-a">

diff --git a/html/controls/mobile.js b/html/controls/mobile.js
@@ -16,17 +16,25 @@ $sb(function() {
 	setupPeriodTimePage();
 	setupTeamScorePage();
 	setupPenaltyTimePage();
+
+	$.each( [ "1", "2" ], function(i, t) {
+		$sb("ScoreBoard.Team("+t+").AlternateName(mobile).Name").$sbBindAndRun("sbchange", function(event, val) {
+			$(".Team"+t+".AlternateName").parent().toggleClass("HasAlternateName", val != "");
+		});
+	});
 });
 
 function setupJamControlPage() {
 	$sb("ScoreBoard.StartJam").$sbControl("#JamControlPage button.StartJam").val(true);
 	$sb("ScoreBoard.StopJam").$sbControl("#JamControlPage button.StopJam").val(true);
 	$sb("ScoreBoard.Timeout").$sbControl("#JamControlPage button.Timeout").val(true);
 	$sb("ScoreBoard.Team(1).Timeout").$sbControl("#JamControlPage div.Timeout button.Team1").val(true);
-	$sb("ScoreBoard.Team(1).Name").$sbElement("#JamControlPage div.Timeout button.Team1>a.Name")
+	$sb("ScoreBoard.Team(1).Name").$sbElement("#JamControlPage div.Timeout button.Team1>span.Name");
+	$sb("ScoreBoard.Team(1).AlternateName(mobile).Name").$sbElement("#JamControlPage div.Timeout button.Team1>span.AlternateName");
 	$sb("ScoreBoard.Timeout").$sbControl("#JamControlPage div.Timeout button.Official").val(true);
 	$sb("ScoreBoard.Team(2).Timeout").$sbControl("#JamControlPage div.Timeout button.Team2").val(true);
-	$sb("ScoreBoard.Team(2).Name").$sbElement("#JamControlPage div.Timeout button.Team2>a.Name")
+	$sb("ScoreBoard.Team(2).Name").$sbElement("#JamControlPage div.Timeout button.Team2>span.Name");
+	$sb("ScoreBoard.Team(2).AlternateName(mobile).Name").$sbElement("#JamControlPage div.Timeout button.Team2>span.AlternateName");
 
 	$.each( [ "Period", "Jam", "Timeout" ], function(i, clock) {
 		$sb("ScoreBoard.Clock("+clock+").Running").$sbBindAndRun("sbchange", function(event, value) {
@@ -122,9 +130,11 @@ function setupTeamScorePage() {
 		var score = team.$sb("Score");
 
 		team.$sb("Name").$sbElement("#TeamScorePage span.Team"+n+".Name");
+		team.$sb("AlternateName(mobile).Name").$sbElement("#TeamScorePage span.Team"+n+".AlternateName");
 
 		$.each([ "#Team"+n+"ScorePage", "#TeamSetScorePage", "#TeamBothScorePage" ], function(ii, e) {
 			team.$sb("Name").$sbElement(e+" .Team"+n+".Name");
+			team.$sb("AlternateName(mobile).Name").$sbElement(e+" .Team"+n+".AlternateName");
 			score.$sbElement(e+" a.Team"+n+".Score");
 			score.$sbControl(e+" button.Team"+n+".ScoreDown", { sbcontrol: {
 				sbSetAttrs: { change: true }

diff --git a/html/controls/operator.js b/html/controls/operator.js
@@ -1147,6 +1147,7 @@ function createAlternateNamesDialog(team) {
 	newIdInput.autocomplete({
 		minLength: 0,
 		source: [
+			{ label: "mobile (Mobile Control)", value: "mobile" },
 			{ label: "overlay (Video Overlay)", value: "overlay" },
 			{ label: "twitter (Twitter)", value: "twitter" }
 		]