feat(ui): results of vue create ui using vue2 defaults #1122

hairmare · 2020-11-30T20:07:00Z

For now these are the raw results of vue create ui in the root while choosing the new Vue 3 default.

Tasks

Fixes #1121

zklosko · 2020-11-30T20:28:30Z

@hairmare Is there a way I can assist? I would really like to learn Vue and Javascript.

hairmare · 2020-11-30T21:08:00Z

@zklosko

Install nodejs on your dev env
Install yarn (there is a task in this PR that might make yarn optional but it won't hurt)
Install vue cli
grab yourself a local working copy of this branch
cd ui/ in the working copy
run yarn install
run yarn serve

yarn serve should output some info on where a local instance of the "Hello World!" example from this PR is hosted.

Most changes you make to the ui/ directory will reload the webpage hosted by yarn serve. Try editing a file in src/components/ and see how it reloads automagically.

Run yarn serve:storybook and have a look at our storybook

zklosko · 2020-12-05T00:22:47Z

@hairmare Just wanted to suggest we step down to Vue 2 if we still plan on using Vuetify. I've gotten a lot of errors trying to add Vuetify to the Vue 3 setup; apparently this is a known issue: vuetifyjs/vue-cli-plugins#140, https://vuetifyjs.com/en/introduction/roadmap/.

hairmare · 2020-12-16T19:23:42Z

Just wanted to suggest we step down to Vue 2 if we still plan on using Vuetify.

I encountered that as well and downgraded Vue2, it's not only Vuetify but also VueI18n that is't ready yet.

In this PR I've worked on Vuetify since it's what I know, that does't mean I'm not ready to replace it with Bulma (which I dont know enough about, yet). I want to get (jest-based) Unit-Testing up and running next, and I'll contribute to the discussion regarding Vuetify vs. Bulma vs. ... once I have that done in a PoC fashion based on the ExternalDataMenuButton in the PR.

hairmare

I should also remove any assets from this while I implement the changes I just self-reviewed.

ui/.gitignore

ui/.storybook/i18n_storybook.js

ui/.storybook/main.js

ui/.storybook/vuetify_storybook.js

hairmare · 2020-12-16T20:32:01Z

ui/src/App.vue

@@ -0,0 +1,28 @@
+<template>


Add a comment to clarify that this is just a demo that I expect to be replaced b4 we use this.

hairmare · 2020-12-16T20:32:41Z

ui/src/components/ExportDataButtonMenu.spec.js

+import Vue from 'vue'
+import Vuetify from 'vuetify'
+
+import ExportDataButtonMenu from '../../src/components/ExportDataButtonMenu.vue';
+
+describe('ExportDataButtonMenu.vue', () => {
+  const localVue = createLocalVue()
+  let vuetify
+
+  beforeEach(() => {
+    vuetify = new Vuetify()
+  })


Figure out if this can be abstracted so we don't have to add it in each test.

hairmare · 2020-12-16T20:33:19Z

ui/src/components/ExportDataButtonMenu.vue

+  export default {
+    name: 'ExportDataButtonMenu',
+    props: {
+      data: String,


Consider this:

Suggested change

data: String,

data: Object,

ui/src/plugins/vuetify.js

hairmare · 2020-12-16T20:35:18Z

ui/vue.config.js

@@ -0,0 +1,14 @@
+module.exports = {


Can/should I move this to package.json?

hairmare · 2020-12-16T20:43:40Z

Most of what is in this PR is scaffolding... The real MVP is in ui/src/components/ExportDataButtonMenu.*.

Those files show how you can add a component (ExportDataButtonMenu.vue), integrate it with storybook (ExportDataButtonMenu.stories.js) and test it with Jest (ExportDataButtonMenu.spec.js).

hairmare · 2020-12-16T21:14:20Z

Also, here's a storybook.js teaser ;)

stale · 2021-06-11T01:30:18Z

This issue has been automatically marked as stale because it has not had activity in the last 5 months. It will be closed if no activity occurs in the next month.
Please chat to us on discourse or ask for help on our chat if you have any questions or need further support with getting this issue resolved.
You may also label an issue as pinned if you would like to make sure that it does not get closed by this bot.

zklosko · 2021-10-16T15:21:08Z

@hairmare I've added a bit of work to your branch. How should I fold my commits into your fork?

paddatrapper · 2021-10-16T17:06:57Z

@zklosko you should be able to push to the branch because the PR is open

zklosko · 2021-10-16T17:20:16Z

Maybe I checked it out incorrectly. VSCode says I don't have permission to push to radiorabe/libretime on Github.

> git push vue feat/init-vue:feat/init-vue
> git ls-tree -l HEAD -- /Users/zacharyklosko/Documents/GitHub/libretime/docs/_docs/host-configuration.md
> git ls-tree -l HEAD -- /Users/zacharyklosko/Documents/GitHub/libretime/docs/_docs/host-configuration.md
> git show --textconv HEAD:docs/_docs/host-configuration.md
> git show --textconv HEAD:docs/_docs/host-configuration.md
remote: Permission to radiorabe/libretime.git denied to zklosko.
fatal: unable to access 'https://github.com/radiorabe/libretime.git/': The requested URL returned error: 403

paddatrapper · 2021-10-16T19:07:59Z

It may be a maintainer/contributor permission difference...

@hairmare are you still working on this or shall we take it over? I'd like to get working on this soon

zklosko · 2021-11-20T18:16:41Z

@paddatrapper Would it be okay if we switched to a Vue framework like Nuxt JS? There seems to be a lot of boilerplate that could easily make the project complicated.

paddatrapper · 2021-11-22T08:38:19Z

@zklosko I have no strong feeling either way. Server-side rendering is nice for some of the things we are doing. The requirements I see are:

Matching the UI look and feel that we currently have
Internationalization support using a standard interface supported by Weblate

zklosko · 2021-11-28T02:51:13Z

@paddatrapper I take back my request for Nuxt, but I still feel unclear as to our goals for the rewrite.

Decoupling the backend means we have to put more focus into the API, but we could push ourselves to keep an eye on the API nevertheless. We could pre-render each page on the server (especially helpful for i18n), but that would require an additional server process to keep running. We would also need an additional Docker container in a Docker setup (UI + API + DB + Python + RabbitMQ + Liquidsoap + Icecast + Nginx/Caddy); it seems we are adding in additional points of failure without it greatly benefiting us.

An idea before was to statically generate the app and then serve it from Django, is that still what we're aiming for?

paddatrapper · 2021-11-28T07:35:55Z

A vue.js app wouldn't need an additional server - the js is generated at build time and served by the webserver. So the apache process already serving the PHP, serves the js. I agree with you that we don't want yet another process running and there is a fair amount of things that wouldn't be able to be rendered server side (live DJ interface, uploading, scheduling, etc). We're going to end up with a lot of client-side js either way

zklosko · 2021-11-28T23:59:31Z

That almost sounds like what we had before - templating in PHP with functionality in JS. Since Django already gives us i18n support and login auth, why not use templating and middleware in Django with component-based functionality in Vue.js? We can still minify and bundle the JS but the UI would be so much faster that way instead of entirely building it client-side. I think we can still use Vuetify as a UI framework.

There's arguably a lot that we don't need JS for:

Don't need JS: rendering the bulk of the UI, user auth, i18n, basic forms
Do need JS: players, advanced and interactive forms, uploading files, drag and drop, dashboards, interacting with API

paddatrapper · 2021-11-29T07:30:04Z

@zklosko maybe we should continue this conversation in #2 where the rest of the discussion happened?

zklosko · 2021-12-02T19:18:19Z

I would like to move to Vite from Webpack, because it's a lot faster, simpler, and still works with i18n generation, if that's okay with @hairmare.

zklosko · 2021-12-04T04:23:22Z

So it begins...

zklosko · 2021-12-07T02:35:54Z

paddatrapper · 2022-03-28T11:26:48Z

Closed in favour of #1696

hairmare added 2 commits November 30, 2020 21:00

feat(ui): results of vue create ui using vue3 defaults

eeea1a2

chore(ui): replace favicon with copy from legacy

85413cb

hairmare added 6 commits December 1, 2020 19:07

fixup! feat(ui): results of vue create ui using vue3 defaults

f05bce8

feat(ui): yarn add vuetify

2ed5e96

feat(ui): vue add vuetify-storybook

e0d1e48

feat(ui): yarn upgrade

2158dbf

feat(ui): yarn add i18n

73a1c77

feat(ui): yarn add unit-jest

ba69eb3

chore: update storybook config to main.js style

e4cee05

hairmare changed the title ~~feat(ui): results of vue create ui using vue3 defaults~~ feat(ui): results of vue create ui using vue2 defaults Dec 16, 2020

feat(ui): introduce vue-jest with snapshot tests

77457d3

hairmare commented Dec 16, 2020

View reviewed changes

hairmare and others added 6 commits December 16, 2020 21:36

chore(ui): remove unused components

cbe3d99

Update ui/.storybook/i18n_storybook.js

f6f6d2f

Update ui/.storybook/main.js

2b12b90

Update ui/.storybook/main.js

94cdd1a

Update ui/.storybook/vuetify_storybook.js

8c80ebd

Update ui/src/plugins/vuetify.js

3e4a9e3

hairmare and others added 4 commits December 16, 2020 21:46

chore(ui): move gitignore to top-level dir

127ed2d

Merge branch 'master' into feat/init-vue

bb30775

chow(ui): move jest config

70bb635

chore(ui): rm tests dir and move config to src

f4b0421

hairmare added 2 commits December 26, 2020 15:30

feat(ui): initialize vue-router

cae5a4d

feat(ui): add ui to build script and copy to legacy

174dfab

fixup! feat(ui): rough playouthistory PoC

c45b3a1

hairmare mentioned this pull request Jan 4, 2021

Release 3.0.0-alpha.9 #1155

Closed

hairmare added 3 commits January 4, 2021 16:24

feat(ui): working storybook-docs setup and dark ui

4372453

fix(ui): remov elog statement and fix package.json

7c0e3e3

feat(ui): hide empty table on playout history

2a6d6f0

hairmare mentioned this pull request Jan 5, 2021

API 2.0 #958

Merged

stale bot added the status: stalled This issue or pull request is stalled label Jun 11, 2021

paddatrapper added the pinned label Jun 11, 2021

stale bot removed the status: stalled This issue or pull request is stalled label Jun 11, 2021

paddatrapper mentioned this pull request Jun 11, 2021

Rewrite libretime #935

Closed

jooola added status: pinned This issue or pull request won't stale and removed pinned labels Sep 18, 2021

zklosko mentioned this pull request Nov 30, 2021

Call for Proposals: Future of LibreTime MVC #2

Closed

zklosko mentioned this pull request Dec 23, 2021

Merging work on new UI into master branch #1461

Closed

paddatrapper closed this Mar 28, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(ui): results of vue create ui using vue2 defaults #1122

feat(ui): results of vue create ui using vue2 defaults #1122

hairmare commented Nov 30, 2020 •

edited

zklosko commented Nov 30, 2020

hairmare commented Nov 30, 2020 •

edited

zklosko commented Dec 5, 2020

hairmare commented Dec 16, 2020 •

edited

hairmare left a comment

hairmare Dec 16, 2020 •

edited

hairmare Dec 16, 2020

hairmare Dec 16, 2020

hairmare Dec 16, 2020

hairmare commented Dec 16, 2020

hairmare commented Dec 16, 2020

stale bot commented Jun 11, 2021

zklosko commented Oct 16, 2021

paddatrapper commented Oct 16, 2021

zklosko commented Oct 16, 2021 •

edited

paddatrapper commented Oct 16, 2021

zklosko commented Nov 20, 2021 •

edited

paddatrapper commented Nov 22, 2021 •

edited

zklosko commented Nov 28, 2021

paddatrapper commented Nov 28, 2021

zklosko commented Nov 28, 2021 •

edited

paddatrapper commented Nov 29, 2021

zklosko commented Dec 2, 2021

zklosko commented Dec 4, 2021

zklosko commented Dec 7, 2021

paddatrapper commented Mar 28, 2022

feat(ui): results of vue create ui using vue2 defaults #1122

feat(ui): results of vue create ui using vue2 defaults #1122

Conversation

hairmare commented Nov 30, 2020 • edited

Tasks

zklosko commented Nov 30, 2020

hairmare commented Nov 30, 2020 • edited

zklosko commented Dec 5, 2020

hairmare commented Dec 16, 2020 • edited

hairmare left a comment

Choose a reason for hiding this comment

hairmare Dec 16, 2020 • edited

Choose a reason for hiding this comment

hairmare Dec 16, 2020

Choose a reason for hiding this comment

hairmare Dec 16, 2020

Choose a reason for hiding this comment

hairmare Dec 16, 2020

Choose a reason for hiding this comment

hairmare commented Dec 16, 2020

hairmare commented Dec 16, 2020

stale bot commented Jun 11, 2021

zklosko commented Oct 16, 2021

paddatrapper commented Oct 16, 2021

zklosko commented Oct 16, 2021 • edited

paddatrapper commented Oct 16, 2021

zklosko commented Nov 20, 2021 • edited

paddatrapper commented Nov 22, 2021 • edited

zklosko commented Nov 28, 2021

paddatrapper commented Nov 28, 2021

zklosko commented Nov 28, 2021 • edited

paddatrapper commented Nov 29, 2021

zklosko commented Dec 2, 2021

zklosko commented Dec 4, 2021

zklosko commented Dec 7, 2021

paddatrapper commented Mar 28, 2022

hairmare commented Nov 30, 2020 •

edited

hairmare commented Nov 30, 2020 •

edited

hairmare commented Dec 16, 2020 •

edited

hairmare Dec 16, 2020 •

edited

zklosko commented Oct 16, 2021 •

edited

zklosko commented Nov 20, 2021 •

edited

paddatrapper commented Nov 22, 2021 •

edited

zklosko commented Nov 28, 2021 •

edited