diff --git a/frontend/Dockerfile b/frontend/Dockerfile index 58b9016..53443b8 100644 --- a/frontend/Dockerfile +++ b/frontend/Dockerfile @@ -4,6 +4,6 @@ WORKDIR /opt/obs/frontend ADD package.json package-lock.json /opt/obs/frontend/ RUN npm ci -ADD tsconfig.json /opt/obs/frontend +ADD tsconfig.json craco.config.js /opt/obs/frontend/ ADD public/ /opt/obs/frontend/public/ ADD src/ /opt/obs/frontend/src/ diff --git a/frontend/craco.config.js b/frontend/craco.config.js new file mode 100644 index 0000000..fcf2659 --- /dev/null +++ b/frontend/craco.config.js @@ -0,0 +1,3 @@ +module.exports = { + plugins: [{ plugin: require('@semantic-ui-react/craco-less') }], +} diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 5d1ba23..17b2bb8 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -1181,6 +1181,61 @@ "minimist": "^1.2.0" } }, + "@craco/craco": { + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/@craco/craco/-/craco-6.1.2.tgz", + "integrity": "sha512-GlQZn+g+yNlaDvIL5m6mcCoBGyFDwO4kkNx3fNFf98wuldkdWyBFoQbtOFOIb4gvkTh4VntOOxtJEoZfKs7XXw==", + "dev": true, + "requires": { + "cross-spawn": "^7.0.0", + "lodash": "^4.17.15", + "semver": "^7.3.2", + "webpack-merge": "^4.2.2" + }, + "dependencies": { + "cross-spawn": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", + "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "dev": true, + "requires": { + "path-key": "^3.1.0", + "shebang-command": "^2.0.0", + "which": "^2.0.1" + } + }, + "path-key": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", + "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", + "dev": true + }, + "shebang-command": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", + "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", + "dev": true, + "requires": { + "shebang-regex": "^3.0.0" + } + }, + "shebang-regex": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", + "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", + "dev": true + }, + "which": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", + "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "dev": true, + "requires": { + "isexe": "^2.0.0" + } + } + } + }, "@csstools/convert-colors": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz", @@ -1722,6 +1777,15 @@ } } }, + "@semantic-ui-react/craco-less": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@semantic-ui-react/craco-less/-/craco-less-1.2.1.tgz", + "integrity": "sha512-GfAwiyTOS19AWccxg5HOhOfmT6b0Q9bbTs4rRXgKURIpJvAnYdA2zdpbhQD6CeAj5CQukHAn/26fvk+ZuyNE7g==", + "dev": true, + "requires": { + "craco-less": "^1.15.0" + } + }, "@semantic-ui-react/event-stack": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/@semantic-ui-react/event-stack/-/event-stack-3.1.2.tgz", @@ -3936,6 +4000,12 @@ } } }, + "clone": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz", + "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=", + "dev": true + }, "clone-deep": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz", @@ -4230,6 +4300,15 @@ "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=" }, + "copy-anything": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.3.tgz", + "integrity": "sha512-GK6QUtisv4fNS+XcI7shX0Gx9ORg7QqIznyfho79JTnX1XhLiyZHfftvGiziqzRiEi/Bjhgpi+D2o7HxJFPnDQ==", + "dev": true, + "requires": { + "is-what": "^3.12.0" + } + }, "copy-concurrently": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/copy-concurrently/-/copy-concurrently-1.0.5.tgz", @@ -4291,6 +4370,16 @@ "yaml": "^1.10.0" } }, + "craco-less": { + "version": "1.17.1", + "resolved": "https://registry.npmjs.org/craco-less/-/craco-less-1.17.1.tgz", + "integrity": "sha512-T6V1aF3+eQZ22gUigHInX/i+ExPbWrnmdAhtuEXc4mOyhneDifmEzZFseq/BdRy1aUEs9s4z26jTxP+1I6P//g==", + "dev": true, + "requires": { + "less": "^3.11.1", + "less-loader": "^6.1.0" + } + }, "create-ecdh": { "version": "4.0.4", "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz", @@ -7523,6 +7612,13 @@ "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz", "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==" }, + "image-size": { + "version": "0.5.5", + "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz", + "integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=", + "dev": true, + "optional": true + }, "immer": { "version": "7.0.9", "resolved": "https://registry.npmjs.org/immer/-/immer-7.0.9.tgz", @@ -7986,6 +8082,12 @@ "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz", "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=" }, + "is-what": { + "version": "3.14.1", + "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz", + "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==", + "dev": true + }, "is-windows": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz", @@ -8818,9 +8920,10 @@ } }, "jquery": { - "version": "3.5.1", - "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz", - "integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg==" + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz", + "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==", + "dev": true }, "js-base64": { "version": "2.6.4", @@ -9010,6 +9113,35 @@ "webpack-sources": "^1.1.0" } }, + "less": { + "version": "3.13.1", + "resolved": "https://registry.npmjs.org/less/-/less-3.13.1.tgz", + "integrity": "sha512-SwA1aQXGUvp+P5XdZslUOhhLnClSLIjWvJhmd+Vgib5BFIr9lMNlQwmwUNOjXThF/A0x+MCYYPeWEfeWiLRnTw==", + "dev": true, + "requires": { + "copy-anything": "^2.0.1", + "errno": "^0.1.1", + "graceful-fs": "^4.1.2", + "image-size": "~0.5.0", + "make-dir": "^2.1.0", + "mime": "^1.4.1", + "native-request": "^1.0.5", + "source-map": "~0.6.0", + "tslib": "^1.10.0" + } + }, + "less-loader": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-6.2.0.tgz", + "integrity": "sha512-Cl5h95/Pz/PWub/tCBgT1oNMFeH1WTD33piG80jn5jr12T4XbxZcjThwNXDQ7AG649WEynuIzO4b0+2Tn9Qolg==", + "dev": true, + "requires": { + "clone": "^2.1.2", + "less": "^3.11.3", + "loader-utils": "^2.0.0", + "schema-utils": "^2.7.0" + } + }, "leven": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz", @@ -9751,6 +9883,13 @@ "to-regex": "^3.0.1" } }, + "native-request": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/native-request/-/native-request-1.0.8.tgz", + "integrity": "sha512-vU2JojJVelUGp6jRcLwToPoWGxSx23z/0iX+I77J3Ht17rf2INGjrhOoQnjVo60nQd8wVsgzKkPfRXBiVdD2ag==", + "dev": true, + "optional": true + }, "native-url": { "version": "0.2.6", "resolved": "https://registry.npmjs.org/native-url/-/native-url-0.2.6.tgz", @@ -13477,10 +13616,11 @@ "node-forge": "^0.10.0" } }, - "semantic-ui-css": { + "semantic-ui-less": { "version": "2.4.1", - "resolved": "https://registry.npmjs.org/semantic-ui-css/-/semantic-ui-css-2.4.1.tgz", - "integrity": "sha512-Pkp0p9oWOxlH0kODx7qFpIRYpK1T4WJOO4lNnpNPOoWKCrYsfHqYSKgk5fHfQtnWnsAKy7nLJMW02bgDWWFZFg==", + "resolved": "https://registry.npmjs.org/semantic-ui-less/-/semantic-ui-less-2.4.1.tgz", + "integrity": "sha512-/+nhPV6If2ydCz89/SSWzYD8ualDtjh4Tk3F6cqRj2luZj1DRjJ2nM9NKqmeyLlQFNFM94wpnpKXcjxRzZh5GA==", + "dev": true, "requires": { "jquery": "x.*" } @@ -16465,6 +16605,15 @@ } } }, + "webpack-merge": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-4.2.2.tgz", + "integrity": "sha512-TUE1UGoTX2Cd42j3krGYqObZbOD+xF7u28WB7tfUordytSjbWTIjK/8V0amkBfTYN4/pB/GIDlJZZ657BGG19g==", + "dev": true, + "requires": { + "lodash": "^4.17.15" + } + }, "webpack-sources": { "version": "1.4.3", "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz", diff --git a/frontend/package.json b/frontend/package.json index d6576e9..8d451a8 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -28,16 +28,15 @@ "redux-localstorage": "^0.4.1", "rxjs": "^6.6.3", "rxjs-hooks": "^0.6.2", - "semantic-ui-css": "^2.4.1", "semantic-ui-react": "^2.0.2", "typescript": "^4.1.4", "web-vitals": "^0.2.4" }, "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject" + "start": "craco start", + "build": "craco build", + "test": "craco test", + "eject": "craco eject" }, "eslintConfig": { "extends": [ @@ -59,8 +58,11 @@ }, "proxy": "http://api:3000", "devDependencies": { + "@craco/craco": "^6.1.2", + "@semantic-ui-react/craco-less": "^1.2.1", "@types/lodash": "^4.14.168", "@types/react-redux": "^7.1.16", - "@types/react-router-dom": "^5.1.7" + "@types/react-router-dom": "^5.1.7", + "semantic-ui-less": "^2.4.1" } } diff --git a/frontend/src/index.js b/frontend/src/index.js index 00c01fc..204586d 100644 --- a/frontend/src/index.js +++ b/frontend/src/index.js @@ -1,7 +1,8 @@ import React from 'react' import {Settings} from 'luxon' import ReactDOM from 'react-dom' -import 'semantic-ui-css/semantic.min.css' +import 'semantic-ui-less/semantic.less' + import './index.css' import App from './App' diff --git a/frontend/src/pages/HomePage.js b/frontend/src/pages/HomePage.js index 7a03cf6..feef8dc 100644 --- a/frontend/src/pages/HomePage.js +++ b/frontend/src/pages/HomePage.js @@ -81,7 +81,7 @@ function MostRecentTrack() { return ( <> -
You know what that means...
Here you find your API Key, for use in the OpenBikeSensor. You can to copy and paste it into your sensor's configuration interface to diff --git a/frontend/src/pages/TrackEditor.tsx b/frontend/src/pages/TrackEditor.tsx index 300140f..ae7b36b 100644 --- a/frontend/src/pages/TrackEditor.tsx +++ b/frontend/src/pages/TrackEditor.tsx @@ -1,7 +1,7 @@ import React from 'react' import _ from 'lodash' import {connect} from 'react-redux' -import {Divider, Message, Confirm, Grid, Button, Icon, Popup, Form, Ref, TextArea, Checkbox} from 'semantic-ui-react' +import {Divider, Message, Confirm, Grid, Button, Icon, Popup, Form, Ref, TextArea, Checkbox, Header} from 'semantic-ui-react' import {useHistory, useParams, Link} from 'react-router-dom' import {concat, of, from} from 'rxjs' import {pluck, distinctUntilChanged, map, switchMap} from 'rxjs/operators' @@ -22,7 +22,7 @@ function ReplaceTrackData({slug}) { return ( <> -