Merging work on new UI into master branch

ui/.storybook/main.js

@@ -0,0 +1,28 @@
+const path = require('path');
+
+module.exports = {
+  stories: ['../src/**/*.stories.@(js|mdx)'],
+  addons: [
+    '@storybook/addon-essentials',
+  ],
+  webpackFinal: async (config, { configType }) => {
+
+    // Configure sass for Vuetify
+    config.module.rules.push({
+      test: /\.s[ca]ss$/,
+      use: ['style-loader', 'css-loader', 'sass-loader'],
+      include: path.resolve(__dirname, '../'),
+    });
+    // register Vue
+    config.module.rules.push({
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, '../src'),
+          vue: 'vue/dist/vue.js',
+          'vue$': 'vue/dist/vue.esm.js',
+        },
+      },
+    });
+    return config;
+  },
+}

ui/.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons'
+import { themes } from '@storybook/theming'
+
+addons.setConfig({
+  theme: themes.dark,
+})

ui/.storybook/preview.js

@@ -0,0 +1,72 @@
+import { DocsContainer } from '@storybook/addon-docs/blocks'
+import { themes } from '@storybook/theming'
+import React from 'react'
+
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+import VueI18n from 'vue-i18n'
+import vcalendar from '@/plugins/vcalendar';
+import { i18nOptions } from '@/plugins/i18n'
+import { vuetifyOptions } from '@/plugins/vuetify'
+
+// setup miragejs
+import { makeServer } from "@/server"
+
+makeServer()
+
+Vue.config.productionTip = false
+
+// configure Vue to use Vuetify
+Vue.use(Vuetify)
+Vue.use(VueI18n)
+Vue.use(vcalendar)
+
+export const parameters = {
+  actions: {
+    argTypesRegex: "^on[A-Z].*"
+  },
+  docs: {
+    theme: themes.dark,
+    inlineStories: false,
+  },
+}
+
+// instantiate Vuetify instance with any component/story level params
+const vuetify = new Vuetify(vuetifyOptions)
+const i18n = new VueI18n(i18nOptions)
+
+// vue/vuetify/i18n/etc decorator
+export const decorators = [
+  (story, context) => {
+    // wrap the passed component within the passed context
+    const wrapped = story(context)
+    // extend Vue to use Vuetify around the wrapped component
+    return Vue.extend({
+      vuetify,
+      i18n,
+      name: "app",
+      components: { wrapped },
+      props: {
+        locale: {
+          type: String,
+          default: 'en',
+        },
+      },
+      watch: {
+        locale: {
+          immediate: true,
+          handler (val) {
+            this.$i18n.locale = val
+          }
+        }
+      },
+      template: `
+        <div class="libretime-vue">
+          <v-app dark>
+            <wrapped />
+          </v-app>
+        </div>
+      `
+    })
+  },
+]

ui/README.md

@@ -0,0 +1,24 @@
+# ui
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn serve
+```
+
+### Compiles and minifies for production
+```
+yarn build
+```
+
+### Lints and fixes files
+```
+yarn lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

ui/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@vue/cli-plugin-babel/preset', '@babel/preset-env', '@babel/preset-react'],
+}

ui/jest.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  preset: '@vue/cli-plugin-unit-jest',
+  setupFiles: ['./tests/setup.js'],
+}

ui/package.json

@@ -0,0 +1,144 @@
+{
+  "name": "libretime-ui",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "test:unit": "vue-cli-service test:unit --testMatch '**/*.spec.js' --setupFiles ./src/test.setup.js",
+    "lint": "vue-cli-service lint",
+    "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'",
+    "serve:storybook": "start-storybook -p 6006"
+  },
+  "dependencies": {
+    "axios": "^0.21.1",
+    "core-js": "^3.8.1",
+    "dayjs": "^1.10.7",
+    "howler": "^2.2.3",
+    "v-calendar": "^2.1.4",
+    "vue": "^2.6.11",
+    "vue-blob-json-csv": "^0.1.7",
+    "vue-i18n": "^8.17.3",
+    "vue-router": "^3.2.0",
+    "vuetify": "^2.4.0"
+  },
+  "devDependencies": {
+    "@babel/preset-react": "^7.12.10",
+    "@intlify/vue-i18n-loader": "^2.0.0-beta.2",
+    "@mdi/font": "^5.8.55",
+    "@storybook/addon-a11y": "^6.1.11",
+    "@storybook/addon-actions": "^6.1.11",
+    "@storybook/addon-docs": "^6.1.11",
+    "@storybook/addon-essentials": "^6.1.11",
+    "@storybook/addon-viewport": "^6.1.11",
+    "@storybook/addons": "^6.1.11",
+    "@storybook/vue": "^6.1.11",
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-plugin-unit-jest": "~4.5.0",
+    "@vue/cli-service": "^4.5.0",
+    "@vue/test-utils": "^1.1.2",
+    "babel-eslint": "^10.1.0",
+    "babel-preset-vue": "^2.0.2",
+    "eslint": "^7.16.0",
+    "eslint-config-prettier": "^7.1.0",
+    "eslint-plugin-prettier-vue": "^2.1.1",
+    "eslint-plugin-vue": "^7.3.0",
+    "faker": "^5.1.0",
+    "js-beautify": "^1.13.0",
+    "miragejs": "^0.1.41",
+    "postcss-prefix-selector": "^1.7.2",
+    "prettier": "^2.2.1",
+    "prism-react-renderer": "^1.1.1",
+    "prismjs": "^1.17.1",
+    "sass": "^1.30.0",
+    "sass-loader": "^10.1.0",
+    "vue-cli-plugin-i18n": "^1.0.1",
+    "vue-cli-plugin-styleguidist": "^4.34.2",
+    "vue-cli-plugin-vuetify": "^2.0.8",
+    "vue-cli-plugin-vuetify-storybook": "^0.2.0",
+    "vue-docgen-api": "^4.34.2",
+    "vue-docgen-loader": "^1.5.0",
+    "vue-jest": "^3.0.7",
+    "vue-storybook": "^1.1.0",
+    "vue-template-compiler": "^2.6.11",
+    "vuetify-loader": "^1.3.0"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/recommended",
+      "plugin:prettier-vue/recommended",
+      "prettier/vue",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {
+      "prettier-vue/prettier": [
+        "error",
+        {
+          "printWidth": 100,
+          "singleQuote": true,
+          "semi": false,
+          "trailingComma": "es5"
+        }
+      ]
+    },
+    "settings": {
+      "prettier-vue": {
+        "SFCBlocks": {
+          "customBlocks": {
+            "docs": {
+              "lang": "markdown"
+            }
+          }
+        }
+      }
+    },
+    "overrides": [
+      {
+        "files": [
+          "**/__tests__/*.{j,t}s?(x)",
+          "**/*.spec.{j,t}s?(x)"
+        ],
+        "env": {
+          "jest": true
+        }
+      }
+    ]
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ],
+  "jest": {
+    "verbose": true,
+    "preset": "@vue/cli-plugin-unit-jest",
+    "setupFiles": [
+      "./test.setup.js"
+    ],
+    "testMatch": [
+      "**/*.spec.js"
+    ],
+    "moduleFileExtensions": [
+      "js",
+      "json",
+      "vue"
+    ],
+    "transform": {
+      ".*\\.(vue)$": "vue-jest"
+    },
+    "collectCoverage": true,
+    "collectCoverageFrom": [
+      "**/*.{js,vue}",
+      "!**/node_modules/**"
+    ]
+  }
+}

ui/public/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

ui/src/App.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="libretime-vue">
+    <v-app dark>
+      <!-- Everything goes under here -->
+      <radio-page v-show="!userLoggedIn" @try-login="processLogin" />
+
+      <!-- <v-app-bar v-show="userLoggedIn" prominent dense app clipped-left>
+        <app-bar />
+      </v-app-bar> -->
+
+      <v-main v-show="userLoggedIn">
+        <v-container fluid>
+          <v-navigation-drawer
+            v-show="userLoggedIn"
+            :width="200"
+            app
+            clipped
+            permanent
+            expand-on-hover
+          >
+            <main-nav @logout="processLogout" />
+          </v-navigation-drawer>
+          <router-view></router-view>
+        </v-container>
+      </v-main>
+    </v-app>
+  </div>
+</template>
+
+<script>
+// import AppBar from './components/App/AppBar.vue'
+import MainNav from './components/App/MainNav.vue'
+import RadioPage from './components/RadioPage/RadioPage.vue'
+export default {
+  components: {
+    MainNav,
+    RadioPage,
+  },
+  data() {
+    return {
+      stationName: 'WRIR',
+      userLoggedIn: false,
+    }
+  },
+  methods: {
+    processLogin(username) {
+      console.log(username)
+      this.userLoggedIn = true
+      return
+    },
+    processLogout() {
+      this.userLoggedIn = false
+      return
+    },
+  },
+}
+</script>
+
+<style lang="sass">
+@use './assets/styles/base'
+
+body
+  background: base.$background
+</style>

ui/src/api.js

@@ -0,0 +1,17 @@
+import axios from 'axios'
+// let apiURL = 'http://192.168.64.43:8080'
+
+export default axios.create({
+  baseURL: '/api/v2',
+  headers: {
+    'Content-type': 'application/json',
+  },
+})
+
+// export default axios.create({
+//   baseURL: apiURL + '/api/v2',
+//   headers: {
+//     'Content-type': 'application/json',
+//     Authorization: 'Api-Key WIQJQZ1MDSKATO2T53TR',
+//   },
+// })