Progress

templates/user_dashboard.html

@@ -0,0 +1 @@
+<a href="/user/feeds">Edit Subscriptions</a>

templates/user_feeds.html

@@ -0,0 +1,135 @@
+<div id="all_sources_container"></div>
+<form name="feed_subscriptions" action="/user/updatesubscriptions" onsubmit="updateSubscriptionValue()">
+  <input id="user_feeds" type="hidden" name="user_feeds" value="" />
+  <button type="submit">Save</button>
+</form>
+<script>
+var user_feeds = [
+{{ range $i, $v := .TemplateData.User.SubSlugs }}
+  "{{$v}}",
+{{ end }}
+];
+
+var all_feeds = [
+{{ range $i, $v := .TemplateData.FeedSources }}
+  {{ range $vi, $vf := $v.Feeds }}
+    {
+      "name": "{{$vf.Name}}",
+      "author": "{{$vf.Author}}",
+      "slug": "{{$vf.Slug}}",
+      "source": "{{$vf.Source}}",
+      "desc": "{{$vf.Desc}}",
+      "last_update": "{{$vf.LastUpdate}}"
+    },
+  {{ end }}
+{{ end }}
+];
+
+function init() {
+  var sourcesContainer = document.getElementById("all_sources_container");
+  var sources = [];
+  for(var i = 0; i < all_feeds.length; i++) {
+    if(sources.indexOf(all_feeds[i].source) < 0) {
+      sources.push(all_feeds[i].source)
+    }
+  }
+  for(var i = 0; i < sources.length; i++) {
+    sourcesContainer.appendChild(createFeedSourceTable(sources[i]));
+  }
+}
+
+function createFeedSourceTable(source) {
+  var sourceContainer = document.createElement("div");
+  var sourceTitle = document.createElement("h1");
+  sourceTitle.innerText = source+"  ";
+  sourceContainer.appendChild(sourceTitle);
+  var table = document.createElement("table");
+  table.classList.add("pure-table","pure-table-bordered","center-all","hidden");
+  var thead = document.createElement("thead");
+  var thtr = document.createElement("tr");
+  var thChk = document.createElement("th");
+  var thn = document.createElement("th");
+  thn.innerText = "Name";
+  var tha = document.createElement("th");
+  tha.innerText = "Author";
+  var thl = document.createElement("th");
+  thl.innerText = "Last Update";
+  thtr.appendChild(document.createElement("th"));
+  for(var i = 0; i < all_feeds.length; i++) {
+    if(all_feeds[i].source == source) {
+      table.appendChild(createFeedTableRow(all_feeds[i]));
+    }
+  }
+  sourceContainer.appendChild(table);
+  var sourceShow = document.createElement("a");
+  sourceShow.style["color"] = "blue";
+  sourceShow.style["cursor"] = "pointer";
+  sourceShow.innerText = "v";
+  sourceShow.onclick = function() {
+    if(table.classList.contains("hidden")) {
+      sourceShow.innerText = "^";
+    } else {
+      sourceShow.innerText = "v";
+    }
+    table.classList.toggle("hidden");
+  }
+  sourceTitle.appendChild(sourceShow);
+  sourceContainer.style["margin-bottom"] = "2em";
+
+  return sourceContainer;
+}
+
+function createFeedTableRow(feedItem) {
+  var row = document.createElement("tr");
+  var chkCell = document.createElement("td");
+  var chkBox = document.createElement("input");
+  chkBox.setAttribute("type", "checkbox");
+  chkBox.setAttribute("data-slug", feedItem["source"]+";"+feedItem["slug"]);
+  chkBox.onclick = function() {
+    toggleSubscription(this.getAttribute("data-slug"));
+  }
+  if(user_feeds.indexOf(feedItem["source"]+";"+feedItem["slug"]) >= 0) {
+    chkBox.checked = true;
+  }
+  chkCell.append(chkBox);
+  row.append(chkCell);
+  var nameCell = document.createElement("td");
+  nameCell.innerText = feedItem["name"];
+  row.append(nameCell);
+  var authCell = document.createElement("td");
+  authCell.innerText = feedItem["author"];
+  row.append(authCell);
+  var updCell = document.createElement("td");
+  updCell.innerText = feedItem["last_update"];
+  row.append(updCell);
+  return row;
+}
+
+function toggleSubscription(slug) {
+  if(user_feeds.indexOf(slug) >= 0) {
+    user_feeds.splice(user_feeds.indexOf(slug), 1);
+  } else {
+    user_feeds.push(slug);
+  }
+  updateSubscriptionValue();
+}
+
+function getSubRow(slug) {
+  return document.getElementById("row_"+slug.replace(";","_"));
+}
+function updateSubscriptionTable() {
+  for(var i = 0; i < user_feeds.length; i++) {
+    var row = getSubRow(user_feeds[i]);
+    if(row) {
+      row.getElementsByTagName("input")[0].checked = true;
+    }
+  }
+}
+
+function updateSubscriptionValue() {
+  document.getElementById("user_feeds").value = user_feeds;
+}
+
+init();
+updateSubscriptionTable();
+</script>