refactor: converted the remaining components to typescript (#558)

src/components/CategoryEditModal.vue

@@ -34,7 +34,7 @@ b-modal(id="edit" ref="edit" title="Edit category" @show="resetModal" @hidden="h
       | Inherit parent color
     div.mt-1(v-show="!editing.inherit_color")
       color-picker(v-model="editing.color")
-  
+
   hr
   div.my-1
     b Productivity score
@@ -50,9 +50,9 @@ b-modal(id="edit" ref="edit" title="Edit category" @show="resetModal" @hidden="h
       | Remove category
 </template>
 
-<script>
+<script lang="ts">
 import _ from 'lodash';
-import ColorPicker from '~/components/ColorPicker';
+import ColorPicker from '~/components/ColorPicker.vue';
 import { useCategoryStore } from '~/stores/categories';
 import { mapState } from 'pinia';
 import { validateRegex, isRegexBroad } from '~/util/validate';

src/components/CategoryEditTree.vue

@@ -31,7 +31,7 @@ div
     CategoryEditModal(:categoryId='editingId', @hidden="hideEditModal()")
 </template>
 
-<script>
+<script lang="ts">
 import 'vue-awesome/icons/regular/plus-square';
 import 'vue-awesome/icons/regular/minus-square';
 import 'vue-awesome/icons/circle';

src/components/ColorPicker.vue

@@ -32,7 +32,7 @@ div
 }
 </style>
 
-<script>
+<script lang="ts">
 // Based on https://codepen.io/Brownsugar/pen/NaGPKy
 import 'vue-awesome/icons/sync';
 

src/components/DevOnly.vue

@@ -8,7 +8,7 @@ div(v-if="show", style="border: 1px solid #aaa; border-radius: 5px")
   slot
 </template>
 
-<script>
+<script lang="ts">
 export default {
   props: {
     note: {

src/components/ErrorBoundary.vue

@@ -5,7 +5,7 @@ div
 	slot
 </template>
 
-<script>
+<script lang="ts">
 // Based on: https://medium.com/@dillonchanis/handling-errors-in-vue-with-error-boundaries-91f6ead0093b
 export default {
   name: 'ErrorBoundary',

src/components/EventEditor.vue

@@ -51,7 +51,7 @@ b-modal(v-if="event && event.id", :id="'edit-modal-' + event.id", ref="eventEdit
 
 <style lang="scss"></style>
 
-<script>
+<script lang="ts">
 // This EventEditor can be used to edit events in a specific bucket.
 //
 // It is used in:

src/components/Footer.vue

@@ -37,7 +37,7 @@ div.container(style="color: #555; font-size: 0.9em")
         | Donate
 </template>
 
-<script>
+<script lang="ts">
 // only import the icons you use to reduce bundle size
 import 'vue-awesome/icons/brands/twitter';
 import 'vue-awesome/icons/brands/github';

src/components/Header.vue

@@ -95,7 +95,7 @@ div(:class="{'fixed-top-padding': fixedTopMenu}")
 }
 </style>
 
-<script>
+<script lang="ts">
 // only import the icons you use to reduce bundle size
 import 'vue-awesome/icons/calendar-day';
 import 'vue-awesome/icons/calendar-week';
@@ -125,6 +125,7 @@ import _ from 'lodash';
 import { mapState } from 'pinia';
 import { useSettingsStore } from '~/stores/settings';
 import { useBucketsStore } from '~/stores/buckets';
+import { IBucket } from '~/util/interfaces';
 
 export default {
   name: 'Header',
@@ -141,18 +142,18 @@ export default {
   mounted: async function () {
     const bucketStore = useBucketsStore();
     await bucketStore.ensureLoaded();
-    const buckets = bucketStore.buckets;
+    const buckets: IBucket[] = bucketStore.buckets;
     const types_by_host = {};
 
     const activityViews = [];
 
     // TODO: Change to use same bucket detection logic as get_buckets/set_available in store/modules/activity.ts
     _.each(buckets, v => {
       types_by_host[v.hostname] = types_by_host[v.hostname] || {};
-      // The '&& true;' is just to typecoerce into booleans
-      types_by_host[v.hostname].afk |= v.type == 'afkstatus';
-      types_by_host[v.hostname].window |= v.type == 'currentwindow';
-      types_by_host[v.hostname].android |= v.type == 'currentwindow' && v.id.includes('android'); // Use other bucket type ID in the future
+      types_by_host[v.hostname].afk ||= v.type == 'afkstatus';
+      types_by_host[v.hostname].window ||= v.type == 'currentwindow';
+      // TODO: Use other bucket type ID in the future
+      types_by_host[v.hostname].android ||= v.type == 'currentwindow' && v.id.includes('android');
     });
     //console.log(types_by_host);
 
@@ -166,7 +167,7 @@ export default {
           icon: 'desktop',
         });
       }
-      if (types.android) {
+      if (types['android']) {
         activityViews.push({
           name: `${hostname} (Android)`,
           hostname: hostname,

src/components/InputTimeInterval.vue

@@ -51,7 +51,7 @@ div
 
 <style scoped lang="scss"></style>
 
-<script>
+<script lang="ts">
 import moment from 'moment';
 import 'vue-awesome/icons/sync';
 export default {

src/components/NewReleaseNotification.vue

@@ -13,7 +13,7 @@
       button(type="button", class="close", @click="isFollowUpVisible=false") ×
 </template>
 
-<script>
+<script lang="ts">
 import axios from 'axios';
 import moment from 'moment';
 import semver from 'semver';

src/components/SelectableEventView.vue

@@ -18,7 +18,7 @@ div
     pre {{ events }}
 </template>
 
-<script>
+<script lang="ts">
 export default {
   name: 'aw-selectable-eventview',
   props: {

src/components/SelectableVisualization.vue

@@ -94,7 +94,7 @@ div
 }
 </style>
 
-<script>
+<script lang="ts">
 import _ from 'lodash';
 import 'vue-awesome/icons/cog';
 import 'vue-awesome/icons/times';

src/components/StopwatchEntry.vue

@@ -29,7 +29,7 @@ div
 }
 </style>
 
-<script>
+<script lang="ts">
 import moment from 'moment';
 import 'vue-awesome/icons/edit';
 import 'vue-awesome/icons/stop';
@@ -54,7 +54,7 @@ export default {
     stop: async function () {
       const new_event = JSON.parse(JSON.stringify(this.event));
       new_event.data.running = false;
-      new_event.duration = (moment() - moment(new_event.timestamp)) / 1000;
+      new_event.duration = moment().diff(moment(new_event.timestamp)) / 1000;
       await this.$aw.replaceEvent(this.bucket_id, new_event);
       this.$emit('update', new_event);
     },

src/components/UncategorizedNotification.vue

@@ -10,7 +10,7 @@ div
       | You can address this by using the #[router-link(:to="{ path: '/settings/category-builder' }") Category Builder].
 </template>
 
-<script>
+<script lang="ts">
 import { mapState } from 'pinia';
 import { useActivityStore } from '~/stores/activity';
 

src/components/UserSatisfactionPoll.vue

@@ -63,7 +63,7 @@ ul {
 }
 </style>
 
-<script>
+<script lang="ts">
 import { range } from 'lodash/fp';
 import moment from 'moment';
 

src/visualizations/CategoryTree.vue

@@ -32,7 +32,7 @@ div(style="font-size: 0.9em")
 }
 </style>
 
-<script>
+<script lang="ts">
 import 'vue-awesome/icons/circle';
 import 'vue-awesome/icons/regular/plus-square';
 import 'vue-awesome/icons/regular/minus-square';

src/visualizations/EventList.vue

@@ -114,7 +114,7 @@ $border-color: #ddd;
 }
 </style>
 
-<script>
+<script lang="ts">
 import 'vue-awesome/icons/edit';
 import 'vue-awesome/icons/tags';
 import 'vue-awesome/icons/clock';

src/visualizations/PeriodUsage.vue

@@ -13,7 +13,7 @@ svg {
 }
 </style>
 
-<script>
+<script lang="ts">
 // NOTE: This is just a Vue.js component wrapper for periodusage.js
 //       Code should generally go in the framework-independent file.
 

src/visualizations/Score.vue

@@ -34,29 +34,30 @@ div
             | {{ (Math.round(cat.data.$total_score * 10) / 10).toFixed(1) }}
 </template>
 
-<script>
+<script lang="ts">
 import _ from 'lodash';
 import { useActivityStore } from '~/stores/activity';
+import { IEvent } from '~/util/interfaces';
 
 // TODO: Maybe add a "Category Tree"-style visualization?
 
 export default {
   name: 'aw-score',
   computed: {
-    categories_with_score: function () {
+    categories_with_score: function (): IEvent[] {
       // FIXME: Does this get all category time? Or just top ones?
       const top_categories = useActivityStore().category.top;
       return _.map(top_categories, cat => {
         cat.data.$total_score = (cat.duration / (60 * 60)) * cat.data.$score;
         return cat;
       });
     },
-    score: function () {
+    score: function (): number {
       return _.sum(_.map(this.categories_with_score, cat => cat.data.$total_score));
     },
     score_productive_percent() {
       // Compute the percentage of time spent on productive activities (score > 0)
-      const total_time = _.sumBy(this.categories_with_score, cat => cat.duration);
+      const total_time = _.sumBy(this.categories_with_score as IEvent[], cat => cat.duration);
       const productive_time = _.sumBy(
         _.filter(this.categories_with_score, cat => cat.data.$total_score > 0),
         cat => cat.duration

src/visualizations/Summary.vue

@@ -17,7 +17,7 @@ div
 }
 </style>
 
-<script>
+<script lang="ts">
 // NOTE: This is just a Vue.js component wrapper for summary.ts
 //       Code should generally go in the framework-independent file.
 

src/visualizations/SunburstCategories.vue

@@ -22,7 +22,7 @@ sunburst(:data="data", :colorScale="colorfunc", :getCategoryForColor="categoryFo
   //breadcrumbTrail(slot="legend" slot-scope="{ nodes, colorGetter, width }" :current="nodes.mouseOver" :root="nodes.root" :colorGetter="colorGetter" :from="nodes.clicked" :width="width" :item-width="100" :order="0")
 </template>
 
-<script>
+<script lang="ts">
 import {
   breadcrumbTrail,
   highlightOnHover,

src/visualizations/TimelineInspect.vue

@@ -9,7 +9,7 @@ svg {
 }
 </style>
 
-<script>
+<script lang="ts">
 // NOTE: This is just a Vue.js component wrapper for timeline.js
 //       Code should generally go in the framework-independent file.
 

src/visualizations/TimelineSimple.vue

@@ -9,7 +9,7 @@ svg {
 }
 </style>
 
-<script>
+<script lang="ts">
 // NOTE: This is just a Vue.js component wrapper for timeline-simple.js
 //       Code should generally go in the framework-independent file.