fix: fixed vite builds!

styles fixed by disabling vite server CSP
ActivityWatch · May 3, 2024 · a5a6ea0 · a5a6ea0
1 parent b9978e3
commit a5a6ea0
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 22 deletions.
diff --git a/Makefile b/Makefile
@@ -14,6 +14,12 @@ endif
 build: install static/logo.png static/logo.svg
 	npm run build ${androidflag}
 
+vite-build:
+	npx vite build
+
+vite-dev:
+	npx vite
+
 static/logo.%: media/logo/logo.%
 	@mkdir -p static
 	cp $< $@

diff --git a/index.html b/index.html
@@ -8,10 +8,6 @@
     <!-- Verify with https://csp-evaluator.withgoogle.com/ -->
     <!-- TODO: fix CSP (should depend on prod/dev mode, as pre-vite )-->
     <meta http-equiv="Content-Security-Policy" content="default-src 'self' *:5666 ws://*:27180 https://api.github.com/repos/ActivityWatch/activitywatch/releases/latest; img-src 'self' data:; font-src 'self' data:; style-src 'self' 'unsafe-inline'; object-src 'none'; script-src 'self' 'unsafe-eval'">
-    <!-- TODO: is this really the way? imports in main.js doesn't seem to work -->
-    <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css">
-    <link rel="stylesheet" href="/node_modules/bootstrap-vue/dist/bootstrap-vue.css">
-    <link rel="stylesheet" href="/src/style/style.scss">
   </head>
   <body>
     <noscript>

diff --git a/src/components/CategoryEditTree.vue b/src/components/CategoryEditTree.vue
@@ -97,6 +97,6 @@ export default {
 <style scoped lang="scss">
 .row.class:hover {
   background-color: #eee;
-  boder-radius: 5px;
+  border-radius: 5px;
 }
 </style>
diff --git a/src/main.js b/src/main.js
@@ -16,6 +16,7 @@ Vue.component('datetime', Datetime);
 // Load the Varela Round font
 import 'typeface-varela-round';
 
+// Load the main style
 import './style/style.scss';
 
 // Loads all the filters

diff --git a/src/visualizations/CategoryTree.vue b/src/visualizations/CategoryTree.vue
@@ -36,8 +36,9 @@ div(style="font-size: 0.9em")
 import 'vue-awesome/icons/circle';
 import 'vue-awesome/icons/regular/plus-square';
 import 'vue-awesome/icons/regular/minus-square';
-const _ = require('lodash');
-const classes = require('~/util/classes.ts');
+import _ from 'lodash';
+import { build_category_hierarchy, flatten_category_hierarchy } from '../util/classes.ts';
+import { IEvent } from '../util/interfaces.ts';
 
 function _get_child_cats(cat, all_cats) {
   return _.filter(all_cats, c => _.isEqual(c.parent, cat.name));
@@ -75,16 +76,16 @@ export default {
     },
     category_hierarchy: function () {
       if (!this.events) return [];
-      const events = JSON.parse(JSON.stringify(this.events));
+      const events: IEvent[] = JSON.parse(JSON.stringify(this.events)) as IEvent[];
 
-      const hier = classes.build_category_hierarchy(
+      const hier = build_category_hierarchy(
         _.map(events, e => {
-          return { name: e.data['$category'] };
+          return { name: e.data['$category'], rule: { type: 'none' } };
         })
       );
 
-      let cats = classes.flatten_category_hierarchy(hier).map(c => {
-        c.duration = _.sumBy(
+      let cats = flatten_category_hierarchy(hier).map(c => {
+        c['duration'] = _.sumBy(
           events.filter(e => {
             const pcat = e.data['$category'].slice(0, c.name.length);
             return _.isEqual(c.name, pcat);
@@ -96,7 +97,7 @@ export default {
 
       const cats_with_depth0 = _.sortBy(
         _.filter(cats, c => c.depth == 0),
-        c => -c.duration
+        c => -c['duration']
       );
       _.map(cats_with_depth0, c => _assign_children(c, cats));
 

diff --git a/src/visualizations/periodusage.js b/src/visualizations/periodusage.js
@@ -1,10 +1,8 @@
-'use strict';
+import * as d3 from 'd3';
+import _ from 'lodash';
+import moment from 'moment';
 
-const d3 = require('d3');
-const _ = require('lodash');
-const moment = require('moment');
-
-import { seconds_to_duration, get_hour_offset } from '../util/time';
+import { seconds_to_duration, get_hour_offset } from '../util/time.ts';
 
 function create(svg_elem) {
   // Clear element

diff --git a/vite.config.js b/vite.config.js
@@ -8,9 +8,10 @@ export default defineConfig(({ mode }) => {
   return {
     server: {
       port: 27180,
-      headers: {
-        'Content-Security-Policy': PRODUCTION ? "default-src 'self'" : "default-src 'self' *:5666",
-      },
+      // This breaks a bunch of style-related stuff (at least):
+      //headers: {
+      //  'Content-Security-Policy': PRODUCTION ? "default-src 'self'" : "default-src 'self' *:5666",
+      //},
     },
     plugins: [vue()],
     publicDir: './static',