changeset 18:115dda3d1728

configTagsInTopic with select-list-move UI
author Zoe Hong <zhong@mpiwg-berlin.mpg.de>
date Mon, 23 Feb 2015 10:55:28 +0100
parents 82f8c6bd2b69
children f60969462226
files develop/views/Extractapp/configtagsintopic.php
diffstat 1 files changed, 116 insertions(+), 20 deletions(-) [+]
line wrap: on
line diff
--- a/develop/views/Extractapp/configtagsintopic.php	Fri Feb 20 17:57:02 2015 +0100
+++ b/develop/views/Extractapp/configtagsintopic.php	Mon Feb 23 10:55:28 2015 +0100
@@ -12,9 +12,123 @@
 </head>
 
 <body>
+<script type="text/javascript">
+function SelectMoveRows(s1, s2)
+{
+    var selId = '';
+    var selText = '';
+    // Move rows from s1 to s2 from bottom to top
+    for (i = s1.options.length - 1; i >= 0; i--)
+    {
+        if (s1.options[i].selected == true)
+        {
+            selId = s1.options[i].value;
+            selText = s1.options[i].text;
+            var newRow = new Option(selText,selId);
+            s2.options[s2.length] = newRow;
+            s1.options[i] = null;
+        }
+    }
+    SelectSort(s2);
+}
+function SelectSort(selList)
+{
+    var id = '';
+    var t = '';
+    for (x = 0; x < selList.length - 1; x++)
+    {
+        for (y = x+1; y < selList.length; y++)
+        {
+            if (selList[x].text > selList[y].text)
+            {
+                // Swap rows
+                id = selList[x].value;
+                t = selList[x].text;
+                selList[x].value = selList[y].value;
+                selList[x].text = selList[y].text;
+                selList[y].value = id;
+                selList[y].text = t;
+            }
+        }
+    }
+}
+
 
 	
-	<form autocomplete='off' action="Javascript:checkTopic(this)">
+function checkTopic(t) {
+	// TODO: save the modification into topic_tag_relation
+	var id = t.name;
+	var val;
+	console.log(id);
+
+
+
+
+}
+
+</script>
+
+<div class="container-fluid">
+    <div class="row">	
+    	<div class="col-xs-12 col-sm-12 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
+
+		<form name="config" autocomplete='off' action="Javascript:checkTopic(this)">
+			<h3>Topic: <?php echo $topic_name;?> </h3>
+			
+			<table class="table">
+				<thead>
+					<tr>
+						<td class="text-warning"> Selected tags </td>
+						<td></td>
+						<td class="text-warning"> Other tags </td>
+					</tr>
+				</thead>
+				<tbody>
+				<tr>
+					<td>
+						<select name="InTopic" size="<?php echo count($taglistArray)*0.8; ?>" class="form-control" multiple>
+							<?php 
+								foreach ($taglistArray as $taglistValue) {
+									if ($taglistValue['topic_id'] == $topic) {
+										echo "<option value='".$taglistValue['tag']."' class='text-primary'>".$taglistValue['name']."</option>";
+									}
+								}
+							?>
+						</select>
+					</td>
+					<td align="center" valign="middle">
+			            <input type="button" value="<< Add" class="btn btn-primary" onClick="SelectMoveRows(document.config.Others, document.config.InTopic)"><br>
+			         	<br>
+			            <input type="button" value="Remove >>" class="btn btn-warning" onClick="SelectMoveRows(document.config.InTopic, document.config.Others)"><br>
+			        </td>
+					<td >
+						<select name="Others" size="<?php echo count($taglistArray)*0.8; ?>" class="form-control" multiple>
+							<?php 
+								foreach ($taglistArray as $taglistValue) {
+									if ($taglistValue['topic_id'] != $topic) {
+										echo "<option value='".$taglistValue['tag']."' class='text-muted' >".$taglistValue['name']."</option>";
+									}
+								}
+							?>
+						</select>
+					</td>
+				</tr>
+				<tr>
+					<td></td>
+					<td><input type="submit" value="Submit" class="btn btn-lg btn-success"></td>
+					<td></td>
+				</tr>
+				</tbody>
+			</table>
+
+			
+		</form>
+		</div>
+	</div>
+</div>
+
+	<!--
+	<form name="config" autocomplete='off' action="Javascript:checkTopic(this)">
 		<h3>Topic: <?php echo $topic_name;?> </h3>
 		<div> Select/Unselect the following tags for the topic. </div> 
 		<input type="submit" value="Submit">
@@ -47,26 +161,8 @@
 		</table>
 		
 	</form>
+	-->
 
 
-	<script type="text/javascript">
-	function checkTopic(t) {
-		console.log("DEBUG");
-		// TODO: save the modification into topic_tag_relation
-
-		var id = t.name;
-		var val;
-		console.log(id);
-		/*
-		if (t.checked) {
-			val = '1';
-		} else {
-			val = '0';
-		}
-		*/
-
-	}
-
-	</script>
 </body>
 </html>