added ajax error handling; styling tweaks

danja · Jan 11, 2015 · e3c2cfc · e3c2cfc
1 parent dc63bb5
commit e3c2cfc
Show file tree

Hide file tree

Showing 7 changed files with 123 additions and 41 deletions.
diff --git a/css/common.css b/css/common.css
@@ -1,7 +1,25 @@
 #container {
     width: 75%;
     margin: 0px auto;
+    padding: 1em 1em 0em 1em;
     position: relative;
+    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
+    border-right: 1px solid lightgray;
+    border-left: 1px solid lightgray;
+}
+
+#errorbox {
+    display: block;
+    position: absolute;
+    right: 10px;
+    margin: 2px; 
+    border-radius: 10px;
+    width: 20%;
+    background-color: #f33;
+    padding: 4px;
+    text-align: center;
+    /*     font-size: 150%;
+    font-weight: bold; */
 }
 
 table {
@@ -16,39 +34,55 @@ th {
     padding: 4px;
 }
 
-a:link {
-    text-decoration: none;
+.center {
+    text-align: center;
 }
 
-a:visited {
-    text-decoration: none;
+.content {
+    margin: 0px auto;
+    position: relative;
 }
 
-a:hover {
-    text-decoration: underline;
+.byline {
+    padding: 2em;
+    /*  font-weight: bold; */
+    color: gray;
 }
+/* Form elements */
 
-a:active {
-    text-decoration: underline;
+form {
+    font-family: "Lucida Console", Monaco, monospace;
+    /*  border: 2px solid lightgray; */
 }
 
-.center {
-    text-align: center;
+fieldset {
+    border: 2px solid lightgray;
+    padding: 1em;
 }
 
-.content {
-    margin: 0px auto;
-    position: relative;
+legend {
+    font-size: 150%;
+    font-weight: bold;
 }
 
 textarea {
     display: block;
     width: 100%;
+    border: 2px solid pink;
+    font-size: 75%;
 }
 
-.byline {
-    padding: 2em;
-    font-weight: bold;
+label {
+    text-align: right;
+}
+
+input {
+    border: 2px solid pink;
+    width: 100%;
+}
+
+pre {
+    "Courier New", Courier, monospace;
 }
 
 .missing {
@@ -61,6 +95,23 @@ label {
     font-weight: bold;
 }
 
+a:link {
+    text-decoration: none;
+}
+
+a:visited {
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+a:active {
+    text-decoration: underline;
+}
+/* Spinner */
+
 .spinner {
     height: 60px;
     width: 60px;

diff --git a/edit.html b/edit.html
@@ -33,6 +33,7 @@
         var getPageUrl = sparqlQueryEndpoint + encodeURIComponent(getPageSparql) + "&output=xml";
 
         $(function () {
+            setupErrorHandling();
             spinner();
 
             var doneCallback = function (xml, pageURI) {
@@ -46,9 +47,9 @@
                     entry.title = split[split.length - 1];
                     entry.title = decodeURI(entry.title);
                     entry.content = "enter content here";
-                    entry.nick="danja";
+                    entry.nick = "danja";
                 }
-             //   console.log("done=" + JSON.stringify(entry));
+                //   console.log("done=" + JSON.stringify(entry));
                 entryHTML += formatEntry(entry);
                 $("#entry").replaceWith(entryHTML);
                 // put data in versioned here
@@ -123,12 +124,15 @@
             var editEntryTemplate = "<div class='entry'> \
             <h1 class='center'><a href=\"${uri}\">${title}</a></h1> \
             <form> \
+  <fieldset> \
+        <legend>Edit Post</legend>\
             <label for='title'>Title</label> \
             <input id='title' type='text' value='${title}'></input> \
             <label for='content'>Content</label> \
-            <textarea class='content' id='content' rows='10'>${content}</textarea> \
+            <textarea class='content' id='content' rows='20'>${content}</textarea> \
             <label for='nick'>Nick</label> \
             <input id='nick' type='text' value='${nick}'></input> \
+ </fieldset> \
             </form> \
             </div>";
             return templater(editEntryTemplate, entry);
@@ -140,8 +144,8 @@ <h1 class='center'><a href=\"${uri}\">${title}</a></h1> \
 
 <body>
     <div id="container">
-
-        <div class="center"><a href="index.html">FuWiki</a>
+         <div id="errorbox"></div>
+        <div><a href="index.html">Page Index</a>
         </div>
 
         <div id="entry"></div>

diff --git a/index.html b/index.html
@@ -27,10 +27,12 @@
         var getPagesUrl = sparqlQueryEndpoint + encodeURIComponent(getPageListSparql) + "&output=xml";
 
         $(function () {
+            setupErrorHandling();
+            spinner();
+
             $("#graphName").attr("value", graphURI);
             setupButtons();
-            spinner();
-
+
             var doneCallback = function (xml) {
                 var rows = "";
                 var entryArray = xmlToEntryArray(xml);
@@ -81,6 +83,7 @@
 
 <body>
     <div id="container">
+        <div id="errorbox"></div>
         <table id="pagesTable">
             <tr>
                 <th colspan="3"><a href="index.html">FuWiki</a> Pages</th>
@@ -111,4 +114,5 @@ <h3>Upload RDF</h3>
         <div id="spinner" class="spinner"></div>
     </div>
 </body>
+
 </html>
diff --git a/js/core.js b/js/core.js
@@ -12,15 +12,16 @@
 
      }).done(function (xml) {
          var pageURI = queryString["uri"];
-            pageURI = encodeURI(pageURI);
+         pageURI = encodeURI(pageURI);
          doneCallback(xml, pageURI);
-     });
+     })
+       ;
  }
 
  function xmlToEntry(xml, pageURI) {
-     
-     console.log("XML = "+xml);
-     
+
+     console.log("XML = " + xml);
+
      var xmlString = (new XMLSerializer()).serializeToString(xml);
 
      // workaround for wrong interpretation of charset
@@ -57,9 +58,9 @@
              entry.nick = $(this).text().trim();
          });
 
-      //   entry += formatEntry(uri, date, title, content, nick);
+         //   entry += formatEntry(uri, date, title, content, nick);
      });
-     
+
      return entry;
  }
 
@@ -71,7 +72,7 @@
      // maybe force to ISO-8859-1, also known as Latin-1 instead?
 
      var $xml = $(xmlString);
-     var entryArray= [];
+     var entryArray = [];
 
      $xml.find("result").each(function () {
          var entry = {};
@@ -92,7 +93,7 @@
              entry.nick = $(this).text().trim();
          });
          entryArray.push(entry);
-    //     rows += formatPageRow(uri, date, title, nick); // content, 
+         //     rows += formatPageRow(uri, date, title, nick); // content, 
      });
      return entryArray;
  }
diff --git a/js/utils.js b/js/utils.js
@@ -11,6 +11,24 @@
             });
         }
 
+        function setupErrorHandling() {
+
+            $("#errorbox").hide();
+            $("#errorbox").click(function () {
+                $("#errorbox").toggle(500);
+                //  $("#errorbox").hide();
+            });
+
+            $.ajaxSetup({
+                error: function (x, status, error) {
+                    $("#errorbox").text(status + ": " + error);
+                    $("#errorbox").toggle(500);
+                    // $("#errorbox").toggle(2000);
+                }
+            });
+
+        }
+
         /* ultra-simple templating engine
          * replacementMap contains { "name": value, ... }
          * every instance of ${name} in template gets replaced with value
@@ -56,8 +74,8 @@
                         var hashPosition = this.href.indexOf("#");
                         if (hashPosition != -1) {
                             var anchor = this.href.substring(hashPosition); // "#Something"
-                            
-                            anchor = anchor.toLowerCase().replace(/^\s+|\s+$/g,"");
+
+                            anchor = anchor.toLowerCase().replace(/^\s+|\s+$/g, "");
                             //.replace(/\w+/g, '-')
                             console.log("anchor = " + anchor);
 
@@ -90,11 +108,11 @@
                 var length = id.length;
                 if (id[0] == "-" && id[length - 1] == "-") {
                     //      console.log("need to fix");
-                    id = id.substring(1, length/2);
+                    id = id.substring(1, length / 2);
                     $(this).attr("id", id);
                 }
-            //    console.log("ID = " + id);
-                
+                //    console.log("ID = " + id);
+
             });
         }
 

diff --git a/page.html b/page.html
@@ -23,6 +23,8 @@
 
     <script type="text/javascript" language="javascript">
         $(function () {
+
+            setupErrorHandling();
             spinner();
 
             var pageURI = queryString["uri"];
@@ -95,7 +97,8 @@ <h1 class='center'><a href=${uri}>${title}</a></h1> \
 
 <body>
     <div id="container">
-        <div colspan="8" class="center"><a href="index.html">FuWiki</a>
+        <div id="errorbox"></div>
+        <div><a href="index.html">Page Index</a>
         </div>
 
         <div id="entry"></div>

diff --git a/run.html b/run.html
@@ -69,7 +69,7 @@
                 window.location.href = window.location.href.replace("run.html", "edit.html");
                 return false;
             });
-              
+
         });
 
         function formatEntry(entry) {
@@ -87,7 +87,7 @@ <h1 class='center'><a href=${uri}>${title}</a></h1> \
         }
     </script>
 
-    
+
     <!-- script id="targetScript" type="text/javascript" language="javascript">
 function HelloWorld2() {
    console.log("CALLED");
@@ -98,7 +98,8 @@ <h1 class='center'><a href=${uri}>${title}</a></h1> \
 
 <body>
     <div id="container">
-        <div colspan="8" class="center"><a href="index.html">FuWiki</a>
+        <div id="errorbox"></div>
+        <div><a href="index.html">Page Index</a>
         </div>
 
         <div id="entry"></div>