datemoment

    import moment from 'moment'
    export default {
        data() {
            return {
                projects: null,
                newTimerName: '',
                newProjectName: '',
                activeTimerString: 'Calculating...',
                counter: { seconds: 0, timer: null },
            }
        },
        created() {
            window.axios.get('/projects').then(response => {
                this.projects = response.data
                window.axios.get('/project/timers/active').then(response => {
                    if (response.data.id !== undefined) {
                        this.startTimer(response.data.project, response.data)
                    }
                })
            })
        },
        methods: {
            /**
             * Conditionally pads a number with "0"
             */
            _padNumber: number =>  (number > 9 || number === 0) ? number : "0" + number,

            /**
             * Splits seconds into hours, minutes, and seconds.
             */
            _readableTimeFromSeconds: function(seconds) {
                const hours = 3600 > seconds ? 0 : parseInt(seconds / 3600, 10)
                return {
                    hours: this._padNumber(hours),
                    seconds: this._padNumber(seconds % 60),
                    minutes: this._padNumber(parseInt(seconds / 60, 10) % 60),
                }
            },

            /**
             * Calculate the amount of time spent on the project using the timer object.
             */
            calculateTimeSpent: function (timer) {
                if (timer.stopped_at) {
                    const started = moment(timer.started_at)
                    const stopped = moment(timer.stopped_at)
                    const time = this._readableTimeFromSeconds(
                        parseInt(moment.duration(stopped.diff(started)).asSeconds())
                    )
                    return `${time.hours} Hours | ${time.minutes} mins | ${time.seconds} seconds`
                }
                return ''
            },

            /**
             * Determines if there is an active timer and whether it belongs to the project
             * passed into the function.
             */
            showTimerForProject: function (project, timer) {
                return this.counter.timer &&
                       this.counter.timer.id === timer.id &&
                       this.counter.timer.project.id === project.id
            },

            /**
             * Start counting the timer. Tick tock.
             */
            startTimer: function (project, timer) {
                const started = moment(timer.started_at)

                this.counter.timer = timer
                this.counter.timer.project = project
                this.counter.seconds = parseInt(moment.duration(moment().diff(started)).asSeconds())
                this.counter.ticker = setInterval(() => {
                    const time = this._readableTimeFromSeconds(++vm.counter.seconds)

                    this.activeTimerString = `${time.hours} Hours | ${time.minutes}:${time.seconds}`
                }, 1000)
            },

            /**
             * Stop the timer from the API and then from the local counter.
             */
            stopTimer: function () {
                window.axios.post(`/projects/${this.counter.timer.id}/timers/stop`)
                            .then(response => {
                                // Loop through the projects and get the right project...
                                this.projects.forEach(project => {
                                    if (project.id === parseInt(this.counter.timer.project.id)) {
                                        // Loop through the timers of the project and set the `stopped_at` time
                                        return project.timers.forEach(timer => {
                                            if (timer.id === parseInt(this.counter.timer.id)) {
                                                return timer.stopped_at = response.data.stopped_at
                                            }
                                        })
                                    }
                                });

                                // Stop the ticker
                                clearInterval(this.counter.ticker)

                                // Reset the counter and timer string
                                this.counter = { seconds: 0, timer: null }
                                this.activeTimerString = 'Calculating...'
                            })
            },

            /**
             * Create a new timer.
             */
            createTimer: function (project) {
                window.axios.post(`/projects/${project.id}/timers`, {name: this.newTimerName})
                            .then(response => {
                                project.timers.push(response.data)
                                this.startTimer(response.data.project, response.data)
                            })

                this.newTimerName = ''
            },

            /**
             * Create a new project.
             */
            createProject: function () {
                window.axios.post('/projects', {name: this.newProjectName})
                            .then(response => this.projects.push(response.data))

                this.newProjectName = ''
            }
        },
    }