Make screen slugs editable

.gitea/workflows/docker-publish.yml

@@ -2,8 +2,6 @@ name: Publish Docker Image
 
 on:
   push:
-    branches:
-      - main
     tags:
       - 'v*'
   workflow_dispatch:
@@ -32,9 +30,8 @@ jobs:
         with:
           images: git.lzstealth.com/LZStealth/pulse-signage
           tags: |
-            type=raw,value=latest,enable={{is_default_branch}}
+            type=raw,value=latest
             type=ref,event=tag
-            type=sha
 
       - name: Build and push image
         uses: docker/build-push-action@v6

README.md

@@ -63,33 +63,17 @@ The app reads its settings from environment variables.
 
 - `PLAYER_PORT` - player port, default `3001`
 
-## Using Docker
+## Docker Compose
 
-The recommended way to run the project is with Docker Compose.
+The repository includes a `docker-compose.yml` file that starts three services:
 
-```bash
+- `webui` - the admin app on port `3000`
-npm run docker:up
+- `player` - the signage player on port `3001`
-```
+- `mysql` - the database on port `3306`
 
-The main Compose file now uses the published Docker image and still reads values from the repository `.env` file. `DB_HOST` comes from that file for the app containers, so you can point the web UI and player at an external database host or change it to `mysql` if you want to use the bundled MySQL service.
+By default, `webui` and `player` use the published image from `git.lzstealth.com/LZStealth/pulse-signage:latest`. You can point both services at a specific release by setting `PULSE_SIGNAGE_IMAGE` to a tagged image such as `git.lzstealth.com/LZStealth/pulse-signage:v1.0.0`.
 
-If you only want to test the image build from the current checkout without using Compose, run:
+The Compose file also defines a shared `uploads` volume for media and a `mysql_data` volume for database persistence.
-
-```bash
-npm run docker:build
-```
-
-To publish the Docker image to the Gitea container registry, push to `main` or create a `v*` tag. The workflow in [.gitea/workflows/docker-publish.yml](.gitea/workflows/docker-publish.yml) builds `git.lzstealth.com/LZStealth/pulse-signage` and pushes `latest`, `sha`, and tagged releases.
-
-This starts:
-
-- the web admin app on port `3000`
-- the player app on port `3001`
-- MySQL on port `3306`
-
-The web app and player app share the same uploaded media volume, so files uploaded in the admin UI are available to the player.
-
-If you want to stop the stack later, run `npm run docker:down`. To follow logs, run `npm run docker:logs`.
 
 ## Important Notes
 

src/data/screens.js

@@ -7,12 +7,18 @@ function slugify(value) {
     .replace(/-{2,}/g, '-');
 }
 
-async function uniqueScreenSlug(pool, baseSlug) {
+async function uniqueScreenSlug(pool, baseSlug, excludeId) {
   const start = baseSlug || `screen-${Date.now()}`;
   let candidate = start;
   let counter = 2;
   while (true) {
-    const [rows] = await pool.query('SELECT id FROM screens WHERE slug = ?', [candidate]);
+    const params = [candidate];
+    let sql = 'SELECT id FROM screens WHERE slug = ?';
+    if (excludeId !== undefined && excludeId !== null) {
+      sql += ' AND id <> ?';
+      params.push(excludeId);
+    }
+    const [rows] = await pool.query(sql, params);
     if (!rows.length) {
       return candidate;
     }

src/webui.js

@@ -1457,8 +1457,9 @@ async function start() {
       if (!name) {
         return res.status(400).send('Screen name is required.');
       }
+      const slugInput = String(req.body.slug || '').trim();
       const playlistId = req.body.playlist_id ? Number(req.body.playlist_id) : null;
-      const slug = await common.uniqueScreenSlug(pool, common.slugify(name));
+      const slug = await common.uniqueScreenSlug(pool, common.slugify(slugInput || name));
       const actorId = getAuditUserId(req);
       await pool.query('INSERT INTO screens (name, slug, playlist_id, created_by, modified_by) VALUES (?, ?, ?, ?, ?)', [name, slug, playlistId, actorId, actorId]);
       res.redirect('/admin/screens?message=' + encodeURIComponent('Screen created.'));
@@ -1477,8 +1478,10 @@ async function start() {
       if (!screen) {
         return res.status(404).send('Screen not found');
       }
+      const slugInput = String(req.body.slug || '').trim();
       const playlistId = req.body.playlist_id ? Number(req.body.playlist_id) : null;
-      await pool.query('UPDATE screens SET name = ?, playlist_id = ?, modified_by = ? WHERE id = ?', [name, playlistId, getAuditUserId(req), screen.id]);
+      const slug = await common.uniqueScreenSlug(pool, common.slugify(slugInput || name), screen.id);
+      await pool.query('UPDATE screens SET name = ?, slug = ?, playlist_id = ?, modified_by = ? WHERE id = ?', [name, slug, playlistId, getAuditUserId(req), screen.id]);
       res.redirect('/admin/screens?edit=' + screen.id + '&message=' + encodeURIComponent('Screen updated.'));
     } catch (error) {
       next(error);

src/webui/public/js/slide-form.js

@@ -538,6 +538,7 @@
       }
 
       showToast(savedMessage || 'Saved slide.');
+      window.location.href = response.url || slideForm.action;
     } finally {
       submitting = false;
     }

src/webui/views/screens/add.hbs

@@ -7,10 +7,13 @@
 </div>
 
 <div class="card">
-  <form method="post" action="/admin/screens" data-async-save>
+  <form method="post" action="/admin/screens" data-async-save data-async-save-reload>
     <label>Name
       <input name="name" placeholder="Front desk TV" required />
     </label>
+    <label>Slug
+      <input name="slug" placeholder="front-desk-tv" />
+    </label>
     <label>Playlist
       <select name="playlist_id">
         <option value="">-- not assigned --</option>

src/webui/views/screens/edit.hbs

@@ -8,10 +8,13 @@
 
 <div class="card">
   <h3>Edit screen</h3>
-  <form id="screen-edit-form" class="screen-edit-form" method="post" action="/admin/screens/{{screen.id}}" data-async-save>
+  <form id="screen-edit-form" class="screen-edit-form" method="post" action="/admin/screens/{{screen.id}}" data-async-save data-async-save-reload>
     <label>Name
       <input name="name" value="{{screen.name}}" required />
     </label>
+    <label>Slug
+      <input name="slug" value="{{screen.slug}}" />
+    </label>
     <label>Playlist
       <select name="playlist_id">
         <option value="">-- not assigned --</option>