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

diff --git a/getjson.php b/getjson.php
index d9b0891cdf7dab420fbee2abecf1429b512169ba..83360e6118387d957fdf4a6b139e5c079ce20ab8 100644 (file)
--- 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");
     $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);
   {
     if (isset($_REQUEST["P"]))
       $OFFSET = "".(intval($_REQUEST["P"])*$N-$N);


@@ -37,6 +42,7 @@ else
        $tags = $_REQUEST["T"];
        $tags = explode(",",$tags);
        $nrtags = count($tags);
        $tags = $_REQUEST["T"];
        $tags = explode(",",$tags);
        $nrtags = count($tags);

+

        foreach ($tags as $key => $value)
          $tags[$key]=sqlite_escape_string(trim($value));
        $tags = "'".implode("','",$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
        */
         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
       {
       }
     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;
 
   }
 $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)
 
 /* close the database */
 if($usePDO)

diff --git a/index.php b/index.php
index 5ee661ff8a40d4776d432915981650b0ab6dc643..82378b43636aa64efb5fd4ae3f8f3ea23f7049ce 100644 (file)
--- a/index.php
+++ b/index.php
@@ -19,7 +19,15 @@ if(isset($_REQUEST["tag"]))
 else
   $tags = "";
 
 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>
 <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>
 
 <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="">
 
 <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>
   <datalist id="MyTags">
   </datalist>
 </form>

+  Current tags:<span id="currenttags"></span>

 </div>
 
 </div>
 

-<div class="index"></div>

 <div class="pics"> </div>
 
 <footer>
 <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 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*/
 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(" ","+"));
 });
 
     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;
 
     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) {
   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;
   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;
 }
 
 function right() {
   page=page+1;

-  myreload(page);
+  load_content(page);

 }
 
 }
 

-function checkbutton() {
+function checkbutton()
+{

 
   if (page==1)
     { d3.select("button.prev").attr("disabled","disabled");}
 
   if (page==1)
     { d3.select("button.prev").attr("disabled","disabled");}


@@ -181,7 +194,68 @@ function checkbutton() {
     { d3.select("button.next").attr("disabled",null);}
 }
 
     { 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>
 
 
 </script>
 

diff --git a/style.css b/style.css
index 6c25246b87d914593d1b16b761f0cb2a306d6c69..b81bbbbbfa910b22e07d36c00ce1bcc2eec1b0d6 100644 (file)
--- 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;
 body {
     background-color: black;
     color: #eee;


@@ -14,11 +18,13 @@ body {
 a[visited]{ color: #aaa;}
 
 .index {
 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;
 }
   display: inline;
   list-style: none;
 }


@@ -29,6 +35,12 @@ a[visited]{ color: #aaa;}
   height: 100px;
 }
 
   height: 100px;
 }
 

+.pics img.large{
+  border: 1px solid white;
+  margin: 2px;
+  height: 500px;
+}
+

 footer {
   border-top: 1px solid grey;
   color: #eee;
 footer {
   border-top: 1px solid grey;
   color: #eee;