2018-08-28 22:50:22 +02:00
|
|
|
import Vue from 'vue'
|
|
|
|
import App from './App.vue'
|
2018-09-06 19:46:09 +02:00
|
|
|
import router from './router'
|
2018-08-28 22:50:22 +02:00
|
|
|
|
2020-05-09 21:39:46 +02:00
|
|
|
import {VERSION} from './version.json'
|
2020-09-05 22:35:52 +02:00
|
|
|
// Register the modal
|
|
|
|
import Modal from './components/modal/modal'
|
|
|
|
// Add CSS
|
|
|
|
import './styles/vikunja.scss'
|
|
|
|
// Notifications
|
|
|
|
import Notifications from 'vue-notification'
|
|
|
|
// Icons
|
|
|
|
import {library} from '@fortawesome/fontawesome-svg-core'
|
|
|
|
import {
|
|
|
|
faAlignLeft,
|
|
|
|
faAngleRight,
|
|
|
|
faBars,
|
|
|
|
faCalendar,
|
|
|
|
faCalendarWeek,
|
|
|
|
faCheck,
|
|
|
|
faCheckDouble,
|
|
|
|
faChevronDown,
|
|
|
|
faCloudDownloadAlt,
|
|
|
|
faCloudUploadAlt,
|
|
|
|
faCog,
|
|
|
|
faEllipsisV,
|
|
|
|
faExclamation,
|
|
|
|
faFillDrip,
|
|
|
|
faFilter,
|
|
|
|
faHistory,
|
|
|
|
faKeyboard,
|
|
|
|
faLayerGroup,
|
|
|
|
faList,
|
|
|
|
faListOl,
|
|
|
|
faLock,
|
|
|
|
faPaperclip,
|
|
|
|
faPaste,
|
|
|
|
faPen,
|
|
|
|
faPencilAlt,
|
|
|
|
faPercent,
|
|
|
|
faPlus,
|
|
|
|
faPowerOff,
|
|
|
|
faSearch,
|
|
|
|
faSignOutAlt,
|
|
|
|
faSort,
|
|
|
|
faSortUp,
|
|
|
|
faStar as faStarSolid,
|
|
|
|
faTachometerAlt,
|
|
|
|
faTags,
|
|
|
|
faTasks,
|
|
|
|
faTh,
|
|
|
|
faTimes,
|
|
|
|
faTrashAlt,
|
|
|
|
faUser,
|
|
|
|
faUsers,
|
|
|
|
} from '@fortawesome/free-solid-svg-icons'
|
|
|
|
import {faCalendarAlt, faClock, faComments, faSave, faStar, faTimesCircle} from '@fortawesome/free-regular-svg-icons'
|
|
|
|
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
|
|
|
|
// Tooltip
|
|
|
|
import VTooltip from 'v-tooltip'
|
|
|
|
// PWA
|
|
|
|
import './registerServiceWorker'
|
|
|
|
|
|
|
|
// Shortcuts
|
|
|
|
import vueShortkey from 'vue-shortkey'
|
|
|
|
// Mixins
|
|
|
|
import message from './message'
|
|
|
|
import {format, formatDistance} from 'date-fns'
|
|
|
|
import {colorIsDark} from './helpers/colorIsDark'
|
|
|
|
import {setTitle} from './helpers/setTitle'
|
|
|
|
// Vuex
|
|
|
|
import {store} from './store'
|
|
|
|
|
2020-05-09 21:39:46 +02:00
|
|
|
console.info(`Vikunja frontend version ${VERSION}`)
|
|
|
|
|
2020-10-11 12:13:35 +02:00
|
|
|
// Check if we have an api url in local storage and use it if that's the case
|
|
|
|
const apiUrlFromStorage = localStorage.getItem('API_URL')
|
|
|
|
if (apiUrlFromStorage !== null) {
|
|
|
|
window.API_URL = apiUrlFromStorage
|
|
|
|
}
|
|
|
|
|
2020-05-10 18:26:33 +02:00
|
|
|
// Make sure the api url does not contain a / at the end
|
2020-09-05 22:35:52 +02:00
|
|
|
if (window.API_URL.substr(window.API_URL.length - 1, window.API_URL.length) === '/') {
|
2020-05-10 18:26:33 +02:00
|
|
|
window.API_URL = window.API_URL.substr(0, window.API_URL.length - 1)
|
|
|
|
}
|
|
|
|
|
2018-09-12 08:22:17 +02:00
|
|
|
Vue.component('modal', Modal)
|
|
|
|
|
2018-08-28 22:50:22 +02:00
|
|
|
Vue.config.productionTip = false
|
|
|
|
|
2018-09-08 21:43:16 +02:00
|
|
|
Vue.use(Notifications)
|
|
|
|
|
2018-09-09 17:23:06 +02:00
|
|
|
library.add(faSignOutAlt)
|
2018-09-09 19:09:46 +02:00
|
|
|
library.add(faPlus)
|
|
|
|
library.add(faListOl)
|
2018-09-09 22:09:20 +02:00
|
|
|
library.add(faTasks)
|
2018-09-10 21:06:39 +02:00
|
|
|
library.add(faCog)
|
|
|
|
library.add(faAngleRight)
|
2018-09-11 19:20:07 +02:00
|
|
|
library.add(faLayerGroup)
|
2018-09-11 20:16:08 +02:00
|
|
|
library.add(faTrashAlt)
|
2018-09-14 07:23:25 +02:00
|
|
|
library.add(faUsers)
|
2018-09-14 08:29:09 +02:00
|
|
|
library.add(faUser)
|
|
|
|
library.add(faLock)
|
2018-09-18 07:38:26 +02:00
|
|
|
library.add(faPen)
|
2018-11-25 22:02:22 +01:00
|
|
|
library.add(faTimes)
|
2018-12-25 16:03:51 +01:00
|
|
|
library.add(faTachometerAlt)
|
|
|
|
library.add(faCalendar)
|
|
|
|
library.add(faTimesCircle)
|
|
|
|
library.add(faBars)
|
|
|
|
library.add(faPowerOff)
|
2018-12-25 23:41:55 +01:00
|
|
|
library.add(faCalendarWeek)
|
|
|
|
library.add(faCalendarAlt)
|
2019-03-03 16:03:08 +01:00
|
|
|
library.add(faExclamation)
|
2019-03-07 20:48:40 +01:00
|
|
|
library.add(faTags)
|
2019-04-23 21:50:37 +02:00
|
|
|
library.add(faChevronDown)
|
2019-04-29 23:41:39 +02:00
|
|
|
library.add(faCheck)
|
2019-09-09 19:55:43 +02:00
|
|
|
library.add(faPaste)
|
2019-10-19 21:41:23 +02:00
|
|
|
library.add(faPencilAlt)
|
2019-11-24 14:16:24 +01:00
|
|
|
library.add(faCloudDownloadAlt)
|
|
|
|
library.add(faCloudUploadAlt)
|
|
|
|
library.add(faPercent)
|
|
|
|
library.add(faStar)
|
|
|
|
library.add(faAlignLeft)
|
|
|
|
library.add(faPaperclip)
|
|
|
|
library.add(faClock)
|
|
|
|
library.add(faHistory)
|
2020-01-31 11:05:53 +01:00
|
|
|
library.add(faSearch)
|
2020-02-09 14:46:01 +01:00
|
|
|
library.add(faCheckDouble)
|
2020-02-25 21:11:36 +01:00
|
|
|
library.add(faComments)
|
2020-04-01 22:13:57 +02:00
|
|
|
library.add(faTh)
|
|
|
|
library.add(faSort)
|
|
|
|
library.add(faSortUp)
|
2020-04-18 14:39:56 +02:00
|
|
|
library.add(faList)
|
2020-04-26 01:11:34 +02:00
|
|
|
library.add(faEllipsisV)
|
2020-06-11 17:34:13 +02:00
|
|
|
library.add(faFilter)
|
2020-06-21 20:27:39 +02:00
|
|
|
library.add(faFillDrip)
|
2020-07-25 16:52:04 +02:00
|
|
|
library.add(faKeyboard)
|
2020-09-04 22:01:02 +02:00
|
|
|
library.add(faSave)
|
2020-09-05 22:16:17 +02:00
|
|
|
library.add(faStarSolid)
|
2018-09-09 17:23:06 +02:00
|
|
|
|
|
|
|
Vue.component('icon', FontAwesomeIcon)
|
|
|
|
|
2020-08-06 12:28:41 +02:00
|
|
|
Vue.use(VTooltip, {defaultHtml: false})
|
2018-12-25 16:03:51 +01:00
|
|
|
|
2020-07-25 16:52:04 +02:00
|
|
|
Vue.use(vueShortkey)
|
|
|
|
|
2018-12-25 16:03:51 +01:00
|
|
|
// Set focus
|
|
|
|
Vue.directive('focus', {
|
|
|
|
// When the bound element is inserted into the DOM...
|
2020-08-11 21:04:22 +02:00
|
|
|
inserted: (el, {modifiers}) => {
|
2020-01-31 17:19:04 +01:00
|
|
|
// Focus the element only if the viewport is big enough
|
|
|
|
// auto focusing elements on mobile can be annoying since in these cases the
|
|
|
|
// keyboard always pops up and takes half of the available space on the screen.
|
|
|
|
// The threshhold is the same as the breakpoints in css.
|
2020-08-11 21:04:22 +02:00
|
|
|
if (window.innerWidth > 769 || (typeof modifiers.always !== 'undefined' && modifiers.always)) {
|
2020-01-31 17:19:04 +01:00
|
|
|
el.focus()
|
|
|
|
}
|
2020-09-05 22:35:52 +02:00
|
|
|
},
|
2018-12-25 16:03:51 +01:00
|
|
|
})
|
|
|
|
|
2020-01-30 21:49:00 +01:00
|
|
|
Vue.mixin({
|
|
|
|
methods: {
|
2020-03-23 18:46:33 +01:00
|
|
|
formatDateSince: date => {
|
2020-07-14 21:26:05 +02:00
|
|
|
if (typeof date === 'string') {
|
|
|
|
date = new Date(date)
|
|
|
|
}
|
2020-03-23 18:46:33 +01:00
|
|
|
const currentDate = new Date()
|
2020-09-05 22:35:52 +02:00
|
|
|
let formatted = ''
|
2020-03-23 18:46:33 +01:00
|
|
|
if (date > currentDate) {
|
|
|
|
formatted += 'in '
|
|
|
|
}
|
|
|
|
formatted += formatDistance(date, currentDate)
|
2020-09-05 22:35:52 +02:00
|
|
|
if (date < currentDate) {
|
2020-03-23 18:46:33 +01:00
|
|
|
formatted += ' ago'
|
|
|
|
}
|
|
|
|
|
2020-09-05 22:35:52 +02:00
|
|
|
return formatted
|
2020-03-23 18:46:33 +01:00
|
|
|
},
|
2020-07-14 21:26:05 +02:00
|
|
|
formatDate: date => {
|
|
|
|
if (typeof date === 'string') {
|
|
|
|
date = new Date(date)
|
|
|
|
}
|
2020-09-05 22:35:52 +02:00
|
|
|
return date ? format(date, 'PPPPpppp') : ''
|
2020-07-14 21:26:05 +02:00
|
|
|
},
|
2020-03-02 21:19:26 +01:00
|
|
|
error: (e, context, actions = []) => message.error(e, context, actions),
|
|
|
|
success: (s, context, actions = []) => message.success(s, context, actions),
|
2020-07-07 22:07:13 +02:00
|
|
|
colorIsDark: colorIsDark,
|
|
|
|
setTitle: setTitle,
|
2020-09-05 22:35:52 +02:00
|
|
|
},
|
2020-01-30 21:49:00 +01:00
|
|
|
})
|
|
|
|
|
2018-08-28 22:50:22 +02:00
|
|
|
new Vue({
|
2020-01-30 22:47:08 +01:00
|
|
|
router,
|
2020-05-08 20:43:51 +02:00
|
|
|
store,
|
2020-09-05 22:35:52 +02:00
|
|
|
render: h => h(App),
|
2018-08-28 22:50:22 +02:00
|
|
|
}).$mount('#app')
|