-
9 |
65 |
66 |
67 |
68 |
70 |
71 |
72 |
76 |
78 |
79 |
80 |
81 |
82 |
--------------------------------------------------------------------------------
/ui/src/components/quickEntryDisplay.vue:
--------------------------------------------------------------------------------
1 |
46 |
47 |
48 | Hammond
69 |
49 |
50 |
57 |
60 |
61 |
67 |
69 |
--------------------------------------------------------------------------------
/ui/src/components/shareVehicle.vue:
--------------------------------------------------------------------------------
1 |
90 |
91 |
92 |
62 |
93 |
95 |
109 |
110 |
111 |
--------------------------------------------------------------------------------
/ui/src/components/statsWidget.vue:
--------------------------------------------------------------------------------
1 |
128 |
129 |
130 | Share {{ vehicle.nickname }}
94 |
96 |
108 |
97 |
98 |
99 | {{ model.name }}
100 |
101 |
103 |
104 | Make Owner
105 |
131 |
150 |
151 |
--------------------------------------------------------------------------------
/ui/src/design/_colors.scss:
--------------------------------------------------------------------------------
1 | // CONTENT
2 | $color-body-bg: #f9f7f5;
3 | $color-text: #444;
4 | $color-heading-text: #35495e;
5 |
6 | // LINKS
7 | $color-link-text: #39a275;
8 | $color-link-text-active: $color-text;
9 |
10 | // INPUTS
11 | $color-input-border: lighten($color-heading-text, 50%);
12 |
13 | // BUTTONS
14 | $color-button-bg: $color-link-text;
15 | $color-button-disabled-bg: darken(desaturate($color-button-bg, 20%), 10%);
16 | $color-button-text: white;
17 |
--------------------------------------------------------------------------------
/ui/src/design/_durations.scss:
--------------------------------------------------------------------------------
1 | $duration-animation-base: 300ms;
2 |
--------------------------------------------------------------------------------
/ui/src/design/_fonts.scss:
--------------------------------------------------------------------------------
1 | $system-default-font-family: -apple-system, 'BlinkMacSystemFont', 'Segoe UI',
2 | 'Helvetica', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
3 | 'Segoe UI Symbol';
4 |
5 | $heading-font-family: $system-default-font-family;
6 | $heading-font-weight: 600;
7 |
8 | $content-font-family: $system-default-font-family;
9 | $content-font-weight: 400;
10 |
11 | %font-heading {
12 | font-family: $heading-font-family;
13 | font-weight: $heading-font-weight;
14 | color: $color-heading-text;
15 | }
16 |
17 | %font-content {
18 | font-family: $content-font-family;
19 | font-weight: $content-font-weight;
20 | color: $color-text;
21 | }
22 |
--------------------------------------------------------------------------------
/ui/src/design/_layers.scss:
--------------------------------------------------------------------------------
1 | $layer-negative-z-index: -1;
2 | $layer-page-z-index: 1;
3 | $layer-dropdown-z-index: 2;
4 | $layer-modal-z-index: 3;
5 | $layer-popover-z-index: 4;
6 | $layer-tooltip-z-index: 5;
7 |
--------------------------------------------------------------------------------
/ui/src/design/_sizes.scss:
--------------------------------------------------------------------------------
1 | // GRID
2 | $size-grid-padding: 1.3rem;
3 |
4 | // CONTENT
5 | $size-content-width-max: 50rem;
6 | $size-content-width-min: 25rem;
7 |
8 | // INPUTS
9 | $size-input-padding-vertical: 0.75em;
10 | $size-input-padding-horizontal: 1em;
11 | $size-input-padding: $size-input-padding-vertical $size-input-padding-horizontal;
12 | $size-input-border: 1px;
13 | $size-input-border-radius: (1em + $size-input-padding-vertical * 2) / 10;
14 |
15 | // BUTTONS
16 | $size-button-padding-vertical: $size-grid-padding / 2;
17 | $size-button-padding-horizontal: $size-grid-padding / 1.5;
18 | $size-button-padding: $size-button-padding-vertical
19 | $size-button-padding-horizontal;
20 |
--------------------------------------------------------------------------------
/ui/src/design/index.scss:
--------------------------------------------------------------------------------
1 | @import 'colors';
2 | @import 'durations';
3 | @import 'fonts';
4 | @import 'layers';
5 | @import 'sizes';
6 | @import 'typography';
7 |
8 | :export {
9 | // Any values that need to be accessible from JavaScript
10 | // outside of a Vue component can be defined here, prefixed
11 | // with `global-` to avoid conflicts with classes. For
12 | // example:
13 | //
14 | // global-grid-padding: $size-grid-padding;
15 | //
16 | // Then in a JavaScript file, you can import this object
17 | // as you would normally with:
18 | //
19 | // import design from '@design'
20 | //
21 | // console.log(design['global-grid-padding'])
22 | }
23 |
--------------------------------------------------------------------------------
/ui/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Buefy from 'buefy'
3 | import router from '@router'
4 | import store from '@state/store'
5 | import { library } from '@fortawesome/fontawesome-svg-core'
6 | import {
7 | faCheck,
8 | faTimes,
9 | faArrowUp,
10 | faAngleLeft,
11 | faAngleRight,
12 | faCalendar,
13 | faEdit,
14 | faAngleDown,
15 | faAngleUp,
16 | faUpload,
17 | faExclamationCircle,
18 | faDownload,
19 | faEye,
20 | faEyeSlash,
21 | faTrash,
22 | faShare,
23 | faUserFriends,
24 | faTimesCircle,
25 | } from '@fortawesome/free-solid-svg-icons'
26 | import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
27 |
28 | import App from './app.vue'
29 |
30 | // Globally register all `_base`-prefixed components
31 | import '@components/_globals'
32 |
33 | import 'buefy/dist/buefy.css'
34 | import 'nprogress/nprogress.css'
35 |
36 | Vue.component('vue-fontawesome', FontAwesomeIcon)
37 | library.add(
38 | faCheck,
39 | faTimes,
40 | faArrowUp,
41 | faAngleLeft,
42 | faAngleRight,
43 | faCalendar,
44 | faEdit,
45 | faAngleDown,
46 | faAngleUp,
47 | faUpload,
48 | faExclamationCircle,
49 | faDownload,
50 | faEye,
51 | faEyeSlash,
52 | faTrash,
53 | faShare,
54 | faUserFriends,
55 | faTimesCircle
56 | )
57 | Vue.use(Buefy, {
58 | defaultIconComponent: 'vue-fontawesome',
59 | defaultIconPack: 'fas',
60 | })
61 |
62 | // Don't warn about using the dev version of Vue in development.
63 | Vue.config.productionTip = process.env.NODE_ENV === 'production'
64 |
65 | // If running inside Cypress...
66 | if (process.env.VUE_APP_TEST === 'e2e') {
67 | // Ensure tests fail when Vue emits an error.
68 | Vue.config.errorHandler = window.Cypress.cy.onUncaughtException
69 | }
70 |
71 | const app = new Vue({
72 | router,
73 | store,
74 |
75 | render: (h) => h(App),
76 | }).$mount('#app')
77 |
78 | // If running e2e tests...
79 | if (process.env.VUE_APP_TEST === 'e2e') {
80 | // Attach the app to the window, which can be useful
81 | // for manually setting state in Cypress commands
82 | // such as `cy.logIn()`.
83 | window.__app__ = app
84 | }
85 |
--------------------------------------------------------------------------------
/ui/src/router/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import VueRouter from 'vue-router'
3 | // https://github.com/declandewet/vue-meta
4 | import VueMeta from 'vue-meta'
5 | // Adds a loading bar at the top during page loads.
6 | import NProgress from 'nprogress/nprogress'
7 | import store from '@state/store'
8 | import routes from './routes'
9 |
10 | Vue.use(VueRouter)
11 | Vue.use(VueMeta, {
12 | // The component option name that vue-meta looks for meta info on.
13 | keyName: 'page',
14 | })
15 |
16 | const router = new VueRouter({
17 | routes,
18 | // Use the HTML5 history API (i.e. normal-looking routes)
19 | // instead of routes with hashes (e.g. example.com/#/about).
20 | // This may require some server configuration in production:
21 | // https://router.vuejs.org/en/essentials/history-mode.html#example-server-configurations
22 | mode: 'history',
23 | // Simulate native-like scroll behavior when navigating to a new
24 | // route and using back/forward buttons.
25 | scrollBehavior(to, from, savedPosition) {
26 | if (savedPosition) {
27 | return savedPosition
28 | } else {
29 | return { x: 0, y: 0 }
30 | }
31 | },
32 | })
33 |
34 | // Before each route evaluates...
35 | router.beforeEach((routeTo, routeFrom, next) => {
36 | // If this isn't an initial page load...
37 | if (routeFrom.name !== null) {
38 | // Start the route progress bar.
39 | NProgress.start()
40 | }
41 |
42 | // Check if auth is required on this route
43 | // (including nested routes).
44 | const authRequired = routeTo.matched.some((route) => route.meta.authRequired)
45 |
46 | // If auth isn't required for the route, just continue.
47 | if (!authRequired) return next()
48 |
49 | // If auth is required and the user is logged in...
50 | if (store.getters['auth/loggedIn']) {
51 | // Validate the local user token...
52 | return store.dispatch('auth/validate').then((validUser) => {
53 | // Then continue if the token still represents a valid user,
54 | // otherwise redirect to login.
55 |
56 | if (!validUser) {
57 | redirectToLogin()
58 | }
59 | const rolesRequired = routeTo.matched.some((route) => route.meta.roles)
60 |
61 | if (!rolesRequired) {
62 | return next()
63 | }
64 |
65 | const roles = routeTo.matched.find((route) => route.meta.roles).meta.roles
66 |
67 | roles.some((x) => x === validUser.role) ? next() : redirectToHome()
68 | })
69 | }
70 |
71 | // If auth is required and the user is NOT currently logged in,
72 | // redirect to login.
73 | redirectToLogin()
74 |
75 | function redirectToLogin() {
76 | // Pass the original route to the login component
77 | next({ name: 'login', query: { redirectFrom: routeTo.fullPath } })
78 | }
79 | function redirectToHome() {
80 | // Pass the original route to the login component
81 | next({ name: 'home', query: { redirectFrom: routeTo.fullPath } })
82 | }
83 | })
84 |
85 | router.beforeResolve(async (routeTo, routeFrom, next) => {
86 | // Create a `beforeResolve` hook, which fires whenever
87 | // `beforeRouteEnter` and `beforeRouteUpdate` would. This
88 | // allows us to ensure data is fetched even when params change,
89 | // but the resolved route does not. We put it in `meta` to
90 | // indicate that it's a hook we created, rather than part of
91 | // Vue Router (yet?).
92 | try {
93 | // For each matched route...
94 | for (const route of routeTo.matched) {
95 | await new Promise((resolve, reject) => {
96 | // If a `beforeResolve` hook is defined, call it with
97 | // the same arguments as the `beforeEnter` hook.
98 | if (route.meta && route.meta.beforeResolve) {
99 | route.meta.beforeResolve(routeTo, routeFrom, (...args) => {
100 | // If the user chose to redirect...
101 | if (args.length) {
102 | // If redirecting to the same route we're coming from...
103 | if (routeFrom.name === args[0].name) {
104 | // Complete the animation of the route progress bar.
105 | NProgress.done()
106 | }
107 | // Complete the redirect.
108 | next(...args)
109 | reject(new Error('Redirected'))
110 | } else {
111 | resolve()
112 | }
113 | })
114 | } else {
115 | // Otherwise, continue resolving the route.
116 | resolve()
117 | }
118 | })
119 | }
120 | // If a `beforeResolve` hook chose to redirect, just return.
121 | } catch (error) {
122 | return
123 | }
124 |
125 | // If we reach this point, continue resolving the route.
126 | next()
127 | })
128 |
129 | // When each route is finished evaluating...
130 | router.afterEach((routeTo, routeFrom) => {
131 | // Complete the animation of the route progress bar.
132 | NProgress.done()
133 | })
134 |
135 | export default router
136 |
--------------------------------------------------------------------------------
/ui/src/router/layouts/main.unit.js:
--------------------------------------------------------------------------------
1 | import MainLayout from './main.vue'
2 |
3 | describe('@layouts/main.vue', () => {
4 | it('renders its content', () => {
5 | const slotContent = '
132 |
133 |
141 | Stats
134 |
135 |
138 |
140 |
142 |
149 |
143 |
148 |
144 |
147 | {{ item.label }}
145 |{{ item.value }}
146 |Hello!
' 6 | const { element } = shallowMount(MainLayout, { 7 | slots: { 8 | default: slotContent, 9 | }, 10 | }) 11 | expect(element.innerHTML).toContain(slotContent) 12 | }) 13 | }) 14 | -------------------------------------------------------------------------------- /ui/src/router/layouts/main.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 |
11 |
14 |
15 |
--------------------------------------------------------------------------------
/ui/src/router/views/_404.unit.js:
--------------------------------------------------------------------------------
1 | import View404 from './_404.vue'
2 |
3 | describe('@views/404', () => {
4 | it('is a valid view', () => {
5 | expect(View404).toBeAViewComponent()
6 | })
7 | })
8 |
--------------------------------------------------------------------------------
/ui/src/router/views/_404.vue:
--------------------------------------------------------------------------------
1 |
18 |
19 |
20 | 22 | 404 23 | 24 | {{ resource }} 25 | 26 | Not Found 27 |
28 |35 | The page timed out while loading. Are you sure you're still connected to 36 | the Internet? 37 |
38 |
23 |
Import data into Hammond
24 |Choose from the following options to import data into Fuelly
25 |28 |
29 |
36 |
30 |
33 |Import
34 |
35 | Fuelly
31 |If you have been using Fuelly to store your vehicle data, export the CSV file from Fuelly and click here to import.
32 |33 |
29 |
33 | {{ user }}
34 | Quick Entries
63 |
67 |
104 |
68 |
103 |
69 |
102 |
70 |
88 |
100 |
101 |
71 | unprocessed
75 |
76 |
72 | {{ parseAndFormatDateTime(entry.createdAt) }}
73 |
74 |
77 |
78 | ![Placeholder image]()
84 |
85 | {{ entry.comments }}
105 |
107 | No Quick Entries right now.
106 |
64 |
73 |
65 |
72 |
66 |
71 | Site Settings
67 |68 | Update site level settings. These will be used as default values for new users. 69 |
70 |74 | 94 |