ribbit/templates/user_feeds.html

<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>