From 97ab91f57e7836a17c34957683b88882e441aa5c Mon Sep 17 00:00:00 2001
From: Colin Halseth <qkmaxware@gmail.com>
Date: Fri, 14 May 2021 12:12:58 -0700
Subject: [PATCH] Better looking log system with print-to-pdf features

---
 .../Pages/ManageLogs.razor                    | 133 ++++++++++--------
 .../Shared/AssetAddList.razor                 |   3 +
 TrekSharp.AdventureTools/wwwroot/css/app.css  |  10 ++
 TrekSharp.AdventureTools/wwwroot/index.html   |  33 ++++-
 .../wwwroot/service-worker.published.js       |   7 +
 .../wwwroot/site.webmanifest                  |   1 -
 TrekSharp/src/Rulebooks/OperationsDivision.cs |   2 -
 TrekSharp/src/Rulebooks/ScienceDivision.cs    |   2 -
 8 files changed, 126 insertions(+), 65 deletions(-)

diff --git a/TrekSharp.AdventureTools/Pages/ManageLogs.razor b/TrekSharp.AdventureTools/Pages/ManageLogs.razor
index f048245..2531041 100644
--- a/TrekSharp.AdventureTools/Pages/ManageLogs.razor
+++ b/TrekSharp.AdventureTools/Pages/ManageLogs.razor
@@ -2,6 +2,9 @@
 @page "/manage/logs"
 @using System.Globalization
 
+<PrintNotification></PrintNotification>
+
+<div class="no-print">
 <LCARS Title="LOG ENTRIES">
     @if (compose) {
         <div class="w3-col" style="width: 50px">
@@ -9,73 +12,87 @@
         </div>
         <Quicklog OnLogRecorded=@(() => { compose = false; StateHasChanged(); })></Quicklog>
     } else {
-        @if (viewedEntry == null) {
-        <div class="w3-padding">
+    <div class="w3-row">
+        <div class="w3-half w3-border-right" style="max-height: 50vh; overflow: auto;">
             <input type="text" placeholder="search logs" @bind="filter" style="width: 100%;"/>
             <div class="w3-row">
-                <button class="w3-col s6 w3-button @(!flaggedOnly ? "w3-blue" : "w3-black")" style="border-radius: 0; font-size: medium;" @onclick=@(() => flaggedOnly = false)>All</button>
-                <button class="w3-col s6 w3-button @(flaggedOnly ? "w3-blue" : "w3-black")" style="border-radius: 0; font-size: medium;" @onclick=@(() => flaggedOnly = true)>Flagged</button>
-            </div>
-            <div class="w3-right-align">
-                <button class="w3-margin" @onclick=@(() => compose = true)>Record Log</button>
+                <button class="w3-col s6 w3-button @(!flaggedOnly ? "w3-text-blue" : "w3-text-white")" style="background-color: inherit; border-radius: 0; font-size: medium;" @onclick=@(() => flaggedOnly = false)>All</button>
+                <button class="w3-col s6 w3-button @(flaggedOnly ? "w3-text-blue" : "w3-text-white")" style="background-color: inherit; border-radius: 0; font-size: medium;" @onclick=@(() => flaggedOnly = true)>Flagged</button>
             </div>
+            @{
+                string stardate = null;
+                foreach (var entry in Data.Logs.Enumerate()) {
+                    var capture = entry;
+                    if((!flaggedOnly || capture.Flagged) && (string.IsNullOrEmpty(filter) || CultureInfo.InvariantCulture.CompareInfo.IndexOf(capture.Content, filter, CompareOptions.IgnoreCase) >=0 )) {
+                        var printed_stardate = capture.Stardate.ToString("0.0#");
+                        if (printed_stardate != stardate) {
+                            stardate = printed_stardate;
+                            <div class="w3-grey w3-padding">
+                                <b>@stardate</b>
+                            </div>
+                        }
+                        <div class="w3-margin-left w3-padding w3-display-container">
+                            <button class="no-lcars w3-button w3-block w3-left-align" style="background-color:inherit;" @onclick=@(() => viewedEntry = capture)>
+                                @capture.ExcerptString()
+                            </button>
+                            <div class="w3-display-topright">
+                                <button class="w3-button no-lcars" style="background-color:transparent;" @onclick=@(() => capture.Flagged = !capture.Flagged)>
+                                    @if (capture.Flagged) {
+                                        <img src="assets/flag_filled.png" width=12 height=12>
+                                    } else {
+                                        <img src="assets/flag_empty.png" width=12 height=12>
+                                    }
+                                </button>
+                                <button class="w3-button no-lcars w3-text-red" style="background-color:transparent;" @onclick=confirmDeleteCurrent>
+                                    &times;
+                                </button>
+                            </div>
+                        </div>
+                    }
+                }
+            }
         </div>
-        @if (Data.Logs.Count > 0) {
-            <hr>
-        }
-        <ul class="w3-ul w3-hoverable">
-        @foreach (var entry in Data.Logs.Enumerate()) {
-            if((!flaggedOnly || entry.Flagged) && (string.IsNullOrEmpty(filter) || CultureInfo.InvariantCulture.CompareInfo.IndexOf(entry.Content, filter, CompareOptions.IgnoreCase) >=0 )) {
-                var capture = entry;
-                <li class="w3-row">
-                    <div class="w3-col" style="width: 72px;">
-                        <button class="w3-black" @onclick=@(() => capture.Flagged = !capture.Flagged)>
-                            @if (capture.Flagged) {
-                                <img src="assets/flag_filled.png" width=24 height=24>
-                            } else {
-                                <img src="assets/flag_empty.png" width=24 height=24>
-                            }
-                        </button>
-                    </div>
-                    <div class="w3-rest" @onclick=@(() => viewedEntry = capture)>
-                        <b>@capture.Stardate</b>
-                        <p>
-                            @capture.ExcerptString()
-                        </p>
+        <div class="w3-half">
+            <div class="w3-right-align primary">
+                <button class="no-lcars w3-button" @onclick=@(() => compose = true)>Compose Entry</button>
+            </div>
+            @if (viewedEntry != null) {
+                <div class="w3-padding">
+                    <h4 class="w3-right-align">Stardate @viewedEntry.Stardate.ToString("0.0#")</h4>
+                    <div style="white-space: pre-line;">
+                        @viewedEntry.Content
                     </div>
-                </li>
+                </div>
             }
-        }
-        </ul>
+        </div>
+    </div>
+    }
+</LCARS>
+</div>
+<div class="print">
+   @{
+    string stardate = null;
+    int count = 0;
+    foreach (var entry in Data.Logs.Enumerate()) {
+        var capture = entry;var printed_stardate = capture.Stardate.ToString("0.0#");
+        if (printed_stardate != stardate) {
+            count = 1;
+            stardate = printed_stardate;
+            <h3>Personal Log Stardate @stardate</h3>
         } else {
-            <div class="w3-row">
-                <div class="w3-col" style="width: 50px">
-                    <button class="w3-button w3-blue w3-margin-right" style="border-radius: 0;" @onclick=@(() => viewedEntry = null)>&lt;</button>
-                </div>
-                <div class="w3-rest">
-                    <div class="w3-half w3-xlarge">
-                        STARDATE @viewedEntry.Stardate
-                    </div>
-                    <div class="w3-half w3-right-align w3-padding">
-                        <button class="w3-black" @onclick=@(() => viewedEntry.Flagged = !viewedEntry.Flagged)>
-                            @if (viewedEntry.Flagged) {
-                                <img src="assets/flag_filled.png" width=24 height=24>
-                            } else {
-                                <img src="assets/flag_empty.png" width=24 height=24>
-                            }
-                        </button>
-                        <button class="w3-red" @onclick=confirmDeleteCurrent>
-                            &times;
-                        </button>
-                    </div>
-                </div>
-            </div>
-            <div style="white-space: pre-wrap;">
-                @viewedEntry.Content
-            </div>
+            count++;
         }
+        <div class="w3-margin-left w3-display-container">
+            @if (count > 1) {
+                <h4>supplemental</h4>
+            }
+            <div class="w3-padding">
+                @capture.Content
+            </div>
+        </div>
     }
-</LCARS>
+} 
+</div>
 
 <ConfirmationDialog @ref="confirm">
 </ConfirmationDialog>
diff --git a/TrekSharp.AdventureTools/Shared/AssetAddList.razor b/TrekSharp.AdventureTools/Shared/AssetAddList.razor
index a975fb7..8b41c7b 100644
--- a/TrekSharp.AdventureTools/Shared/AssetAddList.razor
+++ b/TrekSharp.AdventureTools/Shared/AssetAddList.razor
@@ -31,6 +31,9 @@
         <p class="w3-center">
             OR
         </p>
+        <div class="w3-container">
+            Upload a JSON file describing the item to add. 
+        </div>
         <div class="w3-padding">
             <LocalFileInput Accept=".json" OnFileLoad=onFileLoaded></LocalFileInput>
         </div>
diff --git a/TrekSharp.AdventureTools/wwwroot/css/app.css b/TrekSharp.AdventureTools/wwwroot/css/app.css
index 8803330..21bb637 100644
--- a/TrekSharp.AdventureTools/wwwroot/css/app.css
+++ b/TrekSharp.AdventureTools/wwwroot/css/app.css
@@ -7,6 +7,16 @@
     padding: 8px 4px !important;
 }
 
+.notification {
+    position: fixed;
+    bottom: 12px;
+    right: 12px;
+    background-color: #404040;
+    border-radius: 6px;
+    padding: 24px;
+    z-index: 10;
+}
+
 @media (max-width:601px){
     .navbar {
         width: 100%; 
diff --git a/TrekSharp.AdventureTools/wwwroot/index.html b/TrekSharp.AdventureTools/wwwroot/index.html
index b102efd..34aaaba 100644
--- a/TrekSharp.AdventureTools/wwwroot/index.html
+++ b/TrekSharp.AdventureTools/wwwroot/index.html
@@ -24,17 +24,46 @@
 </head>
 
 <body>
+    <div id="pwa-update-notification" class="notification w3-hide">
+        A new version is available <a id="pwa-update-refresh" href="" onclick="window.location.reload();" class="w3-text-blue">REFRESH</a> <a style="text-decoration: none;" href="" onclick="hidePwaUpdate(); return false;">&times;</a>
+    </div>
     <app>
         <div class="w3-center w3-padding w3-margin-top">
             <div class="w3-large">Loading... Please Wait</div>
             If this takes longer than a few seconds than an error might have occurred
         </div>
         <div id="blazor-error-ui" class="w3-center">
-            <a href="" class="reload">Reload</a>
+            <a href="" class="reload" onclick="window.location.reload();">Reload</a>
         </div>
     </app>
     <script src="_framework/blazor.webassembly.js"></script>
-    <script>navigator.serviceWorker.register('service-worker.js');</script>
+    <script>
+        function showPwaUpdate() {
+            let note = document.getElementById("pwa-update-notification");
+            note.classList.remove("w3-hide");
+            note.classList.add("w3-show");
+        }
+        function hidePwaUpdate() {
+            let note = document.getElementById("pwa-update-notification");
+            note.classList.add("w3-hide");
+            note.classList.remove("w3-show");
+        }
+        navigator.serviceWorker.register('service-worker.js').then(reg => {
+            reg.addEventListener('updatefound', () => {
+                let newWorker = reg.installing;
+                newWorker.addEventListener('statechange', () => {
+                    switch (newWorker.state) {
+                        case "installed":
+                            // If there is a new service worker
+                            if (navigator.serviceWorker.controller) {
+                                showPwaUpdate();
+                            }
+                            break;
+                    }
+                });
+            });
+        });
+    </script>
     <script src="js/helpers.js"></script>
     <script>
         // Allow components to scroll to top
diff --git a/TrekSharp.AdventureTools/wwwroot/service-worker.published.js b/TrekSharp.AdventureTools/wwwroot/service-worker.published.js
index 15ffb07..6cbafb7 100644
--- a/TrekSharp.AdventureTools/wwwroot/service-worker.published.js
+++ b/TrekSharp.AdventureTools/wwwroot/service-worker.published.js
@@ -5,6 +5,7 @@ self.importScripts('./service-worker-assets.js');
 self.addEventListener('install', event => event.waitUntil(onInstall(event)));
 self.addEventListener('activate', event => event.waitUntil(onActivate(event)));
 self.addEventListener('fetch', event => event.respondWith(onFetch(event)));
+self.addEventListener('message', event => onMessage(event));
 
 const cacheNamePrefix = 'offline-cache-';
 const cacheName = `${cacheNamePrefix}${self.assetsManifest.version}`;
@@ -46,3 +47,9 @@ async function onFetch(event) {
 
     return cachedResponse || fetch(event.request);
 }
+
+function onMessage(event) {
+    if (event.data.action === 'skipWaiting') {
+        self.skipWaiting();
+    }
+}
\ No newline at end of file
diff --git a/TrekSharp.AdventureTools/wwwroot/site.webmanifest b/TrekSharp.AdventureTools/wwwroot/site.webmanifest
index 9df4a06..4bc5ccc 100644
--- a/TrekSharp.AdventureTools/wwwroot/site.webmanifest
+++ b/TrekSharp.AdventureTools/wwwroot/site.webmanifest
@@ -3,7 +3,6 @@
     "short_name": "TrekSharp",
     "description": "Fan-made tools for GMs and Players of Modiphius's Star Trek Adventures",
     "start_url": "./",
-    "orientation": "portrait",
     "icons": [
         {
             "src": "android-chrome-96x96.png",
diff --git a/TrekSharp/src/Rulebooks/OperationsDivision.cs b/TrekSharp/src/Rulebooks/OperationsDivision.cs
index d3628a4..54ded44 100644
--- a/TrekSharp/src/Rulebooks/OperationsDivision.cs
+++ b/TrekSharp/src/Rulebooks/OperationsDivision.cs
@@ -186,13 +186,11 @@ private OperationsDivision() {}
             new Item { Name = "Engineering Tricorder", Size = ItemSize.OneHanded },
             new Item { Name = "Micro-Optic Drill", Size = ItemSize.OneHanded  },
             new Item { Name = "Phaser Drill", Size = ItemSize.TwoHanded  },
-            new Item { Name = "Engineering Tricorder", Size = ItemSize.OneHanded  },
             new Item { Name = "Field Destabilizer", Size = ItemSize.OneHanded  },
             new Item { Name = "Hyperspanner", Size = ItemSize.OneHanded  },
             new Item { Name = "Magnetic Probe", Size = ItemSize.OneHanded  },
             new Item { Name = "Sonic Driver", Size = ItemSize.OneHanded  },
             new Item { Name = "Transport Inhibitor", Size = ItemSize.OneHanded  },
-            new Item { Name = "Chronometer", Size = ItemSize.OneHanded  },
         }
     };
 
diff --git a/TrekSharp/src/Rulebooks/ScienceDivision.cs b/TrekSharp/src/Rulebooks/ScienceDivision.cs
index dabb0f3..8a0105c 100644
--- a/TrekSharp/src/Rulebooks/ScienceDivision.cs
+++ b/TrekSharp/src/Rulebooks/ScienceDivision.cs
@@ -254,10 +254,8 @@ private ScienceDivision() {}
             new Item { Name = "Medical Tricorder", Size = ItemSize.OneHanded },
             new Item { Name = "Blood Gas Infuser", Size = ItemSize.TwoHanded  },
             new Item { Name = "Bone Regenerator", Size = ItemSize.TwoHanded  },
-            new Item { Name = "Blood Gas Infuser", Size = ItemSize.OneHanded  },
             new Item { Name = "Cardiostimulator", Size = ItemSize.OneHanded  },
             new Item { Name = "Cortical Scanner", Size = ItemSize.OneHanded  },
-            new Item { Name = "Blood Gas Infuser", Size = ItemSize.OneHanded  },
             new Item { Name = "Cortical Stimulator", Size = ItemSize.OneHanded  },
             new Item { Name = "Neural Caliper", Size = ItemSize.OneHanded  },
             new Item { Name = "Neural Pad", Size = ItemSize.OneHanded  },