diff --git a/package-lock.json b/package-lock.json index 128e079..12fd71a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,14 +24,6 @@ "lodash": "^4.17.11", "source-map": "^0.5.0", "trim-right": "^1.0.1" - }, - "dependencies": { - "source-map": { - "version": "0.5.7", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", - "dev": true - } } }, "@babel/helper-function-name": { @@ -166,9 +158,9 @@ "dev": true }, "ajv": { - "version": "6.10.0", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.0.tgz", - "integrity": "sha512-nffhOpkymDECQyR0mnsUtoCE8RlX38G0rYP+wgLWFyZuUyuuojSSvi/+euOiQBIn63whYwYVIIH1TvE3tu4OEg==", + "version": "6.9.2", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.9.2.tgz", + "integrity": "sha512-4UFy0/LgDo7Oa/+wOAlj44tp9K78u38E5/359eSrqEp1Z5PdVfimCcs7SluXMP755RUQu6d2b4AvF0R1C9RZjg==", "dev": true, "requires": { "fast-deep-equal": "^2.0.1", @@ -840,14 +832,6 @@ "inline-source-map": "~0.6.0", "lodash.memoize": "~3.0.3", "source-map": "~0.5.3" - }, - "dependencies": { - "source-map": { - "version": "0.5.7", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", - "dev": true - } } }, "commander": { @@ -1229,13 +1213,19 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/esprima/-/esprima-3.1.3.tgz", "integrity": "sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM=" + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "optional": true } } }, "eslint": { - "version": "5.15.1", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-5.15.1.tgz", - "integrity": "sha512-NTcm6vQ+PTgN3UBsALw5BMhgO6i5EpIjQF/Xb5tIh3sk9QhrFafujUOczGz4J24JBlzWclSB9Vmx8d+9Z6bFCg==", + "version": "5.14.1", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-5.14.1.tgz", + "integrity": "sha512-CyUMbmsjxedx8B0mr79mNOqetvkbij/zrXnFeK2zc3pGRn3/tibjiNAv/3UxFEyfMDjh+ZqTrJrEGBFiGfD5Og==", "dev": true, "requires": { "@babel/code-frame": "^7.0.0", @@ -1244,7 +1234,7 @@ "cross-spawn": "^6.0.5", "debug": "^4.0.1", "doctrine": "^3.0.0", - "eslint-scope": "^4.0.2", + "eslint-scope": "^4.0.0", "eslint-utils": "^1.3.1", "eslint-visitor-keys": "^1.0.0", "espree": "^5.0.1", @@ -1277,9 +1267,9 @@ }, "dependencies": { "eslint-scope": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.2.tgz", - "integrity": "sha512-5q1+B/ogmHl8+paxtOKx38Z8LtWkVGuNt3+GQNErqwLl6ViNp/gdJGMCjZNxZ8j/VYjDNZ2Fo+eQc1TAVPIzbg==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.0.tgz", + "integrity": "sha512-1G6UTDi7Jc1ELFwnR58HV4fK9OQK4S6N985f166xqXxpjU6plxFISJa2Ba9KCQuFa8RCnj/lSFJbHo7UFDBnUA==", "dev": true, "requires": { "esrecurse": "^4.1.0", @@ -2546,14 +2536,6 @@ "dev": true, "requires": { "source-map": "~0.5.3" - }, - "dependencies": { - "source-map": { - "version": "0.5.7", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", - "dev": true - } } }, "inquirer": { @@ -2578,18 +2560,18 @@ }, "dependencies": { "ansi-regex": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", - "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.0.0.tgz", + "integrity": "sha512-iB5Dda8t/UqpPI/IjsejXu5jOGDrzn41wJyljwPH65VCIbk6+1BzFIMJGFwTNrYXT1CrD+B4l19U7awiQ8rk7w==", "dev": true }, "strip-ansi": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.1.0.tgz", - "integrity": "sha512-TjxrkPONqO2Z8QDCpeE2j6n0M6EwxzyDgzEeGp+FbdvaJAt//ClYi6W5my+3ROlC/hZX2KACUwDfK49Ka5eDvg==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.0.0.tgz", + "integrity": "sha512-Uu7gQyZI7J7gn5qLn1Np3G9vcYGTVqB+lFTytnDJv83dd8T22aGH451P3jueT2/QemInJDfxHB5Tde5OzgG1Ow==", "dev": true, "requires": { - "ansi-regex": "^4.1.0" + "ansi-regex": "^4.0.0" } } } @@ -3557,9 +3539,9 @@ } }, "react-is": { - "version": "16.8.4", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.4.tgz", - "integrity": "sha512-PVadd+WaUDOAciICm/J1waJaSvgq+4rHE/K70j0PFqKhkTBsPv/82UGQJNXAngz1fOQLLxI6z1sEDmJDQhCTAA==", + "version": "16.8.3", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.3.tgz", + "integrity": "sha512-Y4rC1ZJmsxxkkPuMLwvKvlL1Zfpbcu+Bf4ZigkHup3v9EfdYhAlWAaVyA19olXq2o2mGn0w+dFKvk3pVVlYcIA==", "dev": true }, "read-only-stream": { @@ -3905,12 +3887,6 @@ "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", "dev": true - }, - "source-map": { - "version": "0.5.7", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", - "dev": true } } }, @@ -3986,10 +3962,10 @@ } }, "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "optional": true + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", + "dev": true }, "source-map-resolve": { "version": "0.5.2", @@ -4209,29 +4185,29 @@ }, "dependencies": { "ansi-regex": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", - "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.0.0.tgz", + "integrity": "sha512-iB5Dda8t/UqpPI/IjsejXu5jOGDrzn41wJyljwPH65VCIbk6+1BzFIMJGFwTNrYXT1CrD+B4l19U7awiQ8rk7w==", "dev": true }, "string-width": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz", - "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.0.0.tgz", + "integrity": "sha512-rr8CUxBbvOZDUvc5lNIJ+OC1nPVpz+Siw9VBtUjB9b6jZehZLFt0JMCZzShFHIsI8cbhm0EsNIfWJMFV3cu3Ew==", "dev": true, "requires": { "emoji-regex": "^7.0.1", "is-fullwidth-code-point": "^2.0.0", - "strip-ansi": "^5.1.0" + "strip-ansi": "^5.0.0" } }, "strip-ansi": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.1.0.tgz", - "integrity": "sha512-TjxrkPONqO2Z8QDCpeE2j6n0M6EwxzyDgzEeGp+FbdvaJAt//ClYi6W5my+3ROlC/hZX2KACUwDfK49Ka5eDvg==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.0.0.tgz", + "integrity": "sha512-Uu7gQyZI7J7gn5qLn1Np3G9vcYGTVqB+lFTytnDJv83dd8T22aGH451P3jueT2/QemInJDfxHB5Tde5OzgG1Ow==", "dev": true, "requires": { - "ansi-regex": "^4.1.0" + "ansi-regex": "^4.0.0" } } } diff --git a/src/app/components/App.jsx b/src/app/components/App.jsx index 4bb7ad8..9671a9a 100644 --- a/src/app/components/App.jsx +++ b/src/app/components/App.jsx @@ -45,6 +45,7 @@ class App extends Component { isPlaying: false, isRecording: false, isPlayingIndex: 0, + eventTimes: [], }; this.portToExtension = null; @@ -76,14 +77,20 @@ class App extends Component { id: this.state.data.length, }; + // search field const { searchField } = this.state; const newDataActionType = newData.action.type.toLowerCase(); + + // get the date everytime an action fires and add it to state + + const eventTime = Date.now(); if (newDataActionType.includes(searchField.toLowerCase())) { this.setState(state => ({ data: [...state.data, newData], isPlayingIndex: state.data.length, filteredData: [...state.filteredData, newData], + eventTimes: [...state.eventTimes, eventTime], })); } else { this.setState(state => ({ @@ -283,6 +290,7 @@ class App extends Component { isRecording, filteredData, searchField, + eventTimes, } = this.state; return ( @@ -299,6 +307,7 @@ class App extends Component { searchChange={this.searchChange} filteredData={filteredData} searchField={searchField} + eventTimes={eventTimes} /> )} right={ @@ -326,5 +335,4 @@ class App extends Component { ); } } - -export default App; \ No newline at end of file +export default App; diff --git a/src/app/components/EventCards/EventCreator.jsx b/src/app/components/EventCards/EventCreator.jsx index 108d2c2..9d8a8d0 100644 --- a/src/app/components/EventCards/EventCreator.jsx +++ b/src/app/components/EventCards/EventCreator.jsx @@ -5,12 +5,32 @@ import { EventCard, EventTimeDiv } from '../../styles/Events.jsx'; export default function EventCreator(props) { // renders individual action const { - action, id, addAction, actionTime, selectedEvent, + action, id, addAction, actionTime, selectedEvent, index, eventTimes, } = props; + + let displayTime; + let timeDifference; + + if (id === 0) { + displayTime = '00: 00: 00'; + } else { + timeDifference = eventTimes[id] - eventTimes[id - 1]; + timeDifference = new Date(timeDifference); + + let minute = timeDifference.getMinutes(); + minute < 10 ? minute = '0' + minute : minute; + let second = timeDifference.getSeconds(); + second < 10 ? second = '0' + second : second; + let millisecond = Math.floor(timeDifference.getMilliseconds() / 10); + millisecond < 10 ? millisecond = '0' + millisecond : millisecond; + + displayTime = `${minute} : ${second} : ${millisecond}`; + } + return ( ☰{action} - {actionTime || '00:00:01'} + {displayTime} ); diff --git a/src/app/components/EventCards/EventsDisplay.jsx b/src/app/components/EventCards/EventsDisplay.jsx index 3c8e710..222900d 100644 --- a/src/app/components/EventCards/EventsDisplay.jsx +++ b/src/app/components/EventCards/EventsDisplay.jsx @@ -7,9 +7,11 @@ import EventCreator from './EventCreator.jsx'; import { EventsWrapper } from '../../styles/Events.jsx'; export default function Events(props) { - const { data, + const { + data, activeEventId, filteredData, + eventTimes, } = props; return ( @@ -18,8 +20,10 @@ export default function Events(props) { selectedEvent={activeEventId === e.id ? 'true' : 'false'} action={e.action.type} key={i} + index={i} id={e.id} addAction={props.addAction} + eventTimes={eventTimes} /> ))} diff --git a/src/app/container/Events.jsx b/src/app/container/Events.jsx index 4593489..5b01749 100644 --- a/src/app/container/Events.jsx +++ b/src/app/container/Events.jsx @@ -19,6 +19,7 @@ class Events extends Component { searchChange, filteredData, searchField, + eventTimes, } = this.props; return ( <> @@ -29,6 +30,7 @@ class Events extends Component { filteredData={filteredData} addAction={addAction} activeEventId={activeEventId} + eventTimes={eventTimes} /> );