feat: Game summary window, now showing all your sessions

src/scripts/mainWindow.js

@@ -38,6 +38,8 @@ function loadLatestSessions() {
   db.getSessions(function (_rows) {
     let gameSessionTable = document.querySelector("#sessionStats");
 
+    let allSessionTable = document.querySelector("#summaryStats");
+
     let topGameTitle = document.querySelector("#topGameTitle");
     let topGameTime = document.querySelector("#topGameTime");
 
@@ -48,11 +50,13 @@ function loadLatestSessions() {
     gameSessionTable.innerHTML = "";
     gameStarts.innerHTML = "";
     weekSummary.innerHTML = "";
+    allSessionTable.innerHTML = "";
 
     if (_rows.length == 0) {
       let noGames = document.createElement("tr");
       noGames.innerHTML = `<td colspan="3" class="text-center" style="height: 305px; vertical-align: middle;"><em>No played games so far</em></td>`;
       gameSessionTable.appendChild(noGames);
+      allSessionTable.appendChild(noGames);
 
       gameStarts.innerHTML = "<em>You have not played any games yet</em>";
       weekSummary.innerHTML = "No data tracked yet, play some games! :)";
@@ -156,6 +160,32 @@ function loadLatestSessions() {
         totalTimeByTime[0][1].totalTime
       )}`;
 
+      let allGamesArray = sortDictionaryByPropertyAlphabetically(
+        gameStartItems,
+        "gameTitle",
+        true
+      );
+
+      console.log(allGamesArray);
+
+      for (let game of allGamesArray) {
+        let _game = game[1];
+
+        let totalGameTime = _game.sessions
+          .map((s) => getTimeDifference(s.startDate, s.endDate))
+          .reduce((a, b) => a + b);
+
+        let row = document.createElement("tr");
+        row.innerHTML = `
+        <td>${shorten(_game.gameTitle, 50)}</td>
+        <td class="text-right" style="width: 60px;">${_game.startCount}</td>
+        <td class="text-right" style="width: 120px;">${outputTimesObjectFromDifference(
+          totalGameTime
+        )}</td>`;
+
+        allSessionTable.appendChild(row);
+      }
+
       window.gameStartItems = gameStartItems;
 
       let allSessions = Object.keys(gameStartItems).flatMap(function (key) {

src/scripts/utils.js

@@ -31,6 +31,25 @@ function sortDictionaryByProperty(dictionary, property, ascending) {
   return items;
 }
 
+function sortDictionaryByPropertyAlphabetically(
+  dictionary,
+  property,
+  ascending
+) {
+  let internal = sortDictionaryByProperty(dictionary, property, ascending);
+
+  var keys = internal.map((v) => v[0]).sort();
+
+  let newItems = [];
+  for (let key of keys) {
+    newItems.push([key, internal.filter((v) => v[0] == key)[0][1]]);
+  }
+
+  console.log(newItems);
+
+  return newItems;
+}
+
 /**
  * Outputs a date in YYYY-MM-DD format
  * @param {Date} date

src/scss/main-window.scss

@@ -90,3 +90,7 @@ body {
   padding-right: 1rem;
   background-color: var(--default-backgroundcolor) !important;
 }
+
+.fade {
+  transition: opacity 0.08s;
+}

windows/main-window.html

@@ -172,19 +172,20 @@ <h4 class="card-title" id="topGameTitle">{topGameTitle}</h4>
             <div class="col-12 pt-2">
               <div
                 class="card text-white border-secondary mb-3"
-                style="min-height: 649px; max-height: 649px"
+
               >
                 <div class="card-header">
                   Summary of all your sessions, per game
                 </div>
-                <div class="card-body">
+                <div class="card-body" style="min-height: 609px; max-height: 609px">
                   <div class="gameSummaryData">
                     <table
                       class="table table-striped table-small table-dark table-bordered table-sm"
                     >
                       <thead class="thead-dark">
                         <tr>
                           <th>Game</th>
+                          <th class="text-right">Starts</th>
                           <th class="text-right">Duration</th>
                         </tr>
                       </thead>