initial UI, pagination starts at 1 for some reason

database/records.go

@@ -62,13 +62,14 @@ func (c *DiscogsCache) GetAllRecords(ctx context.Context) ([]media.Record, error
 func (c *DiscogsCache) fetchRecords(ctx context.Context, pagination *discogs.Pagination) ([]media.Record, error) {
 	records := []media.Record{}
 	if pagination == nil {
-		pagination = getPagination(0)
+		pagination = getPagination(1)
 	}
 	log.Printf("calling discogs API, page %v", pagination.Page)
 	coll, err := c.client.CollectionItemsByFolder(c.username, 0, pagination)
 	if err != nil {
 		return records, fmt.Errorf("error loading collection: %w", err)
 	}
+	log.Printf("length: %v, first item in list: %s", len(coll.Items), coll.Items[0].BasicInformation.Title)
 	for i := range coll.Items {
 		records = append(records, collectionItemToRecord(&coll.Items[i]))
 	}

frontend/files/index.html

@@ -22,6 +22,7 @@
     <div class="wrapper">
       <div id="header">
         <h1>Library</h1>
+        <a href="/records">records</a>
         <a
           target="_blank"
           rel="noreferrer"

frontend/files/records/app.js

@@ -0,0 +1,168 @@
+var sortState = {
+  sortBy: "sortArtist",
+  sortOrder: "asc",
+};
+
+function init() {
+  fetch("/api/records")
+    .then((response) => response.json())
+    .then((records) => {
+      // prepare response
+      records.forEach(apiResponseParsing);
+      document.getElementById("search").addEventListener("input", (e) => {
+        renderTable(search(records, e.target.value));
+      });
+      renderTable(records);
+    });
+}
+
+function renderTable(records, sortField) {
+  if (sortField) {
+    if (sortState.sortBy === sortField && sortState.sortOrder === "asc") {
+      sortState.sortOrder = "desc";
+    } else {
+      sortState.sortOrder = "asc";
+    }
+    sortState.sortBy = sortField;
+  }
+  records.sort((one, two) =>
+    (one[sortState.sortBy] + one["sortName"]).localeCompare(
+      two[sortState.sortBy] + two["sortName"]
+    )
+  );
+  if (sortState.sortOrder === "desc") {
+    records.reverse();
+  }
+  records.forEach((e, i) => (e.rowNumber = i)); // re-key
+
+  // rendering
+  var recordElement = document.getElementById("records");
+  recordElement.innerHTML = TableTemplate(records);
+
+  // add listeners for selecting record to view
+  Array.from(recordElement.querySelectorAll("tbody tr"))
+    .slice(1) // remove header from Array
+    .forEach((row) => {
+      row.addEventListener("click", (e) => {
+        // add listener to swap current record
+        document.getElementById("current").innerHTML = RecordTemplate(
+          records[e.currentTarget.id]
+        );
+      });
+    });
+  // add sorting callbacks
+  Array.from(
+    recordElement.querySelectorAll("tbody tr th[data-sort-by]")
+  ).forEach((row) => {
+    row.addEventListener("click", function (e) {
+      renderTable(records, e.target.dataset.sortBy); // only add callback when there's a sortBy attribute
+    });
+  });
+  // mark currently active column
+  recordElement
+    .querySelector("tbody tr th[data-sort-by=" + sortState.sortBy + "]")
+    .classList.add(sortState.sortOrder);
+}
+
+function apiResponseParsing(record) {
+  record.sortName = titleCleaner(record.name);
+  return record;
+}
+
+function search(records, searchBy) {
+  searchBy = searchCleaner(searchBy);
+  if (searchBy !== "") {
+    records = records.filter(({ name, artists, genre, label, year }) => {
+      return Object.values({
+        name,
+        artists: artists.join(" "),
+        genre,
+        label,
+        year,
+      }).find((field) => searchCleaner(field).indexOf(searchBy) !== -1);
+    });
+  }
+  return records;
+}
+
+function titleCleaner(title) {
+  return title
+    .replace('"', "")
+    .replace(":", "")
+    .replace(/^(An?|The)\s/i, "");
+}
+
+function searchCleaner(str) {
+  return str
+    .toLowerCase()
+    .replaceAll('"', "")
+    .replaceAll(":", "")
+    .replaceAll("'", "")
+    .replaceAll(" ", "");
+}
+
+// AlbumName   string   `json:"name"`
+// Artists     []string `json:"artists"`
+// SortArtist  string   `json:"sortArtist"`
+// Identifier  string   `json:"identifier"`
+// Format      string   `json:"format"`
+// Genre       string   `json:"genre"`
+// Label       string   `json:"label"`
+// Year        string   `json:"year"`
+// Description string   `json:"description"`
+// CoverURL    string   `json:"coverURL"`
+// DiscogsURL  string   `json:"discogsURL"`
+
+function RecordTemplate({
+  name,
+  artists,
+  coverURL,
+  description,
+  format,
+  genre,
+  identifier,
+  label,
+  year,
+}) {
+  return `${coverURL ? `<img src="${coverURL}"/>` : ""}
+  <h1>${name}</h1>
+  <h2>${artists.join(", ")}</h2>
+  <span>${identifier}</span><br/>
+  <span>${genre}, ${label}, ${year}</span><br/>
+  <span>${format}</span>
+  <div class="description">
+    <p>${description}</p>
+  </div>`;
+}
+
+function TableRowTemplate({
+  artists,
+  identifier,
+  label,
+  rowNumber,
+  name,
+  year,
+}) {
+  return `<tr class="tRow" id="${rowNumber}">
+    <td class="name">
+      ${name}
+    </td>
+    <td class="artist">${artists.join(", ")}</td>
+    <td class="label">${label}</td>
+    <td class="identifier">${identifier}</td>
+    <td class="year">${year}</td>
+  </tr>`;
+}
+
+function TableTemplate(records) {
+  return `<table class="recordTable">
+    <tr>
+      <th data-sort-by="sortName" class="tHeader name">Name</th>
+      <th data-sort-by="sortArtist" class="tHeader artist">Artist(s)</th>
+      <th data-sort-by="label" class="tHeader label">Label</th>
+      <th data-sort-by="identifier" class="tHeader identifier">Identifier</th>
+      <th data-sort-by="year" class="tHeader year">Year</th>
+    </tr>${records.reduce((acc, record) => {
+      return acc.concat(TableRowTemplate(record));
+    }, "")} </table>`;
+}

frontend/files/records/index.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Library</title>
+    <link
+      rel="stylesheet"
+      href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link rel="stylesheet" href="style.css" />
+    <link rel="icon" href="favicon.ico" type="image/x-icon" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700&display=swap"
+      as="style"
+      rel="stylesheet preload prefetch"
+    />
+    <script type="text/javascript" src="app.js"></script>
+    <script type="text/javascript">
+      window.addEventListener("DOMContentLoaded", init);
+    </script>
+  </head>
+  <body>
+    <div class="wrapper">
+      <div id="header">
+        <h1>Records</h1>
+        <a href="/">books</a>
+        <a
+          target="_blank"
+          rel="noreferrer"
+          href="https://git.yetaga.in/alazyreader/library"
+          >git</a
+        >
+        <div id="searchBox">
+          <input
+            id="search"
+            type="text"
+            name="search"
+            placeholder="Search..."
+          />
+        </div>
+      </div>
+      <div id="current">No Record Selected</div>
+      <div id="records"></div>
+      <!-- Table goes here -->
+    </div>
+  </body>
+</html>

frontend/files/records/style.css

@@ -0,0 +1,284 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: "";
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* site CSS starts here */
+
+body {
+  overflow: hidden;
+}
+
+#header {
+  height: 30px;
+  width: calc(100vw - 20px);
+  padding: 4px 10px;
+  background-color: #f7f3dc;
+  border-bottom: 2px solid #d8d0a0;
+  font-family: "Libre Baskerville", sans-serif;
+}
+
+#header h1 {
+  font-size: xx-large;
+  display: inline;
+}
+
+#searchBox {
+  position: absolute;
+  right: 10px;
+  top: 7px;
+  text-align: right;
+  width: 400px;
+}
+
+#searchBox input {
+  width: 300px;
+  font-size: 16px;
+  background: #f9f8ed;
+  padding: 2px 5px;
+  border: none;
+  border-bottom: 2px solid #d8d0a0;
+  font-family: "Libre Baskerville", sans-serif;
+}
+
+#searchBox input:focus {
+  outline: none;
+}
+
+#searchBox input::placeholder {
+  font-family: "Libre Baskerville", sans-serif;
+  color: #d8d0a0;
+}
+
+#current {
+  background-color: #f7f3dc;
+  width: calc(40vw - 40px);
+  height: calc(100vh - 80px);
+  padding: 20px;
+  overflow: auto;
+  float: left;
+}
+
+#records {
+  width: calc(60vw - 40px);
+  height: calc(100vh - 80px);
+  padding: 20px;
+  overflow: auto;
+  float: left;
+}
+
+.recordTable th {
+  font-weight: bold;
+  text-align: left;
+  font-family: "Libre Baskerville", sans-serif;
+}
+
+.recordTable th[data-sort-by] {
+  cursor: pointer;
+}
+
+.recordTable th[data-sort-by]::after {
+  content: "\f0dc";
+  font-family: FontAwesome;
+  font-size: x-small;
+  position: relative;
+  left: 4px;
+  bottom: 2px;
+}
+
+.recordTable th.asc::after {
+  content: "\f0de";
+  font-family: FontAwesome;
+  font-size: x-small;
+  position: relative;
+  left: 4px;
+  bottom: 2px;
+}
+
+.recordTable th.desc::after {
+  content: "\f0dd";
+  font-family: FontAwesome;
+  font-size: x-small;
+  position: relative;
+  left: 4px;
+  bottom: 2px;
+}
+
+.recordTable td,
+.recordTable th {
+  padding: 5px;
+  min-width: 50px;
+}
+
+.tRow:nth-child(odd) {
+  background: #f9f8ed;
+  border-bottom: 1px solid #d8d0a0;
+}
+
+.recordTable .tRow {
+  cursor: pointer;
+}
+
+.recordTable .onLoan {
+  color: #bbb;
+}
+
+.recordTable .tRow .title {
+  font-style: italic;
+  max-width: 600px;
+}
+
+#current h1 {
+  font-size: x-large;
+  font-weight: bold;
+  font-style: italic;
+  padding: 10px 0;
+}
+
+#current h2 {
+  font-size: large;
+  padding: 7px 0;
+}
+
+#current img {
+  max-height: 400px;
+  max-width: 100%;
+  display: block;
+  margin: 0 auto;
+}
+
+#current .description p {
+  padding: 20px 0;
+}
+
+#current h1.onLoan {
+  color: #bbb;
+}
+
+#current h2.onLoan {
+  font-weight: bold;
+}