Mercurial > hg > extraction-interface

view interface/edit_taglist.php @ 21:c805470cefee

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Remove bootstrap.TaggingText UI layout modification
author Zoe Hong <zhong@mpiwg-berlin.mpg.de>
date Tue, 24 Feb 2015 16:09:59 +0100
parents b12c99b7c3f0
children
line wrap: on
line source

<?php
header("Content-Type: text/html;charset=utf-8");

/**
* "Lib_mb_utf8.php" is a set of common functions used to convert encode of text
* "config.php" containing a system name variable. Please make it the same as the system's folder name.
*/
include_once('Lib_mb_utf8.php');
include_once('config.php');

if (isset($_GET['id'])) {
	$section_id = $_GET['id'];
}
   
set_time_limit(0);
ini_set('memory_limit', '-1');

$link_mysql = mysql_connect($mysql_server, $mysql_user, $mysql_password);
mysql_query("SET NAMES utf8");

if (!$link_mysql) {
    die('Could not connect: ' . mysql_error());
}

$db_selected = mysql_select_db($mysql_database, $link_mysql);
if (!$db_selected) {
    die ('Can\'t use foo : ' . mysql_error());
}

if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") 
{
  $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;

  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

  switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;    
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
  }
  return $theValue;
}
}

$taglistArray = array();
$query = sprintf("SELECT * FROM `taglist` WHERE `systemName`='%s' ORDER BY `tag` ASC", $systemNAME);
$result = mysql_query($query);
while ($row = mysql_fetch_assoc($result)) {
	$taglistArray[$row['id']] = array($row['name'], $row['tag'], $row['color']);
}
?>

<html>
<head>
<title></title>
<script src="jquery-1.10.2.min.js"></script>
<link rel="stylesheet" href="css/colorpicker.css" type="text/css" />
<script type="text/javascript" src="js/colorpicker.js"></script>
<script type="text/javascript" src="js/eye.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/layout.js?ver=1.0.2"></script>
</head>

<body>


<table width="100%" border="1" id="tableMain"> </table>


<script type="text/javascript">

var largestId = 0;

function addTag( ) {
	largestId++;
	var row = tableMain.insertBefore(document.createElement("tr"), document.getElementById("trAddTag") );
	row.setAttribute("height","50");
	row.id = "tr"+largestId;
	
	var newcolumn = document.createElement("td");
	newcolumn.id = "tdId"+largestId;
	newcolumn.setAttribute("width","150");
	row.appendChild(newcolumn).innerHTML=largestId;
	
	var newcolumn = document.createElement("td");
	newcolumn.setAttribute("width","150");
	newcolumn.id = "tdName"+largestId;
	newcolumn.setAttribute("idnum",largestId);
	newcolumn.setAttribute("name","tdName");
	row.appendChild(newcolumn).innerHTML="";
	
	var newcolumn = document.createElement("td");
	newcolumn.setAttribute("width","150");
	newcolumn.id = "tdTag"+largestId;
	newcolumn.setAttribute("idnum",largestId);
	newcolumn.setAttribute("name","tdTag");
	row.appendChild(newcolumn).innerHTML="";
	
	var newcolumn = document.createElement("td");
	newcolumn.setAttribute("width","150");
	row.appendChild(newcolumn).innerHTML="<div id=\"colorSelector"+largestId+"\"><div id=\"colorSelectorB"+largestId+"\"  style=\"background-color: #000000\"></div></div>";
	
	var newcolumn = document.createElement("td");
	newcolumn.setAttribute("width","50");
	row.appendChild(newcolumn).innerHTML="<button onclick=\"saveTag("+largestId+", 'insert')\">Save</button>";
	
	var newcolumn = document.createElement("td");
	newcolumn.setAttribute("width","50");
	row.appendChild(newcolumn).innerHTML="<button onclick=\"DeleteTag("+largestId+")\">Delete</button>";
	
	$('#colorSelector'+largestId).ColorPicker({
		color: '#000000',
		onShow: function (colpkr) {
			$(colpkr).fadeIn(500);
			return false;
		},
		onHide: function (colpkr) {
			$(colpkr).fadeOut(500);
			return false;
		},
		onChange: function (hsb, hex, rgb) {
			$('#colorSelector'+largestId+' div').css('backgroundColor', '#' + hex);
		}
	});
	
	document.styleSheets[0].addRule("#colorSelector"+largestId, "position: relative;	width: 36px;	height: 36px;	background: url(../images/select.png);")
	document.styleSheets[0].addRule("#colorSelector"+largestId+" div", "position: absolute;	top: 3px;	left: 3px;	width: 30px;	height: 30px;	background: url(../images/select.png) center;")
}


function addNode( id, name, tag, color ) {
	if ( parseInt(id) > largestId ) largestId=parseInt(id);
	var tableMain=document.getElementById("tableMain");
	
	if ( id == "AddTag" ) {
		var row = tableMain.appendChild(document.createElement("tr"));
		row.id = "trAddTag";
		
		var newcolumn = document.createElement("td");
		newcolumn.setAttribute("width","150");
		newcolumn.setAttribute("colspan","6");
		newcolumn.setAttribute("align","center");
		row.appendChild(newcolumn).innerHTML="<button onclick=\"addTag()\" style=\"height: 50px; width: 300px\">Add New Tag</button>";
		
		return 0;
	}
	
	var row = tableMain.appendChild(document.createElement("tr"));
	row.setAttribute("height","50");
	row.id = "tr"+id;
	
	var newcolumn = document.createElement("td");
	newcolumn.id = "tdId"+id;
	newcolumn.setAttribute("width","150");
	row.appendChild(newcolumn).innerHTML=id;
	
	var newcolumn = document.createElement("td");
	newcolumn.setAttribute("width","150");
	newcolumn.id = "tdName"+id;
	newcolumn.setAttribute("idnum",id);
	newcolumn.setAttribute("name","tdName");
	row.appendChild(newcolumn).innerHTML=name;
	
	var newcolumn = document.createElement("td");
	newcolumn.setAttribute("width","150");
	newcolumn.id = "tdTag"+id;
	newcolumn.setAttribute("idnum",id);
	newcolumn.setAttribute("name","tdTag");
	row.appendChild(newcolumn).innerHTML=tag;
	
	var newcolumn = document.createElement("td");
	newcolumn.setAttribute("width","150");
	if ( color=="Color") {
		row.appendChild(newcolumn).innerHTML="Color";
	} else {
		row.appendChild(newcolumn).innerHTML="<div id=\"colorSelector"+id+"\"><div id=\"colorSelectorB"+id+"\" style=\"background-color: "+color+"\"></div></div>";
	}
	
	var newcolumn = document.createElement("td");
	newcolumn.setAttribute("width","50");
	if ( color=="Color") {
		row.appendChild(newcolumn).innerHTML="Save";
	} else {
		row.appendChild(newcolumn).innerHTML="<button onclick=\"saveTag("+id+", 'update')\">Save</button>";
	}
	
	var newcolumn = document.createElement("td");
	newcolumn.setAttribute("width","50");
	if ( color=="Color") {
		row.appendChild(newcolumn).innerHTML="Delete";
	} else {
		row.appendChild(newcolumn).innerHTML="<button onclick=\"DeleteTag("+id+")\">Delete</button>";
	}
	
	$('#colorSelector'+id).ColorPicker({
		color: color,
		onShow: function (colpkr) {
			$(colpkr).fadeIn(500);
			return false;
		},
		onHide: function (colpkr) {
			$(colpkr).fadeOut(500);
			return false;
		},
		onChange: function (hsb, hex, rgb) {
			$('#colorSelector'+id+' div').css('backgroundColor', '#' + hex);
		}
	});
	
	document.styleSheets[0].addRule("#colorSelector"+id, "position: relative;	width: 36px;	height: 36px;	background: url(../images/select.png);")
	document.styleSheets[0].addRule("#colorSelector"+id+" div", "position: absolute;	top: 3px;	left: 3px;	width: 30px;	height: 30px;	background: url(../images/select.png) center;")
}

function saveTag( id, type ) {

	var elid = document.getElementById("tdId"+id).innerHTML;
	var elname = document.getElementById("tdName"+id).innerHTML;
	var eltag = document.getElementById("tdTag"+id).innerHTML;
	var elcolor = $("#colorSelectorB"+id).css("background-color");
	
	$.ajax({
		url : 'save_tag_element.php',
		async : false,
		type : 'POST',
		data : 'id='+elid+'&name='+elname+'&tag='+eltag+'&color='+elcolor+'&type='+type
	}).done(function(result) {
		alert("Saved!");
	});
}

function DeleteTag( id ) {	
	$("#tr"+id).remove();
	$.ajax({
		url : 'save_tag_element.php',
		async : false,
		type : 'POST',
		data : 'id='+id+'&type=delete'
	}).done(function(result) {
		alert("Saved!");
	});
}


$(document).on("click", "[name=tdName]", function () {
	if ( $("#input"+this.id).length > 0 ) {
		return;
	}
	var startPageValue = this.innerHTML;
	this.innerHTML="";
	var newTextBox = document.createElement("input");
	newTextBox.id = "input"+this.id;
	newTextBox.setAttribute("name","inputName");
	newTextBox.setAttribute("onfocus","this.select()");
	newTextBox.setAttribute("size","20");
	this.appendChild(newTextBox).value=startPageValue;
	
	$("#input"+this.id).focus();
} );

$(document).on("click", "[name=tdTag]", function () {
	if ( $("#input"+this.id).length > 0 ) {
		return;
	}
	var startPageValue = this.innerHTML;
	this.innerHTML="";
	var newTextBox = document.createElement("input");
	newTextBox.id = "input"+this.id;
	newTextBox.setAttribute("name","inputTag");
	newTextBox.setAttribute("onfocus","this.select()");
	newTextBox.setAttribute("size","20");
	this.appendChild(newTextBox).value=startPageValue;
	
	$("#input"+this.id).focus();
} );

$(document).on("keypress", "[name=tdName]", function () {
	if (event.keyCode == 13) {
		$(this).focusout();
	}
});

$(document).on("keypress", "[name=tdTag]", function () {
	if (event.keyCode == 13) {
		$(this).focusout();
	}
});

$(document).on("focusout", "[name=tdName]", function () {
	var value=$("#input"+this.id).val();
	$(this).html($(this).html() + value);
	$("#input"+this.id).remove();
});

$(document).on("focusout", "[name=tdTag]", function () {
	var value=$("#input"+this.id).val();
	$(this).html($(this).html() + value);
	$("#input"+this.id).remove();
});

addNode( "AddTag","","","" );
addNode( "ID","Name","Tag","Color" );


<?php 
foreach ( $taglistArray as $tagId => $tagArray ) {
	echo "addNode( \"".$tagId."\",\"".$tagArray[0]."\",\"".$tagArray[1]."\",\"".$tagArray[2]."\" );\n";
}
?>


</script>
</body>
</html>