cleanup and new features

* display of single picture * "all" button to go back to display no tags * show which tags are displayed * page index works with tags and without tags
author: Arun Persaud <arun@nubati.net> 2012-01-22 23:38:29 -0800
committer: Arun Persaud <apersaud@lbl.gov> 2012-01-22 23:54:02 -0800
commit: 79761af3ff298c01b9892a3f7e6cd94a325b9005 (patch)
tree: ca31cff45effdfdc96010a08eb9cf1a4aa2bdee9
parent: b3eb20491bf1d943d336c994c8a027836ff1f9eb (diff)
download: photo-tags-79761af3ff298c01b9892a3f7e6cd94a325b9005.tar.gz
photo-tags-79761af3ff298c01b9892a3f7e6cd94a325b9005.tar.bz2
photo-tags-79761af3ff298c01b9892a3f7e6cd94a325b9005.zip
3 files changed, 201 insertions, 118 deletions
diff --git a/getjson.php b/getjson.php
index d9b0891..83360e6 100644
--- a/getjson.php
+++ b/getjson.php
@@ -22,9 +22,14 @@ if (isset($_REQUEST["S"]))
     $tag = sqlite_escape_string($_REQUEST["S"]);
 
     $result = $DB->query("SELECT name FROM tags");
-    $count = $DB->query("SELECT 1");
   }
-else
+ else if (isset($_REQUEST["ID"]))
+  {
+    $id  = intval($_REQUEST["ID"]);
+    $result = $DB->query("SELECT base_uri, filename, id FROM photos".
+			 " WHERE id=$id");
+  }
+ else
   {
     if (isset($_REQUEST["P"]))
       $OFFSET = "".(intval($_REQUEST["P"])*$N-$N);
@@ -37,6 +42,7 @@ else
 	$tags = $_REQUEST["T"];
 	$tags = explode(",",$tags);
 	$nrtags = count($tags);
+
 	foreach ($tags as $key => $value)
 	  $tags[$key]=sqlite_escape_string(trim($value));
 	$tags = "'".implode("','",$tags)."'";
@@ -47,24 +53,32 @@ else
 	 a good explanation on different ways of doing this can be found at:
 	 http://www.pui.ch/phred/archives/2005/04/tags-database-schemas.html
 	*/
-	$result = $DB->query("SELECT base_uri, filename  FROM photo_tags pt, photos p, tags t".
-			     " WHERE pt.tag_id = t.id".
-			     " AND (t.name COLLATE NOCASE IN ($tags))".
-			     " AND p.id = pt.photo_id ".
-			     " GROUP BY p.id HAVING COUNT( p.id )=$nrtags".
-			     "    LIMIT $OFFSET, $N");
-
-	$count = $DB->query("SELECT count(*) as total  FROM photo_tags pt, photos p, tags t".
-			     " WHERE pt.tag_id = t.id".
-			     " AND (t.name COLLATE NOCASE IN ($tags))".
-			     " AND p.id = pt.photo_id ".
-			     " GROUP BY p.id HAVING COUNT( p.id )=$nrtags".
-			     "    LIMIT $OFFSET, $N");
+
+	if (isset($_REQUEST["C"]))
+	  {
+	    $result = $DB->query("SELECT count(*) as total from (SELECT p.id FROM photo_tags pt, photos p, tags t".
+				" WHERE pt.tag_id = t.id".
+				" AND (t.name COLLATE NOCASE IN ($tags))".
+				" AND p.id = pt.photo_id ".
+				" GROUP BY p.id HAVING COUNT( p.id )=$nrtags)");
+	  }
+	else
+	  {
+	    $result = $DB->query("SELECT base_uri, filename, p.id as id  FROM photo_tags pt, photos p, tags t".
+				 " WHERE pt.tag_id = t.id".
+				 " AND (t.name COLLATE NOCASE IN ($tags))".
+				 " AND p.id = pt.photo_id ".
+				 " GROUP BY p.id HAVING COUNT( p.id )=$nrtags".
+				 "    LIMIT $OFFSET, $N");
+
+	  }
       }
     else
       {
-	$result = $DB->query("SELECT * FROM photos LIMIT $OFFSET, $N");
-	$count = $DB->query("SELECT count(*) as total FROM photos");
+	if (isset($_REQUEST["C"]))
+	  $result = $DB->query("SELECT count(*) as total FROM photos");
+	else
+	  $result = $DB->query("SELECT * FROM photos LIMIT $OFFSET, $N");
       }
   }
 
@@ -83,24 +97,7 @@ else
   }
 $result=$tmp;
 
-/* encode count as an array */
-$tmp=array();
-if(!$usePDO)
-  {
-    /* convert results into array */
-    while($res = $count->fetchArray(SQLITE3_ASSOC))
-      $tmp[]=$res;
-  }
-else
-  {
-    foreach($count as $res)
-      $tmp[]=$res;
-  }
-$count=$tmp;
-
-$return=array($count,$result);
-
-echo json_encode($return);
+echo json_encode($result);
 
 /* close the database */
 if($usePDO)
diff --git a/index.php b/index.php
index 5ee661f..82378b4 100644
--- a/index.php
+++ b/index.php
@@ -19,7 +19,15 @@ if(isset($_REQUEST["tag"]))
 else
   $tags = "";
 
+if(isset($_REQUEST["pic"]))
+  $pic = intval(htmlentities($_REQUEST["pic"]));
+else
+  $pic = -1;
+/* end parse flags */
+
+/* The basic layout */
 ?>
+
 <html>
 <title><?php echo htmlspecialchars($title) ?></title>
 <script src="<?php echo $webbase?>/d3.min.js"></script>
@@ -31,20 +39,24 @@ else
 <div class="debug">test</div>
 <h1><?php echo htmlspecialchars($title) ?></h1>
 
-<button class="prev" disabled="disabled" onclick="left()"> prev </button>
-<button class="next"   onclick="right()">next </button>
+<nav>
+<span class="index"></span>
+<button class="prev" type="button" disabled="disabled" onclick="left()"> prev </button>
+<button class="next" type="button" onclick="right()">next </button>
+<button class="all"  type="submit" onclick="document.location.href='<?php echo $webbase?>'">all</button>
+</nav>
 
 <div class="permalink"></div>
 
 <div class="tagsearch">
 <form method="get" action="">
- Tags: <input list="MyTags" id="MyTagsInput" type="text" value="" />
+ Add tag: <input list="MyTags" id="MyTagsInput" type="text" value="" />
   <datalist id="MyTags">
   </datalist>
 </form>
+  Current tags:<span id="currenttags"></span>
 </div>
 
-<div class="index"></div>
 <div class="pics"> </div>
 
 <footer>
@@ -60,6 +72,7 @@ var pics = d3.select(".pics").append("ul");
 var page=<?php echo $page ?>;
 var N=<?php echo $N ?>;
 var T="<?php echo $tags ?>";
+var ID=<?php echo $pic ?>;
 var count=0;
 
 /* populate data list with tags*/
@@ -73,102 +86,102 @@ d3.select("input").on("keyup", function(d) {
     d3.select('form').attr("action","<?php echo $webbase?>/tag/"+document.getElementById('MyTagsInput').value.replace(" ","+"));
 });
 
-function myreload(a) {
-  d3.select(".debug").text("T,P,N ="+T+" "+a+" "+N);
-
-  if(T!="")
+if (T!="")
+  {
+    var mycurrenttags = T.split(",");
+
+    d3.select("#currenttags").select("button").remove();
+    d3.select("#currenttags").selectAll("button")
+      .data(mycurrenttags).enter()
+      .append("button").attr("type","button").text( function(d) {return d;} );
+  }
+ else
+  {
+    d3.select("#currenttags").select("button").remove();
+    d3.select("#currenttags").append("span").text( ' none');
+  };
+
+function load_content(a) {
+  //  d3.select(".debug").text("T,P,N = *"+T+"* *"+a+"* *"+N+"*");
+
+  update_page_index(a);
+
+  if (ID>=0)
+    url = "<?php echo $webbase?>/getjson.php?ID="+ID;
+  else if(T!="")
     url = "<?php echo $webbase?>/getjson.php?T="+T+"&P="+a;
   else
     url = "<?php echo $webbase?>/getjson.php?P="+a;
 
+  /* update pics */
   d3.json(url, function(json) {
+      count=0;
+      pics.selectAll("li").remove();
+      picdata=json;
 
-      /* update index, show only page +-5 pages max */
-      n = Math.floor(json[0][0].total/N);
-      s = "";
-
-      if(n>1)
+      /* if ID is set, just show one pictures, else create an array of pictures */
+      if (ID>=0)
+	{
+	  pics.selectAll("li").data(picdata)
+	    .enter().append("li")
+	    .append("img")
+	    .attr("class","large")
+	    .attr("src",function(d) {
+		s= d.base_uri+'/'+d.filename;
+		s = s.replace('file:\/\/<?php echo "".str_replace("/","\/",$dbprefix); ?>','<?php echo $webbase?>/Photos-small/');
+		return s;
+	      });
+	}
+      else
 	{
-	  s="page ";
-
-	  if(a>7)
-	    {
-	      s+=" <a href=\"<?php echo $webbase?>";
-	      if(T!="")
-		s+="/tag/"+T;
-	      s+="/page/1\">1</a>...";
-	      start = a-5;
-	    }
-	  else
-	    start=1;
-
-	  for(i=start;i<=Math.min(n+1,a+5);i++)
-	    {
-	      if(i==a)
-		s+= " "+i+" ";
-	      else
-		{
-		  s+=" <a href=\"<?php echo $webbase?>";
-		  if(T!="")
-		    s+="/tag/"+T;
-		  s+="/page/"+i+"\">"+i+"</a>";
-		}
-	    }
-
-	  if(a+5<n)
-	    {
-	      s+="... <a href=\"<?php echo $webbase?>";
-	      if(T!="")
-		s+="/tag/"+T;
-	      s+="/page/"+(n+1)+"\">"+(n+1)+"</a>";
-	    }
-	  else if(a+5==n)
-	    {
-	      s+=" <a href=\"<?php echo $webbase?>";
-	      if(T!="")
-		s+="/tag/"+T;
-	      s+="/page/"+(n+1)+"\">"+(n+1)+"</a>";
-	    };
+	  pics.selectAll("li").data(picdata)
+	    .enter().append("li")
+	    .append("a")
+	    .attr("href",function(d) {
+		s = '<?php echo $webbase; ?>';
+		if(T!="")
+		  s = s + '/tag/' + T;
+		if(a!=1)
+		  s = s + '/page/' + a;
+		s = s + '/pic/' + d.id;
+		return s;
+	      })
+	    .append("img")
+	    .attr("src",function(d) {
+		count++;
+		s= d.base_uri+'/'+d.filename;
+		s = s.replace('file:\/\/<?php echo "".str_replace("/","\/",$dbprefix); ?>','<?php echo $webbase?>/Photos-tiny/');
+		return s;
+	      });
 	};
-      d3.select(".index").html(s);
 
-      /* update pics */
-      count=0;
-      pics.selectAll("li").remove();
-      picdata=json[1];
-      pics.selectAll("li").data(picdata)
-	.enter().append("li")
-	.append("a")
-	.attr("href",function(d) {
-	    s= d.base_uri+'/'+d.filename;
-	    s = s.replace('file:\/\/<?php echo "".str_replace("/","\/",$dbprefix); ?>','<?php echo $webbase; ?>/Photos-small/');
-	    return s;
-	  })
-	.append("img")
-	.attr("src",function(d) {
-	    count++;
-	    s= d.base_uri+'/'+d.filename;
-	    s = s.replace('file:\/\/<?php echo "".str_replace("/","\/",$dbprefix); ?>','<?php echo $webbase?>/Photos-tiny/');
-	    return s;
-	  });
-      checkbutton();
+     checkbutton();
     });
 
-  permalink="<?php echo $webbase ?>/page/"+page;
+  /* update permalink */
+
+  permalink="<?php echo $webbase ?>";
+  if(T!="")
+    permalink += '/tag/' + T;
+  if(a!=1)
+    permalink += '/page/' + a;
+
+
   d3.select(".permalink").html("Permalink: <a href=\""+permalink+"\">"+permalink+"</a>");
 }
 
 function left() {
   if (page>=2) page=page-1;
-  myreload(page);
+  load_content(page);
 }
 
 function right() {
   page=page+1;
-  myreload(page);
+  load_content(page);
 }
 
-function checkbutton() {
+function checkbutton()
+{
 
   if (page==1)
     { d3.select("button.prev").attr("disabled","disabled");}
@@ -181,7 +194,68 @@ function checkbutton() {
     { d3.select("button.next").attr("disabled",null);}
 }
 
-myreload(page);
+function update_page_index(mypage)
+{
+  /* load number of pictures */
+
+  if(T!="")
+    url = "<?php echo $webbase?>/getjson.php?C=1&T="+T;
+  else
+    url = "<?php echo $webbase?>/getjson.php?C=1";
+
+  d3.json(url, function(json) {
+    /* update index, show only page +-5 pages max */
+    n = Math.floor(json[0].total/N);
+    s = "";
+
+    if(n>0)
+      {
+        s="page ";
+
+        if(mypage>7)
+	  {
+	    s+=" <a href=\"<?php echo $webbase?>";
+	    if(T!="")
+	      s+="/tag/"+T;
+	    s+="/page/1\">1</a>...";
+	    start = mypage-5;
+	  }
+        else
+	  start=1;
+
+        for(i=start;i<=Math.min(n+1,mypage+5);i++)
+	  {
+	    if(i==mypage)
+	      s+= " "+i+" ";
+	    else
+	      {
+		s+=" <a href=\"<?php echo $webbase?>";
+		if(T!="")
+		  s+="/tag/"+T;
+		s+="/page/"+i+"\">"+i+"</a>";
+	      }
+	  }
+
+        if(mypage+5<n)
+	  {
+	    s+="... <a href=\"<?php echo $webbase?>";
+	    if(T!="")
+	      s+="/tag/"+T;
+	    s+="/page/"+(n+1)+"\">"+(n+1)+"</a>";
+	  }
+        else if(mypage+5==n)
+	  {
+	    s+=" <a href=\"<?php echo $webbase?>";
+	    if(T!="")
+	      s+="/tag/"+T;
+	    s+="/page/"+(n+1)+"\">"+(n+1)+"</a>";
+	  };
+      };
+    d3.select(".index").html(s);
+    } );
+}
+
+load_content(page);
 
 </script>
 
diff --git a/style.css b/style.css
index 6c25246..b81bbbb 100644
--- a/style.css
+++ b/style.css
@@ -1,5 +1,9 @@
 
-h1 {color:red}
+h1 {
+    color:red;
+    margin: 1em 0;
+    text-align: center;
+}
 body {
     background-color: black;
     color: #eee;
@@ -14,11 +18,13 @@ body {
 a[visited]{ color: #aaa;}
 
 .index {
-    margin: 0 auto;
-    width:70%;
+    margin: 0 10px;
+}
+nav {
+    text-align: center;
 }
 
-.pics li { 
+.pics li {
   display: inline;
   list-style: none;
 }
@@ -29,6 +35,12 @@ a[visited]{ color: #aaa;}
   height: 100px;
 }
 
+.pics img.large{
+  border: 1px solid white;
+  margin: 2px;
+  height: 500px;
+}
+
 footer {
   border-top: 1px solid grey;
   color: #eee;
author	Arun Persaud <arun@nubati.net>	2012-01-22 23:38:29 -0800
committer	Arun Persaud <apersaud@lbl.gov>	2012-01-22 23:54:02 -0800
commit	79761af3ff298c01b9892a3f7e6cd94a325b9005 (patch)
tree	ca31cff45effdfdc96010a08eb9cf1a4aa2bdee9
parent	b3eb20491bf1d943d336c994c8a027836ff1f9eb (diff)
download	photo-tags-79761af3ff298c01b9892a3f7e6cd94a325b9005.tar.gz photo-tags-79761af3ff298c01b9892a3f7e6cd94a325b9005.tar.bz2 photo-tags-79761af3ff298c01b9892a3f7e6cd94a325b9005.zip