From 496d47949ab98ff8ae107b074ee6a059767781de Mon Sep 17 00:00:00 2001 From: Patrick Fic Date: Mon, 10 Feb 2020 15:23:40 -0800 Subject: [PATCH] Added car damage SVG and dynamic component. --- client/src/assets/unfolded_car-orig.svg | 787 +++++++++ client/src/assets/unfolded_car.svg | 1559 ++++++++--------- client/src/assets/unfolded_car_clean.svg | 144 ++ .../job-damage-visual.component.jsx | 735 ++++++++ .../job-detail-cards.damage.component.jsx | 8 +- client/yarn.lock | 10 +- 6 files changed, 2437 insertions(+), 806 deletions(-) create mode 100644 client/src/assets/unfolded_car-orig.svg create mode 100644 client/src/assets/unfolded_car_clean.svg create mode 100644 client/src/components/job-damage-visual/job-damage-visual.component.jsx diff --git a/client/src/assets/unfolded_car-orig.svg b/client/src/assets/unfolded_car-orig.svg new file mode 100644 index 000000000..0e6ca5c2e --- /dev/null +++ b/client/src/assets/unfolded_car-orig.svg @@ -0,0 +1,787 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/src/assets/unfolded_car.svg b/client/src/assets/unfolded_car.svg index 326293fd1..db3a4d87f 100644 --- a/client/src/assets/unfolded_car.svg +++ b/client/src/assets/unfolded_car.svg @@ -1,6 +1,4 @@ - - - - + id="svg166" + sodipodi:docname="unfolded_car.svg" + inkscape:version="0.92.4 (5da689c313, 2019-01-14)"> + id="metadata172"> image/svg+xml - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + x diff --git a/client/src/assets/unfolded_car_clean.svg b/client/src/assets/unfolded_car_clean.svg new file mode 100644 index 000000000..3eb1c2892 --- /dev/null +++ b/client/src/assets/unfolded_car_clean.svg @@ -0,0 +1,144 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + x + + diff --git a/client/src/components/job-damage-visual/job-damage-visual.component.jsx b/client/src/components/job-damage-visual/job-damage-visual.component.jsx new file mode 100644 index 000000000..3af1910ab --- /dev/null +++ b/client/src/components/job-damage-visual/job-damage-visual.component.jsx @@ -0,0 +1,735 @@ +import React from "react"; +export default ({ dmg1, dmg2 }) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + { + // + // x + // + } + + +); diff --git a/client/src/components/job-detail-cards/job-detail-cards.damage.component.jsx b/client/src/components/job-detail-cards/job-detail-cards.damage.component.jsx index ac4ed2a59..0535cc9e3 100644 --- a/client/src/components/job-detail-cards/job-detail-cards.damage.component.jsx +++ b/client/src/components/job-detail-cards/job-detail-cards.damage.component.jsx @@ -1,7 +1,7 @@ import React from "react"; import { useTranslation } from "react-i18next"; import CardTemplate from "./job-detail-cards.template.component"; -import UnfoldedCar from "../../assets/unfolded_car.svg"; +import Car from "../job-damage-visual/job-damage-visual.component"; export default function JobDetailCardsDamageComponent({ loading, data }) { const { t } = useTranslation(); @@ -10,11 +10,7 @@ export default function JobDetailCardsDamageComponent({ loading, data }) { console.log("area_of_damage", area_of_damage); return ( - {data ? ( - - Damaged Area - - ) : null} + ); } diff --git a/client/yarn.lock b/client/yarn.lock index df377fa34..b48b372f0 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -8221,7 +8221,7 @@ node-notifier@^5.4.2: shellwords "^0.1.1" which "^1.3.0" -node-pre-gyp@*, node-pre-gyp@^0.14.0: +node-pre-gyp@^0.14.0: version "0.14.0" resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.14.0.tgz#9a0596533b877289bcad4e143982ca3d904ddc83" integrity sha512-+CvDC7ZttU/sSt9rFjix/P05iS43qHCOOGzcr3Ry99bXG7VX953+vFyEuph/tfqoYu8dttBkE86JSKBO2OzcxA== @@ -10471,7 +10471,7 @@ react-chartjs-2@^2.9.0: lodash "^4.17.4" prop-types "^15.5.8" -"react-click-outside@github:tj/react-click-outside": +react-click-outside@tj/react-click-outside: version "1.1.1" resolved "https://codeload.github.com/tj/react-click-outside/tar.gz/a833ddc5be47490307f9fcc6ed09d8c353108510" @@ -11276,8 +11276,6 @@ rxjs@^6.5.3: version "6.5.4" resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.5.4.tgz#e0777fe0d184cec7872df147f303572d414e211c" integrity sha512-naMQXcgEo3csAEGvw/NydRA0fuS2nDZJiw1YUWFKU7aPPAPGZEsD4Iimit96qwCieH6y614MCLYwdkrWx7z/7Q== - dependencies: - tslib "^1.9.0" safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1: version "5.1.2" @@ -11606,9 +11604,9 @@ slice-ansi@^2.1.0: astral-regex "^1.0.0" is-fullwidth-code-point "^2.0.0" -"smooth-dnd@git+https://github.com/rcdexta/smooth-dnd.git": +"smooth-dnd@https://github.com/rcdexta/smooth-dnd": version "0.6.3" - resolved "git+https://github.com/rcdexta/smooth-dnd.git#f13924c67bf6ffe4613d97bb1ee83f11d364eb1e" + resolved "https://github.com/rcdexta/smooth-dnd#f13924c67bf6ffe4613d97bb1ee83f11d364eb1e" snapdragon-node@^2.0.1: version "2.1.1"