[ALS-5910] Add dataset management and view pages

.gitignore

@@ -4,6 +4,7 @@ node_modules
 /cert
 /.svelte-kit
 /playwright-report
+/test-results
 /package
 .env
 .env.*
@@ -13,4 +14,5 @@ vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 .vscode
 /certs
-/httpd-docker-logs
+/httpd-docker-logs
+httpd-vhosts.conf

package.json

@@ -3,16 +3,17 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "dev": "vite dev",
-    "build": "vite build",
+    "dev": "svelte-kit sync && vite dev",
+    "build": "svelte-kit sync && vite build",
     "preview": "vite preview",
     "test": "npm run test:integration && npm run test:unit",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "lint": "prettier --check . && eslint .",
     "format": "prettier --write .",
     "test:integration": "playwright test",
-    "test:unit": "vitest"
+    "test:unit": "vitest run",
+    "playwright": "playwright test --ui"
   },
   "devDependencies": {
     "@playwright/test": "^1.28.1",
@@ -47,6 +48,7 @@
   "dependencies": {
     "@floating-ui/dom": "1.5.3",
     "@fortawesome/fontawesome-free": "^6.5.1",
+    "@vincjo/datatables": "^1.14.5",
     "dotenv": "^16.3.1"
   }
 }

src/app.postcss

@@ -9,17 +9,105 @@ body {
 }
 
 section.main-content {
-  width: 60%; /* The width is 60%, by default */
+  width: 70%; /* The width is 60%, by default */
   margin: 2rem auto 0;
 }
 
 /* Use a media query to add a breakpoint at 800px: */
-@media screen and (max-width: 800px) {
+@media screen and (max-width: 1366px) {
   section.main-content {
-    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
+    width: calc(100% - 4rem); /* The width is 100%, when the viewport is 800px or smaller */
+    margin: 2rem;
   }
 }
 
+@media print {
+  .app-bar #page-navigation {
+    display: none;
+  }
+  section.main-content {
+    width: 100%;
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    text-align: left !important;
+  }
+  html,
+  body {
+    height: auto !important;
+    overflow: auto !important;
+  }
+  body.overflow-hidden,
+  .app-shell.overflow-hidden,
+  .app-shell div.overflow-hidden {
+    overflow: auto !important;
+  }
+  body.h-full,
+  .app-shell.h-full,
+  .app-shell div.h-full {
+    height: auto !important;
+  }
+}
+
+h1 {
+  @apply h1 text-center my-1;
+}
+h2 {
+  @apply h2 my-1;
+}
+h3 {
+  @apply h3 my-1;
+}
+h4 {
+  @apply h4 my-1;
+}
+h5 {
+  @apply h5 my-1;
+}
+h6 {
+  @apply h6 my-1;
+}
+
+ol.primary-list,
+ul.primary-list {
+  padding-left: 3rem;
+}
+ol.primary-list {
+  list-style: decimal;
+}
+ul.primary-list {
+  list-style: disc;
+}
+ol.primary-list li::marker,
+ul.primary-list li::marker {
+  color: rgba(var(--color-primary-500));
+}
+
+/* Loading progress bar animation */
+.anim-progress-bar {
+  transform-origin: 0% 50%;
+  animation: anim-progress-bar 2s infinite linear;
+}
+@keyframes anim-progress-bar {
+  0% {
+    transform: translateX(50%) scaleX(0.5);
+  }
+  50% {
+    transform: translateX(0) scaleX(0.5);
+  }
+  100% {
+    transform: translateX(50%) scaleX(0.5);
+  }
+}
+
+.table thead th.progress-bar {
+  padding: 0px;
+}
+
 #nav-logo {
   max-height: 80px;
 }
@@ -77,7 +165,7 @@ nav#page-navigation a:active {
   display: flex;
   flex-direction: column;
   text-align: center;
-  width: 15rem;
+  width: 13rem;
   min-height: 15rem;
   padding: 1rem 0.5rem;
   margin: 0.3rem;
@@ -88,3 +176,16 @@ nav#page-navigation a:active {
 .block-buttons a:active {
   background-color: rgb(var(--color-primary-500));
 }
+
+.loader .fa-solid {
+  display: none;
+}
+
+.loader:disabled i.fa-solid,
+.loader[disabled] i.fa-solid {
+  display: inline;
+}
+
+.table.align-middle tbody td {
+  vertical-align: middle;
+}