55 Commits

Author SHA1 Message Date
Sybren A. Stüvel
32f4ceedf3 Web: use backendURL() function to construct API and Add-on URLs
Use `backendURL()` function to construct API and Add-on URLs, so that they
work regardless of what is serving the webapp (Flamenco Manager or the
Vite development server).
2022-07-16 15:34:32 +02:00
Pablo Vazquez
bf977e36fe UI: Typo in "addon"
Add-on is often written with hyphen.
2022-07-05 19:00:18 +02:00
Sybren A. Stüvel
7d64d1bca4 Move SwaggerUI to /api/v3/swagger-ui
Include the `v3` path component in the Swagger UI URL.
2022-07-04 12:21:18 +02:00
Sybren A. Stüvel
d25151184d Add a "Last Rendered" view
Add a "Last Rendered" view to the webapp.

The Manager now stores (in the database) which job was the last
recipient of a rendered image, and serves that to the appropriate
OpenAPI endpoint.

A new SocketIO subscription + accompanying room makes it possible for
the web interface to receive all rendered images (if they survive the
queue, which discards images when it gets too full).
2022-07-01 12:34:40 +02:00
Sybren A. Stüvel
159e003745 Web: remove the last bit of the 'Settings' tab
Apparently the header link was still in there.
2022-06-28 17:14:44 +02:00
Sybren A. Stüvel
c3345131c7 Rename flamenco-addon.zip to flamenco3-addon.zip
Just to be explicit this is for the new Flamenco version.
2022-06-28 12:17:57 +02:00
Sybren A. Stüvel
2045a087ca Web: add link to the API explorer
Add a link to `/api/swagger-ui/` to the top bar, which allows exploration
of the API.
2022-06-27 16:13:15 +02:00
Sybren A. Stüvel
def56b5d22 Serve the add-on via the web interface
Serve the Blender add-on via the web interface, downloadable from
`/flamenco-addon.zip`.
2022-06-27 16:12:50 +02:00
Sybren A. Stüvel
63ac728732 Web: remove concept of "selected jobs" and replace with "active job"
The selection mechanism of Tabulator was getting in the way of having nice
navigation, as it would deselect (i.e. nav to "/") before selecting the
next job (i.e. nav to "/jobs/{job-id}").

The active job is now determined by the URL and thus handled by Vue Router.
Clicking on a job simply navigates to its URL, which causes the reactive
system to load & display it.

It is still intended to get job selection for "mass actions", but that's
only possible after normal navigation is working well.
2022-05-11 12:13:25 +02:00
Sybren A. Stüvel
af39414a06 Web: introduce VueRouter and split up into more components
Most of the code moved from `App.vue` to `views/JobsView.vue`.
Notification bar has its own component, and there are placeholder
"views" for Workers and Settings pages.

There is still some clunky handling of updates via SocketIO, as those
are a mix of job-specific and global (like SocketIO reconnection
events). The advantage of the current approach is that SocketIO
connections are closed when you leave the Jobs page, and reopened when
you enter the Workers page. My gut feeling says this is nice because it
ensures that all SocketIO connection-specific things are cleaned up when
you navigate.
2022-05-06 16:50:20 +02:00
Pablo Vazquez
79397a4ed3 Web: Style spinner
Forked from supahfunk's https://codepen.io/supah/pen/BjYLdW
2022-05-04 19:30:14 +02:00
Pablo Vazquez
6dad727954 Web: Style app-version 2022-05-04 15:32:52 +02:00
Pablo Vazquez
af56fd04e9 Web: Add generic column class to columns 2022-05-03 19:27:47 +02:00
Pablo Vazquez
dfb3b5b221 Web: Add placeholder navbar links 2022-05-03 19:27:31 +02:00
Pablo Vazquez
301bff9244 Web: Move basic styling from App to base.css
First step, it should be further split later down the line.
2022-05-03 19:21:19 +02:00
Sybren A. Stüvel
ad04856a02 Web: only use the tasks table if it exists
Because of the `v-if` attribute, `this.$refs.tasksTable` may actually be
`null` if there are no tasks shown.
2022-05-03 16:29:14 +02:00
Sybren A. Stüvel
73b122be84 Show task details for selected task
The task details are updated at real-time via SocketIO updates.
2022-05-03 13:05:30 +02:00
Sybren A. Stüvel
50c8cd39f2 Task update notifications via SocketIO
Manager now sends out task updates via SocketIO, and the web interface
handles those.

Note that there is a `BroadcastTaskUpdate()` function, but not a
`BroadcastNewTask`. The 'new job' broadcast is sent after the job's
tasks have been created, and thus there is no need for a separate
broadcast per task.
2022-05-03 11:26:24 +02:00
Sybren A. Stüvel
9b330280b7 Add SocketIO subscription system for job-related updates
SocketIO clients can now send a message with `/subscription` event type
in order to subscribe to or unsubscribe from job-related updates.

These job-related updates themselves aren't sent yet, so this is a change
that's impossible to really test. The socketIO code for joining/leaving
rooms is called, though.
2022-05-02 18:36:14 +02:00
Sybren A. Stüvel
c07d2e3249 Web: tweak webapp layout 2022-04-29 13:11:44 +02:00
Sybren A. Stüvel
4ebf4f31f9 Web: add task table 2022-04-29 13:11:19 +02:00
Sybren A. Stüvel
fc4cc11483 Web: style buttons and footer in Blender Blue 2022-04-22 11:46:45 +02:00
Sybren A. Stüvel
4129ed11bb Web: use wrapper for the OpenAPI client to track requests
A wrapper for the generated `ApiClient` class tracks the number of running
queries. This makes it much simpler to show the "API calls pending" UI
element, regardless of which part of the webapp performs the queries.
2022-04-22 11:46:33 +02:00
Sybren A. Stüvel
fc68e8a413 Web: action button styling
Making the button respond to hovering makes it slightly easier to see
which button is enabled and which is disabled.
2022-04-22 10:33:19 +02:00
Sybren A. Stüvel
bb1acef054 Web: style action buttons and move the delete button to the last place 2022-04-21 19:06:18 +02:00
Sybren A. Stüvel
1ac37ab625 Web: clearer style for focused action button 2022-04-21 19:06:18 +02:00
Sybren A. Stüvel
d84efb8c9a Web: implement 'Cancel Job' button
The button calls the 'setJobStatus' API endpoint to set the job status to
`cancel-requested`.
2022-04-21 19:06:18 +02:00
Sybren A. Stüvel
2bc6b2bdba Web: start of notification bar
Use Pinia store for notifications. WIP, only the last one is shown in
the footer.
2022-04-19 16:27:05 +02:00
Sybren A. Stüvel
7b38aa4faf Web: add Job Actions Bar for action buttons
Add a bar for "job actions", i.e. buttons that do something with the
selected job(s).

Just has one button, and it doesn't do much either, but at least the
framework for these things is here.
2022-04-19 16:27:05 +02:00
Sybren A. Stüvel
27fb9d05db Web: use Pinia for storage of selected & current Job
Using the concept of 'selected' and 'active' similar to Blender.

Not all components have been altered to use the Pinia store yet.
2022-04-19 16:27:05 +02:00
Sybren A. Stüvel
4553be4d6c Web: different JS style for defining app data
Just a readability improvement.

No functional changes.
2022-04-19 16:03:36 +02:00
Sybren A. Stüvel
7bde1e243a Web: import from package-relative path
Use `@/path/to/file` instead of `./path/to/file`, as the former will be
valid even when used in a subdirectory (i.e. in cases where the latter
would have to change to `../path/to/file`). This makes imports uniform
and easier to copy-paste into other files.

No functional changes.
2022-04-19 16:03:36 +02:00
Sybren A. Stüvel
84e1ca9c67 Web: allow deselection of jobs
This ensures that deselecting a job also removes it from the job details
column.
2022-04-15 17:22:10 +02:00
Sybren A. Stüvel
78a3e5faf0 Web: header tweaks to get the layout a bit cleaner 2022-04-15 16:29:30 +02:00
Sybren A. Stüvel
1847c5219d Web: fix unexpected scrollbar on Firefox
Firefox will still have an additional 1px vertical line at the bottom of
the page, even when `#app` should take 100% of the vertical space. This
causes a scrollbar to show up. Setting the height at `calc(100vh - 1px)`
solves this.
2022-04-15 14:27:51 +02:00
Sybren A. Stüvel
5c28fcd1b7 Web: set colours on the html & body element
Setting the CSS `color` and `background-color` properties on the top-level
elements will make Firefox understand the dark theme, and colour the scroll
bar appropriately.
2022-04-15 14:27:24 +02:00
Sybren A. Stüvel
315c7cfde7 Web: fix layout of jobs table
This ensures it uses virtual DOM, which is waaaaaaay faster.
CSS variables are used to compute the max height for the Jobs Table grid
cell, to make sure the Tabulator height can be set to 100% without
overflowing.
2022-04-14 09:54:57 +02:00
Sybren A. Stüvel
93b065217e Web: always fetch fresh job on selection in the tabulator 2022-04-14 09:41:04 +02:00
Sybren A. Stüvel
81ad3575db Web: only fetch selected job if not yet fully known 2022-04-14 09:41:04 +02:00
Sybren A. Stüvel
e672289a11 OAPI: include all info for the jobs table in the JobUpdate schema
By having all info for the jobs table in the `JobUpdate` schema, it won't
have to query for the full job when a new job is added. This fetching of
the full job is now delayed until someone clicks on the table row.
2022-04-14 09:41:04 +02:00
Sybren A. Stüvel
3ab1e9a450 Web: add API query spinner
The spinner starts fading in when API calls take longer than 100ms.

Not used yet, how to hook it up to API calls is still being discovered.
2022-04-14 09:41:04 +02:00
Francesco Siddi
313061cf06 Web: Initial design with dark theme in mind 2022-04-12 20:03:52 +02:00
Sybren A. Stüvel
6161853136 Web: reduce console logs a bit 2022-04-12 16:11:52 +02:00
Sybren A. Stüvel
2c8ee18fef Web: include metadata and settings in job details 2022-04-12 16:10:39 +02:00
Sybren A. Stüvel
0694ab8e02 Web: nicer handling of SocketIO connection issues 2022-04-12 16:00:47 +02:00
Sybren A. Stüvel
ec814afa91 Web: show Flamenco name & version in header 2022-04-12 15:54:58 +02:00
Sybren A. Stüvel
316ba6953b Web: show job details column
This may be a nice moment to reconsider using Pinia as a data store, as
we now have two views (job table + job details) that should share a data
set.
2022-04-12 15:28:18 +02:00
Sybren A. Stüvel
d650ff5dcf Web: add empty job & task detail column components 2022-04-12 14:37:48 +02:00
Sybren A. Stüvel
555c935790 Web: Replace Vue 2 with Vue 3 webapp
Replace the Vue v2 webapp with a Vue v3 one, and embed the OpenAPI
client in the webapp itself (instead of being its own npm project).

- Vue v2.x -> v3.x
- Tabulator v4.x -> v5.1
- Moment JS -> replaced with Luxon JS
- Vue CLI/UI -> replaced with Vite
2022-04-12 12:34:49 +02:00
Sybren A. Stüvel
f155715d12 Web: re-fetch jobs after reconnecting to backend
If the backend connection was lost, and then obtained again, just fetch
all available jobs to ensure the presented data is fresh.
2022-04-08 15:03:04 +02:00