finalize UI migration away from the scene-card component

source/server/routes/views/index.ts

@@ -1,5 +1,5 @@
 import { Router, Request, Response, NextFunction } from "express";
-import { canRead, getHost, canWrite, getSession, getVfs, getUser, validateRedirect } from "../../utils/locals.js";
+import { canRead, getHost, canWrite, getSession, getVfs, getUser, validateRedirect, isAdministrator } from "../../utils/locals.js";
 import wrap from "../../utils/wrapAsync.js";
 import path from "path";
 import { Scene } from "../../vfs/types.js";
@@ -139,7 +139,12 @@ routes.get("/scenes", wrap(async (req, res)=>{
 
   let scenes = (await vfs.getScenes(u.uid, sceneParams)).map(mapScene.bind(null, req));
 
-  let pager = {next: undefined as any, previous: undefined as any};
+  let pager = {
+    from: sceneParams.offset,
+    to: sceneParams.offset + scenes.length,
+    next: undefined as any,
+    previous: undefined as any
+  };
   if(sceneParams.limit === scenes.length){
     const nextUrl = new URL(req.originalUrl, host);
     nextUrl.searchParams.set("offset", (sceneParams.offset+sceneParams.limit).toString());
@@ -172,7 +177,7 @@ routes.get("/user", (req, res)=>{
     title: "eCorpus User Settings",
   });
 });
-
+routes.use("/admin", isAdministrator);
 routes.get("/admin", (req, res)=>{
   res.render("admin/home", {
     layout: "admin",

source/server/templates/home.hbs

@@ -30,29 +30,25 @@
   <div class="grid-content">
       <div class="section">
         <h3>{{i18n "titles.myScenesSection"}}</h3>
+        {{#if userScenes.length}}
         <div class="list-grid" style="position:relative; margin-top:20px">
           {{#each userScenes}}
-          <scene-card 
-            card-style="grid" 
-            name="{{name}}"
-            thumb="{{thumb}}"
-            time="{{mtime}}"
-            access="{{access.user}}"
-          ></scene-card>
+            {{> sceneCard }}
           {{/each}}
         </div>
+        {{else}}
+          <p>{{i18n "leads.noScenes"}}</p>
+          <div style="display:flex; justify-content: space-evenly">
+            <a class="btn btn-main" href="/ui/scenes/">{{i18n "buttons.searchScene"}}</a>
+            <a class="btn btn-main" href="/ui/upload/">{{i18n "buttons.upload"}}</a>
+          </div>
+        {{/if}}
       </div>
       <div class="section">
           <h3>{{i18n "titles.ctimeScenesSection"}}</h3>
           <div class="list-grid" style="position:relative;">
             {{#each recentScenes }}
-              <scene-card 
-                card-style="grid"
-                name="{{name}}"
-                thumb="{{thumb}}"
-                time="{{mtime}}"
-                access="{{access.user}}"
-              ></scene-card>
+              {{> sceneCard }}
             {{/each}}
           </div>
       </div>

source/server/templates/locales/en.yml

@@ -18,11 +18,15 @@ labels:
   searchPlaceholder: search a scene
   sortBy: Sort by
   sendLoginLink: Send a login link
+  view: View
+  edit: Edit
 buttons:
   searchScene: search scenes
   upload: create a scene
   useStandalone: use standalone mode
   logout: Disconnect
+  next: "Next Page"
+  previous: "Previous Page"
 fields:
   name: name
   mtime: last modification
@@ -68,8 +72,16 @@ leads:
     with the Smithsonian Institute's Digitization Project Office
   passwordRecovery: >
     Fill the form below to receive an email with a direct-login link
-  linkSent: 
+  linkSent: >
     A login link has been sent to this account's email address
+  noScene: >
+    Looks like you don't own any scenes yet. Search public scenes made by others in this instance or create your own!
+  editScene: >
+    Modify this scene with Voyager-Story
+  showScene: >
+    Show this scene with Voyager-Explorer
+  noResults: >
+    No results. Maybe try to change your query?
 errors:
   generic: Unknown Error
   "Username not provided": Username not provided

source/server/templates/locales/fr.yml

@@ -18,11 +18,15 @@ labels:
   searchPlaceholder: chercher une scène
   sortBy: Trier par
   sendLoginLink: Envoyer un lien
+  view: Voir
+  edit: Editer
 buttons:
   searchScene: chercher une scène
   upload: créer une scène
   useStandalone: utiliser le mode Standalone
   logout: Déconnecter
+  next: "Page Suivante"
+  previous: "Page Précédente"
 fields:
   name: nom
   mtime: dernière modification
@@ -72,6 +76,14 @@ leads:
     et nous vous enverrons un lien de connexion directe qui vous permettra de réinitialiser votre mot de passe
   linkSent: >
     Un email de connexion directe a été envoyé à l'adresse associée à ce compte.
+  noScenes: >
+    Vous n'avez pas encore créé de scène sur cette instance. Accédez aux scènes publiques d'autres utilisateurs ou envoyez un de vos fichiers
+  editScene: >
+    Editer la scène avec Voyager-Story
+  showScene: >
+    Voir la scène avec Voyager-Explorer
+  noResults:
+    Aucun résultat. Affinez votre recherche ou revenez en arrière
 errors:
   generic: Erreur inconnue
   "Username not provided": Nom d'utilisateur non fourni

source/server/templates/partials/sceneCard.hbs

@@ -0,0 +1,28 @@
+<div class="scene-card">
+  <a class="card-image" href="/ui/scenes/{{encodeURIComponent name}}" title="{{i18n "labels.view"}}">
+    {{#if thumb }}
+      <img src="{{thumb}}" />
+    {{else}}
+      <img style="background:radial-gradient(circle, #103040 0, #0b0b0b 100%);" src="/dist/images/defaultSprite.svg" />
+    {{/if}}
+  </a>
+  <div class="scene-card-inner">
+    <div class="infos">
+      <a href="/ui/scenes/{{encodeURIComponent name}}"><h4 class="card-title">{{name}}</h4></a>
+      <span class="card-time">{{#if mtime}}{{dateString mtime}}{{/if}}</span>
+    </div>
+    <div class="tools">
+      {{!if a scene is shown, the user must have read access}}
+      <a class="tool-link" href="/ui/scenes/{{encodeURIComponent name}}/view" title="{{i18n "leads.showScene"}}">
+        <ui-icon name="eye"></ui-icon>
+        <span class="tool-text">{{i18n "labels.view"}}</span>
+      </a>
+      {{#unless (test access.user "==" "read")}}
+        <a class="tool-link" href="/ui/scenes/{{encodeURIComponent name}}/edit" title="{{i18n "leads.editScene"}}">
+          <ui-icon name="edit"></ui-icon>
+          <span class="tool-text">{{i18n "labels.edit"}}</span>
+        </a>
+      {{/unless}}
+    </div>
+  </div>
+</div>

source/server/templates/search.hbs

@@ -78,23 +78,27 @@
   </div>
 
   <div class="grid-content list-items section" style="width:100%">
+
     {{#each scenes}}
-      <scene-card 
-        card-style="grid" 
-        name="{{name}}"
-        thumb="{{thumb}}"
-        time="{{mtime}}"
-        access="{{access.user}}"
-      ></scene-card>
+      {{>sceneCard }}
     {{/each}}
     <div style="display:flex; justify-content: space-between;margin-top: 1rem;">
       {{#if pager.previous}}
         <a class="btn btn-main" id="search-previous" href="{{pager.previous}}">{{i18n "buttons.previous"}}</a>
       {{else}}
-        <div><!--placeholder--></div>
+        <div style="width:100px;"><!--placeholder--></div>
       {{/if}}
+      <div>
+        {{#if scenes.length}}
+          {{pager.from}}-{{pager.to}}
+        {{else}}
+          {{i18n "leads.noResults"}}
+        {{/if}}
+      </div>
       {{#if pager.next }}
         <a class="btn btn-main"id="search-next" href="{{pager.next}}">{{i18n "buttons.next"}}</a>
+      {{else}}
+        <div style="width:100px;"><!--placeholder--></div>
       {{/if}}
 
     </div>

source/server/templates/tag.hbs

@@ -1,12 +1,6 @@
 <h2>{{tag}}</h2>
 <div class="section">
 {{#each scenes}}
-  <scene-card 
-        cardStyle="list"
-        name="{{name}}"
-        thumb="{{thumb}}" 
-        time="{{mtime}}"
-        access="{{#if access}}{{#if @root.user.isAdministrator}}admin{{else}}{{access.user}}{{/if}}{{else}}none{{/if}}"
-  ></scene-card>
+  {{> sceneCard }}
 {{/each}}
 </div>

source/server/utils/templates.ts

@@ -90,7 +90,11 @@ const staticHelpers = {
     }
     return args.map(m).flat().join(hash.separator ?? "");
   },
-  test(this:any, a:any, op:TestOperator, b:any){
+  test(this:any, a:any, op:TestOperator, b:any, ...args:any[]){
+    if(typeof b === "undefined" || !args.length){
+      console.warn("Invalid number of arguments for test helper:",a,op,b);
+      return false;
+    }
     if(op == "in") return (Array.isArray(b)?b:[b]).indexOf(a) !== -1;
     else if(op == "==") return a == b;
     else if(op == "===") return a === b;

source/ui/MainView.ts

@@ -6,9 +6,7 @@ import "./styles/globals.scss";
 
 import "./composants/navbar/ChangeLocale";
 
-import "./screens/List";
 import "./screens/Admin";
 import "./screens/SceneHistory";
 
-import "./composants/UploadForm";
 import "./composants/SubmitFragment";