MOCO Browser Extension (#2)

* spike * initial draft * updated styling * skeleton * added bubble script to webpack * added linter settings * installs * first implementation * Update webpack config - write bundle to `/build` - add support for SASS - improve options view as a proof o concept for styling * Update es-lint rules to mach mocoapp * Upgrade npm packages * Mount Bubble only for configured services * Update react and babel * Move module resolution config to webpack * Syncrhonize apiClient with chrome storage * Load projects and initialize form with last project and task * Enhance service * Improve handling of changeset with defaults * Create activity * Show error page on missing configuration * Refactor so that changeset can be used as activity params * Show form errors * Fetch and show booked hours for service * Allow to book hours with colon, error handling, spinner * WIP: Shadow DOM * Remove shadow dom * Render App in iframe * Refactor App component to load projects and create activity * Bugsnag integration * Add title to form and timer hint to hours input field * Configure positioning of bubble * Get rid of shared browser instance * Show Calendar and animate buble * Update webpack config * Prevent double animation of bubble * Fix eslint * Add margin to iframe body * Submit form when pressing enter on textarea * Open select on Enter * Use local environment for development * Show upgrade error if version invalid * Add asana service * Add jira and wunderlist services, add better support for query strings * Match urls with hash * Show popup in browser action * Pump version, add version to zip file * Add youtrack service * WIP: always show browserAction * Refactor * Update design * Finalize release 1.0.3 * Fix styles * Add support for Firefox browser * Extract common webpack config * Fix eslint * Close modal with ESC key * Use TimeInputParser to parse hours input * Improve webpack config * Show modal instead of popup when clicking on browser action * Pre-select last booked activities on service * Remove badge from booked hours * Show error and success feedback on options page * Remove updateBrowserActionForTab * Animate Bubble on unmount * Fix select date * Refactor * Fix key shortcut * Show schedule in calendar * Upload source maps to bugsnag * Upload sourcemaps to bugsnag * Define command shortcuts * Fix race condition where both Bubble and content wanted to mount Popup The content script is now the only place, where the Popup is mounted * Replace hash in filename by version * No new line in textarea and updated shortcuts for chrome * Change shortcut to Ctrl+Shift+K * Fix cors issue in new chrome 73 * Style improvements * Only report errors from own sources * Prevent sending messages to browser tabs * Fix scrollbars in iframe * Add error page for unknown error * Add stop propagation to Bubble click event * Update error pages * Remove timeout in tabHandler. The messaging error occurs only when the browser extension is reloaded/updated without refreshing the browser tab. * Refactor messaging * Show spinner in popup * Extract message handler to own module * Update styles and texts of error pages * Ensure focus is on document when opening popup * Find projects by identifier and value, do not highlight selected option in select component * Update docs * Spread match properties on service; improve remote service configuration for jira and wunderlist * Add webpack plugin to remove source mapping url * Bugsnag do not collect user ip * Upload source maps before removing source mapping url in bundles * Add support for regex url patterns, update asana config. * Fix animation Set default transform property via css * Improve config for asana * Change to fad-in/out animation
2019-03-22 15:56:24 +01:00
parent cbf79b960c
commit 28a9a86e27
58 changed files with 11017 additions and 47 deletions
--- a/src/js/utils/TimeInputParser.js
+++ b/src/js/utils/TimeInputParser.js
@@ -0,0 +1,91 @@
+export default class TimeInputParser {
+  #input;
+
+  constructor(input) {
+    this.#input = input.toLowerCase().replace(/[\s()]/g, "")
+  }
+
+  parseSeconds() {
+    if (this.#isDecimal()) {
+      return Math.round(parseFloat(this.#parseDecimal()) * 3600)
+    } else if (this.#isTime()) {
+      return this.#parseTimeAsSeconds()
+    } else if (this.#isMinutes()) {
+      return this.#parseMinutesAsSeconds()
+    } else if (this.#isRange()) {
+      return this.#parseRange()
+    } else if (this.#isHoursAndMinutes()) {
+      return this.#parseHoursAndMinutes()
+    } else {
+      return Math.round(parseFloat(this.#parseDecimal()) * 3600)
+    }
+  }
+
+  #calculateFromHoursAndMinutes = (hours, minutes, isNegative) => {
+    const calculated = hours * 3600 + minutes * 60
+
+    return isNegative ? -calculated : calculated
+  };
+
+  #parseDecimal = () => {
+    return this.#input.replace(/[.,]/g, ".")
+  };
+
+  #parseTimeAsSeconds = () => {
+    const match = this.#isTime()
+
+    const isNegative = "-" == match[1]
+    const hours = parseInt(match[2])
+    const minutes = parseInt(match[3])
+
+    return this.#calculateFromHoursAndMinutes(hours, minutes, isNegative)
+  };
+
+  #parseMinutesAsSeconds = () => {
+    const minutes = parseInt(this.#isMinutes()[1])
+    return minutes * 60
+  };
+
+  #parseRange = () => {
+    const match = this.#isRange()
+
+    const from_hours = parseInt(match[1])
+    const from_minutes = parseInt(match[2])
+    const to_hours = parseInt(match[3])
+    const to_minutes = parseInt(match[4])
+    return (to_hours - from_hours) * 3600 + (to_minutes - from_minutes) * 60
+  };
+
+  #parseHoursAndMinutes = () => {
+    const match = this.#isHoursAndMinutes()
+
+    const isNegative = "-" == match[1]
+    const hours = parseInt(match[2])
+    const minutes = parseInt(match[3])
+
+    return this.#calculateFromHoursAndMinutes(hours, minutes, isNegative)
+  };
+
+  #isDecimal = () => {
+    return this.#input.match(/^([-]?[0-9]{0,2})[.,]{1}([0-9]{1,2})$/)
+  };
+
+  #isTime = () => {
+    return this.#input.match(/^([-]?)([0-9]{1,2}):([0-9]{2})$/)
+  };
+
+  #isMinutes = () => {
+    return this.#input.match(/^([-]?[0-9]{1,3})(m|mins?)$/)
+  };
+
+  #isRange = () => {
+    return this.#input.match(
+      /^([0-9]{1,2})[:.]{0,1}([0-9]{2})-([0-9]{1,2})[:.]{0,1}([0-9]{2})$/
+    )
+  };
+
+  #isHoursAndMinutes = () => {
+    // 1h 14m(in)
+    return this.#input.match(/^([-]?)([0-9]{1,2})h([0-9]{1,2})(m|mins?)$/)
+  };
+}