diff options
author | Ashutosh Bishnoi <mail2bishnoi@gmail.com> | 2021-05-22 12:49:22 +0530 |
---|---|---|
committer | Ashutosh Bishnoi <mail2bishnoi@gmail.com> | 2021-05-22 12:49:22 +0530 |
commit | f15034e5fe4e5c702975b8a0f583a9917c4b1b3b (patch) | |
tree | ee820cd9d53cd296b916996e3e2d748575168f60 /modern | |
parent | 0ab07c40f48889727b1503eaedb5daa8f344dd19 (diff) | |
download | trackermap-web-f15034e5fe4e5c702975b8a0f583a9917c4b1b3b.tar.gz trackermap-web-f15034e5fe4e5c702975b8a0f583a9917c4b1b3b.tar.bz2 trackermap-web-f15034e5fe4e5c702975b8a0f583a9917c4b1b3b.zip |
Resolving Comments and Observations
Diffstat (limited to 'modern')
-rw-r--r-- | modern/public/logo.svg | 170 | ||||
-rw-r--r-- | modern/public/logo_back.svg | 33 | ||||
-rw-r--r-- | modern/src/LoginPage.js | 2 | ||||
-rw-r--r-- | modern/src/SocketController.js | 5 | ||||
-rw-r--r-- | modern/src/components/registration/LoginForm.js (renamed from modern/src/components/LoginForm.js) | 4 | ||||
-rw-r--r-- | modern/src/components/registration/RegisterForm.js (renamed from modern/src/components/RegisterForm.js) | 2 | ||||
-rw-r--r-- | modern/src/components/registration/ResetPasswordForm.js (renamed from modern/src/components/ResetPasswordForm.js) | 0 | ||||
-rw-r--r-- | modern/src/components/reports/ReportNavbar.js | 34 | ||||
-rw-r--r-- | modern/src/components/reports/ReportSidebar.js | 30 | ||||
-rw-r--r-- | modern/src/reports/ReportFilter.js | 8 | ||||
-rw-r--r-- | modern/src/reports/ReportLayoutPage.js | 87 | ||||
-rw-r--r-- | modern/src/theme/dimensions.js | 4 |
12 files changed, 275 insertions, 104 deletions
diff --git a/modern/public/logo.svg b/modern/public/logo.svg index 008b46d4..c2ed83b2 100644 --- a/modern/public/logo.svg +++ b/modern/public/logo.svg @@ -1,33 +1,145 @@ <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!-- Created with Inkscape (http://www.inkscape.org/) --> -<svg id="svg2985" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="64" viewBox="0 0 240 64" width="240" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"> - <metadata id="metadata2990"> - <rdf:RDF> - <cc:Work rdf:about=""> - <dc:format>image/svg+xml</dc:format> - <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/> - <dc:title/> - </cc:Work> - </rdf:RDF> - </metadata> - <g id="layer1"> - <rect id="rect3778" height="64" width="236.1" y="0" x="0" fill="none"/> - <ellipse id="path3038" rx="28.995" ry="28.995" transform="rotate(-30)" cy="43.713" cx="11.713" stroke-width="10.699" fill="#fff"/> - <g fill="#336"> - <circle id="path2993" stroke-width="1.3262" transform="rotate(-30)" cy="43.713" cx="9.4364" r="2.2765"/> - <path id="path3004" d="m37.012 24.177-2.8428 3.6128c0.66345 0.52205 1.3255 1.1576 1.7734 1.9333 0.4479 0.77578 0.66726 1.6669 0.78764 2.5025l4.5502-0.65558c-0.193-1.42-0.633-2.804-1.394-4.123s-1.74-2.391-2.874-3.27z" stroke-width="1.0095"/> - <path id="path3014" d="m42.504 16.9-2.8428 3.6128c1.607 1.2355 3.0914 2.7935 4.1679 4.6581s1.6835 3.9291 1.95 5.9386l4.5502-0.65558c-0.33967-2.5954-1.1669-5.1513-2.5573-7.5594-1.3903-2.4081-3.1901-4.4025-5.268-5.9944z" stroke-width="1.0095"/> - <path id="path3036" d="m2.607 52.819a9.1058 9.1058 0 0 1 -7.8859 -4.5529 9.1058 9.1058 0 0 1 0 -9.1058 9.1058 9.1058 0 0 1 7.8859 -4.5529l-2e-7 9.1058z" transform="rotate(-30)" stroke-width="3.6204"/> - <path id="path3038-8" d="m17.502 6.8895c-13.868 8.0065-18.619 25.74-10.612 39.608 8.006 13.868 25.739 18.619 39.608 10.613 13.868-8.007 18.619-25.74 10.613-39.609-8.007-13.868-25.74-18.619-39.609-10.612zm1.706 2.9541c12.237-7.0648 27.884-2.8722 34.948 9.3644 7.065 12.237 2.873 27.884-9.364 34.948-12.237 7.065-27.884 2.873-34.948-9.364-7.0652-12.237-2.8726-27.884 9.364-34.948z" stroke-width="1.0095"/> - <g id="text3003" aria-label="Traccar"> - <path id="path4172" d="m89.719 48.671h-3.915v-30.192h-10.663v-3.4775h25.241v3.4775h-10.663v30.192z"/> - <path id="path4174" d="m116.36 22.969q1.6812 0 3.0169 0.27636l-0.52968 3.5466q-1.566-0.34544-2.7636-0.34544-3.063 0-5.2508 2.4872-2.1648 2.4872-2.1648 6.195v13.541h-3.8229v-25.241h3.1551l0.43756 4.675h0.18424q1.4048-2.4642 3.3854-3.7999t4.3526-1.3357z"/> - <path id="path4176" d="m139.62 48.671-0.75998-3.5926h-0.18424q-1.8884 2.3721-3.7769 3.2242-1.8654 0.82907-4.675 0.82907-3.7538 0-5.8956-1.9345-2.1187-1.9345-2.1187-5.5041 0-7.6459 12.229-8.0143l4.2835-0.13818v-1.566q0-2.9708-1.2897-4.3756-1.2666-1.4278-4.0763-1.4278-3.1551 0-7.1392 1.9345l-1.1745-2.9248q1.8654-1.0133 4.0762-1.589 2.2339-0.57574 4.4678-0.57574 4.5138 0 6.6786 2.0036 2.1878 2.0036 2.1878 6.4253v17.226h-2.8326zm-8.6361-2.6945q3.5696 0 5.5962-1.9575 2.0496-1.9575 2.0496-5.4811v-2.2799l-3.8229 0.16121q-4.5599 0.16121-6.5865 1.4278-2.0036 1.2436-2.0036 3.892 0 2.0727 1.2436 3.1551 1.2666 1.0824 3.5236 1.0824z"/> - <path id="path4178" d="m160.44 49.131q-5.4811 0-8.498-3.3623-2.9939-3.3854-2.9939-9.5573 0-6.3332 3.0399-9.7876 3.063-3.4545 8.7052-3.4545 1.8194 0 3.6387 0.3915t2.8557 0.92119l-1.1745 3.2472q-1.2666-0.50665-2.7636-0.82907-1.4969-0.34544-2.6484-0.34544-7.6919 0-7.6919 9.8106 0 4.652 1.8654 7.1392 1.8884 2.4872 5.5732 2.4872 3.1551 0 6.4713-1.3588v3.3854q-2.5333 1.3127-6.3792 1.3127z"/> - <path id="path4180" d="m182.92 49.131q-5.4811 0-8.498-3.3623-2.9939-3.3854-2.9939-9.5573 0-6.3332 3.0399-9.7876 3.063-3.4545 8.7052-3.4545 1.8193 0 3.6387 0.3915t2.8557 0.92119l-1.1745 3.2472q-1.2666-0.50665-2.7636-0.82907-1.4969-0.34544-2.6484-0.34544-7.6919 0-7.6919 9.8106 0 4.652 1.8654 7.1392 1.8884 2.4872 5.5732 2.4872 3.1551 0 6.4714-1.3588v3.3854q-2.5333 1.3127-6.3792 1.3127z"/> - <path id="path4182" d="m210.83 48.671-0.75998-3.5926h-0.18424q-1.8884 2.3721-3.7769 3.2242-1.8654 0.82907-4.675 0.82907-3.7538 0-5.8956-1.9345-2.1187-1.9345-2.1187-5.5041 0-7.6459 12.229-8.0143l4.2835-0.13818v-1.566q0-2.9708-1.2897-4.3756-1.2666-1.4278-4.0762-1.4278-3.1551 0-7.1392 1.9345l-1.1745-2.9248q1.8654-1.0133 4.0762-1.589 2.2339-0.57574 4.4678-0.57574 4.5138 0 6.6786 2.0036 2.1878 2.0036 2.1878 6.4253v17.226h-2.8326zm-8.6361-2.6945q3.5696 0 5.5962-1.9575 2.0496-1.9575 2.0496-5.4811v-2.2799l-3.8229 0.16121q-4.5599 0.16121-6.5865 1.4278-2.0036 1.2436-2.0036 3.892 0 2.0727 1.2436 3.1551 1.2666 1.0824 3.5235 1.0824z"/> - <path id="path4184" d="m233.08 22.969q1.6812 0 3.0169 0.27636l-0.52968 3.5466q-1.566-0.34544-2.7636-0.34544-3.0629 0-5.2508 2.4872-2.1648 2.4872-2.1648 6.195v13.541h-3.8229v-25.241h3.1551l0.43757 4.675h0.18423q1.4048-2.4642 3.3854-3.7999t4.3526-1.3357z"/> - </g> + +<svg + xmlns:osb="http://www.openswatchbook.org/uri/2009/osb" + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + width="240" + height="64" + viewBox="0 0 63.499999 16.933334" + version="1.1" + id="svg8" + inkscape:version="0.92.4 (5da689c313, 2019-01-14)" + sodipodi:docname="logo.svg"> + <defs + id="defs2"> + <linearGradient + id="linearGradient2390" + osb:paint="solid"> + <stop + style="stop-color:#333366;stop-opacity:1;" + offset="0" + id="stop2388" /> + </linearGradient> + <linearGradient + id="linearGradient2384" + osb:paint="solid"> + <stop + style="stop-color:#333366;stop-opacity:1;" + offset="0" + id="stop2382" /> + </linearGradient> + <linearGradient + inkscape:collect="always" + id="linearGradient918"> + <stop + style="stop-color:#000000;stop-opacity:1;" + offset="0" + id="stop914" /> + <stop + style="stop-color:#000000;stop-opacity:0;" + offset="1" + id="stop916" /> + </linearGradient> + <radialGradient + inkscape:collect="always" + xlink:href="#linearGradient918" + id="radialGradient922" + cx="43.49408" + cy="270.17709" + fx="43.49408" + fy="270.17709" + r="21.214052" + gradientTransform="matrix(0.99999999,0,0,0.19295707,-1.1295587,218.0445)" + gradientUnits="userSpaceOnUse" /> + </defs> + <sodipodi:namedview + id="base" + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1.0" + inkscape:pageopacity="0.0" + inkscape:pageshadow="2" + inkscape:zoom="3" + inkscape:cx="116.94054" + inkscape:cy="22.536867" + inkscape:document-units="px" + inkscape:current-layer="layer1" + showgrid="false" + units="px" + showguides="true" + inkscape:guide-bbox="true" + inkscape:window-width="1366" + inkscape:window-height="705" + inkscape:window-x="-8" + inkscape:window-y="-8" + inkscape:window-maximized="1" /> + <metadata + id="metadata5"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + <dc:title></dc:title> + </cc:Work> + </rdf:RDF> + </metadata> + <g + inkscape:label="Layer 1" + inkscape:groupmode="layer" + id="layer1" + transform="translate(0,-280.06665)"> + <g + style="fill:none;stroke:#333366;stroke-width:0.97500001;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" + id="g836" + transform="matrix(0.70555556,0,0,0.70555556,0,280.06665)"> + <circle + id="circle825" + r="10" + cy="12" + cx="12" + style="stroke-width:0.97500001;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke:#333366;stroke-opacity:1" /> + </g> + <text + xml:space="preserve" + style="font-style:normal;font-weight:normal;font-size:11.23277092px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#333366;fill-opacity:1;stroke:url(#radialGradient922);stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0" + x="20.57909" + y="274.1069" + id="text910" + transform="scale(0.93694412,1.0672995)"><tspan + sodipodi:role="line" + id="tspan908" + x="20.57909" + y="274.1069" + style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;line-height:1.25;font-family:'Segoe UI';-inkscape-font-specification:'Segoe UI Semi-Bold';fill:#333366;fill-opacity:1;stroke:url(#radialGradient922);stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1">GPSLABS</tspan></text> + <g + style="fill:none;stroke:#333366;stroke-width:1;stroke-linecap:round;stroke-linejoin:round" + id="g2425" + transform="matrix(0.36473567,0,0,0.40335671,3.8780119,283.52041)"> + <polygon + id="polygon2408" + points="16,6 8,2 1,6 1,22 8,18 16,22 23,18 23,2 " /> + <line + id="line2410" + y2="18" + x2="8" + y1="2" + x1="8" /> + <line + id="line2412" + y2="22" + x2="16" + y1="6" + x1="16" /> + </g> </g> - </g> </svg> diff --git a/modern/public/logo_back.svg b/modern/public/logo_back.svg new file mode 100644 index 00000000..008b46d4 --- /dev/null +++ b/modern/public/logo_back.svg @@ -0,0 +1,33 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> +<svg id="svg2985" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="64" viewBox="0 0 240 64" width="240" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"> + <metadata id="metadata2990"> + <rdf:RDF> + <cc:Work rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/> + <dc:title/> + </cc:Work> + </rdf:RDF> + </metadata> + <g id="layer1"> + <rect id="rect3778" height="64" width="236.1" y="0" x="0" fill="none"/> + <ellipse id="path3038" rx="28.995" ry="28.995" transform="rotate(-30)" cy="43.713" cx="11.713" stroke-width="10.699" fill="#fff"/> + <g fill="#336"> + <circle id="path2993" stroke-width="1.3262" transform="rotate(-30)" cy="43.713" cx="9.4364" r="2.2765"/> + <path id="path3004" d="m37.012 24.177-2.8428 3.6128c0.66345 0.52205 1.3255 1.1576 1.7734 1.9333 0.4479 0.77578 0.66726 1.6669 0.78764 2.5025l4.5502-0.65558c-0.193-1.42-0.633-2.804-1.394-4.123s-1.74-2.391-2.874-3.27z" stroke-width="1.0095"/> + <path id="path3014" d="m42.504 16.9-2.8428 3.6128c1.607 1.2355 3.0914 2.7935 4.1679 4.6581s1.6835 3.9291 1.95 5.9386l4.5502-0.65558c-0.33967-2.5954-1.1669-5.1513-2.5573-7.5594-1.3903-2.4081-3.1901-4.4025-5.268-5.9944z" stroke-width="1.0095"/> + <path id="path3036" d="m2.607 52.819a9.1058 9.1058 0 0 1 -7.8859 -4.5529 9.1058 9.1058 0 0 1 0 -9.1058 9.1058 9.1058 0 0 1 7.8859 -4.5529l-2e-7 9.1058z" transform="rotate(-30)" stroke-width="3.6204"/> + <path id="path3038-8" d="m17.502 6.8895c-13.868 8.0065-18.619 25.74-10.612 39.608 8.006 13.868 25.739 18.619 39.608 10.613 13.868-8.007 18.619-25.74 10.613-39.609-8.007-13.868-25.74-18.619-39.609-10.612zm1.706 2.9541c12.237-7.0648 27.884-2.8722 34.948 9.3644 7.065 12.237 2.873 27.884-9.364 34.948-12.237 7.065-27.884 2.873-34.948-9.364-7.0652-12.237-2.8726-27.884 9.364-34.948z" stroke-width="1.0095"/> + <g id="text3003" aria-label="Traccar"> + <path id="path4172" d="m89.719 48.671h-3.915v-30.192h-10.663v-3.4775h25.241v3.4775h-10.663v30.192z"/> + <path id="path4174" d="m116.36 22.969q1.6812 0 3.0169 0.27636l-0.52968 3.5466q-1.566-0.34544-2.7636-0.34544-3.063 0-5.2508 2.4872-2.1648 2.4872-2.1648 6.195v13.541h-3.8229v-25.241h3.1551l0.43756 4.675h0.18424q1.4048-2.4642 3.3854-3.7999t4.3526-1.3357z"/> + <path id="path4176" d="m139.62 48.671-0.75998-3.5926h-0.18424q-1.8884 2.3721-3.7769 3.2242-1.8654 0.82907-4.675 0.82907-3.7538 0-5.8956-1.9345-2.1187-1.9345-2.1187-5.5041 0-7.6459 12.229-8.0143l4.2835-0.13818v-1.566q0-2.9708-1.2897-4.3756-1.2666-1.4278-4.0763-1.4278-3.1551 0-7.1392 1.9345l-1.1745-2.9248q1.8654-1.0133 4.0762-1.589 2.2339-0.57574 4.4678-0.57574 4.5138 0 6.6786 2.0036 2.1878 2.0036 2.1878 6.4253v17.226h-2.8326zm-8.6361-2.6945q3.5696 0 5.5962-1.9575 2.0496-1.9575 2.0496-5.4811v-2.2799l-3.8229 0.16121q-4.5599 0.16121-6.5865 1.4278-2.0036 1.2436-2.0036 3.892 0 2.0727 1.2436 3.1551 1.2666 1.0824 3.5236 1.0824z"/> + <path id="path4178" d="m160.44 49.131q-5.4811 0-8.498-3.3623-2.9939-3.3854-2.9939-9.5573 0-6.3332 3.0399-9.7876 3.063-3.4545 8.7052-3.4545 1.8194 0 3.6387 0.3915t2.8557 0.92119l-1.1745 3.2472q-1.2666-0.50665-2.7636-0.82907-1.4969-0.34544-2.6484-0.34544-7.6919 0-7.6919 9.8106 0 4.652 1.8654 7.1392 1.8884 2.4872 5.5732 2.4872 3.1551 0 6.4713-1.3588v3.3854q-2.5333 1.3127-6.3792 1.3127z"/> + <path id="path4180" d="m182.92 49.131q-5.4811 0-8.498-3.3623-2.9939-3.3854-2.9939-9.5573 0-6.3332 3.0399-9.7876 3.063-3.4545 8.7052-3.4545 1.8193 0 3.6387 0.3915t2.8557 0.92119l-1.1745 3.2472q-1.2666-0.50665-2.7636-0.82907-1.4969-0.34544-2.6484-0.34544-7.6919 0-7.6919 9.8106 0 4.652 1.8654 7.1392 1.8884 2.4872 5.5732 2.4872 3.1551 0 6.4714-1.3588v3.3854q-2.5333 1.3127-6.3792 1.3127z"/> + <path id="path4182" d="m210.83 48.671-0.75998-3.5926h-0.18424q-1.8884 2.3721-3.7769 3.2242-1.8654 0.82907-4.675 0.82907-3.7538 0-5.8956-1.9345-2.1187-1.9345-2.1187-5.5041 0-7.6459 12.229-8.0143l4.2835-0.13818v-1.566q0-2.9708-1.2897-4.3756-1.2666-1.4278-4.0762-1.4278-3.1551 0-7.1392 1.9345l-1.1745-2.9248q1.8654-1.0133 4.0762-1.589 2.2339-0.57574 4.4678-0.57574 4.5138 0 6.6786 2.0036 2.1878 2.0036 2.1878 6.4253v17.226h-2.8326zm-8.6361-2.6945q3.5696 0 5.5962-1.9575 2.0496-1.9575 2.0496-5.4811v-2.2799l-3.8229 0.16121q-4.5599 0.16121-6.5865 1.4278-2.0036 1.2436-2.0036 3.892 0 2.0727 1.2436 3.1551 1.2666 1.0824 3.5235 1.0824z"/> + <path id="path4184" d="m233.08 22.969q1.6812 0 3.0169 0.27636l-0.52968 3.5466q-1.566-0.34544-2.7636-0.34544-3.0629 0-5.2508 2.4872-2.1648 2.4872-2.1648 6.195v13.541h-3.8229v-25.241h3.1551l0.43757 4.675h0.18423q1.4048-2.4642 3.3854-3.7999t4.3526-1.3357z"/> + </g> + </g> + </g> +</svg> diff --git a/modern/src/LoginPage.js b/modern/src/LoginPage.js index 3d4b17f4..c16fd198 100644 --- a/modern/src/LoginPage.js +++ b/modern/src/LoginPage.js @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import { useMediaQuery, makeStyles, Paper } from '@material-ui/core'; import { useTheme } from '@material-ui/core/styles'; -import LoginForm from './components/LoginForm'; +import LoginForm from './components/registration/LoginForm'; const useStyles = makeStyles(theme => ({ root: { diff --git a/modern/src/SocketController.js b/modern/src/SocketController.js index cda693a1..9ce4ab21 100644 --- a/modern/src/SocketController.js +++ b/modern/src/SocketController.js @@ -27,15 +27,18 @@ const SocketController = () => { const authenticated = useSelector(state => !!state.session.user); const connectSocket = () => { + console.log('connect socket method invoked'); const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'; const socket = new WebSocket(protocol + '//' + window.location.host + '/api/socket'); socket.onclose = () => { - setTimeout(() => connectSocket(), 60 * 1000); + console.log('socket closed'); + setTimeout(() => {console.log('socket reconnection try');connectSocket()}, 60 * 1000); }; socket.onmessage = (event) => { const data = JSON.parse(event.data); + console.log('socket message received ', data); if (data.devices) { dispatch(devicesActions.update(data.devices)); } diff --git a/modern/src/components/LoginForm.js b/modern/src/components/registration/LoginForm.js index d52a51dd..6469b31b 100644 --- a/modern/src/components/LoginForm.js +++ b/modern/src/components/registration/LoginForm.js @@ -3,8 +3,8 @@ import { Grid, useMediaQuery, makeStyles, InputLabel, Select, MenuItem, FormCont import { useTheme } from '@material-ui/core/styles'; import { useDispatch, useSelector } from 'react-redux'; import { useHistory } from 'react-router-dom'; -import { sessionActions } from './../store'; -import t from './../common/localization'; +import { sessionActions } from '../../store'; +import t from '../../common/localization'; import RegisterForm from './RegisterForm'; import ResetPasswordForm from './ResetPasswordForm'; diff --git a/modern/src/components/RegisterForm.js b/modern/src/components/registration/RegisterForm.js index 6d013f70..c2af04ba 100644 --- a/modern/src/components/RegisterForm.js +++ b/modern/src/components/registration/RegisterForm.js @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import { Grid, Button, TextField, Typography, Link, makeStyles, Snackbar } from '@material-ui/core'; import ArrowBackIcon from '@material-ui/icons/ArrowBack'; import LoginForm from './LoginForm'; -import t from './../common/localization'; +import t from './../../common/localization'; const useStyles = makeStyles(theme => ({ register: { diff --git a/modern/src/components/ResetPasswordForm.js b/modern/src/components/registration/ResetPasswordForm.js index c268f808..c268f808 100644 --- a/modern/src/components/ResetPasswordForm.js +++ b/modern/src/components/registration/ResetPasswordForm.js diff --git a/modern/src/components/reports/ReportNavbar.js b/modern/src/components/reports/ReportNavbar.js new file mode 100644 index 00000000..93c01a06 --- /dev/null +++ b/modern/src/components/reports/ReportNavbar.js @@ -0,0 +1,34 @@ +import React from 'react'; +import { AppBar, Toolbar, Typography, List, ListItem, ListItemText, ListItemIcon, Divider, Drawer, makeStyles, IconButton, Hidden } from '@material-ui/core'; + +import MenuIcon from '@material-ui/icons/Menu'; +import t from '../../common/localization'; + +const useStyles = makeStyles(theme => ({ + menuButton: { + } +})); +const ReportNavbar = ({ openDrawer, setOpenDrawer, reportName }) => { + + const classes = useStyles(); + + return ( + <AppBar position="fixed" color="inherit"> + <Toolbar> + <IconButton + color="inherit" + aria-label="open drawer" + edge="start" + onClick={() => setOpenDrawer(!openDrawer)} + className={classes.menuButton}> + <MenuIcon /> + </IconButton> + <Typography variant="h6" noWrap> + {t('reportTitle')} / {reportName} + </Typography> + </Toolbar> + </AppBar> + ) +} + +export default ReportNavbar; diff --git a/modern/src/components/reports/ReportSidebar.js b/modern/src/components/reports/ReportSidebar.js new file mode 100644 index 00000000..e42c36ee --- /dev/null +++ b/modern/src/components/reports/ReportSidebar.js @@ -0,0 +1,30 @@ +import React from 'react'; +import { AppBar, Toolbar, Typography, List, ListItem, ListItemText, ListItemIcon, Divider, Drawer, makeStyles, IconButton, Hidden } from '@material-ui/core'; +import { Link, useHistory, useLocation } from 'react-router-dom'; + +const ReportNavbar = ({ routes, setReportName }) => { + + const location = useLocation(); + + return ( + <List disablePadding> + {routes.map((route, index) => ( + <ListItem + disableRipple + component={Link} + key={`${route}${index}`} + button + to={route.href} + selected={route.href === location.pathname} + onClick={() => setReportName(route.name)}> + <ListItemIcon> + {route.icon} + </ListItemIcon> + <ListItemText primary={route.name} /> + </ListItem> + ))} + </List> + ) +} + +export default ReportNavbar; diff --git a/modern/src/reports/ReportFilter.js b/modern/src/reports/ReportFilter.js index 1d67691c..0e5ab695 100644 --- a/modern/src/reports/ReportFilter.js +++ b/modern/src/reports/ReportFilter.js @@ -1,8 +1,8 @@ import React, { useState } from 'react'; -import { FormControl, InputLabel, Select, MenuItem, Button, TextField, Grid } from '@material-ui/core'; -import t from '../common/localization'; +import { FormControl, InputLabel, Select, MenuItem, Button, TextField, Grid, Typography } from '@material-ui/core'; import { useSelector } from 'react-redux'; import moment from 'moment'; +import t from '../common/localization'; const ReportFilter = ({ children, handleSubmit, showOnly }) => { @@ -101,7 +101,7 @@ const ReportFilter = ({ children, handleSubmit, showOnly }) => { fullWidth /> </Grid>} {children} - <Grid item xs={4} sm={!showOnly ? 2 : 4}> + <Grid item xs={!showOnly ? 4 : 12} sm={!showOnly ? 2 : 6}> <Button onClick={() => handleClick(false, true)} variant='outlined' @@ -127,7 +127,7 @@ const ReportFilter = ({ children, handleSubmit, showOnly }) => { variant='outlined' color='secondary' fullWidth> - {t('reportEmail')} + <Typography variant="button" noWrap>{t('reportEmail')}</Typography> </Button>} </Grid> </Grid> diff --git a/modern/src/reports/ReportLayoutPage.js b/modern/src/reports/ReportLayoutPage.js index 4ffc8816..fbb8a303 100644 --- a/modern/src/reports/ReportLayoutPage.js +++ b/modern/src/reports/ReportLayoutPage.js @@ -10,6 +10,9 @@ import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted'; import TrendingUpIcon from '@material-ui/icons/TrendingUp'; import ArrowBackIcon from '@material-ui/icons/ArrowBack'; +import ReportSidebar from '../components/reports/ReportSidebar' +import ReportNavbar from '../components/reports/ReportNavbar' + import { Link, useHistory, useLocation } from 'react-router-dom'; import t from '../common/localization'; @@ -20,10 +23,10 @@ const useStyles = makeStyles(theme => ({ height: '100%', }, drawerContainer: { - width: theme.dimensions.drawerWidth, + width: theme.dimensions.desktopDrawerWidth, }, drawer: { - width: theme.dimensions.drawerWidth, + width: theme.dimensions.desktopDrawerWidth, [theme.breakpoints.down("md")]: { width: theme.dimensions.tabletDrawerWidth, } @@ -62,89 +65,45 @@ const routes = [ const ReportLayoutPage = ({ children, filter }) => { const classes = useStyles(); const history = useHistory(); - const theme = useTheme(); const [openDrawer, setOpenDrawer] = useState(false); - const location = useLocation(); - - const navigationList = ( - <List disablePadding> - {routes.map((route, index) => ( - <ListItem - disableRipple - component={Link} - key={`${route}${index}`} - button - to={route.href} - selected={route.href === location.pathname}> - <ListItemIcon> - {route.icon} - </ListItemIcon> - <ListItemText primary={route.name} /> - </ListItem> - ))} - </List> - ); - - const drawerHeader = ( - <> - <div className={classes.drawerHeader}> - <IconButton - className={classes.backArrowIconContainer} - disableRipple> - <ArrowBackIcon /> - </IconButton> - <Typography variant="h6" color="inherit" noWrap> - {t('reportTitle')} - </Typography> - </div> - <Divider /> - </> - ); - - const appBar = ( - <AppBar position="fixed" color="inherit"> - <Toolbar> - <IconButton - color="inherit" - aria-label="open drawer" - edge="start" - onClick={() => setOpenDrawer(!openDrawer)} - className={classes.menuButton}> - <MenuIcon /> - </IconButton> - <Typography variant="h6" noWrap> - {t('reportTitle')} - </Typography> - </Toolbar> - </AppBar> - ); return ( <div className={classes.root}> - <Hidden mdUp> - {appBar} + <Hidden only={['lg', 'xl']}> + <ReportNavbar openDrawer={openDrawer} setOpenDrawer={setOpenDrawer} /> <Drawer variant="temporary" open={openDrawer} onClose={() => setOpenDrawer(!openDrawer)} classes={{paper: classes.drawer}}> - {drawerHeader} - {navigationList} + <ReportSidebar routes={routes} /> </Drawer> </Hidden> - <Hidden mdDown> + <Hidden only={['xs', 'sm', 'md']}> <div className={classes.drawerContainer}> <Drawer variant="permanent" classes={{paper: classes.drawer}}> - {drawerHeader} - {navigationList} + <div className={classes.drawerHeader}> + <IconButton + onClick={() => history.push('/')} + className={classes.backArrowIconContainer} + disableRipple> + <ArrowBackIcon /> + </IconButton> + <Typography variant="h6" color="inherit" noWrap> + {t('reportTitle')} + </Typography> + </div> + <Divider /> + <ReportSidebar routes={routes} /> </Drawer> </div> </Hidden> <div className={classes.content}> <div className={classes.toolbar} /> {filter} + {children} </div> </div> ); diff --git a/modern/src/theme/dimensions.js b/modern/src/theme/dimensions.js index 59959d7e..16e6aad7 100644 --- a/modern/src/theme/dimensions.js +++ b/modern/src/theme/dimensions.js @@ -3,6 +3,6 @@ export default { borderRadius: '4px', sidebarWidth: '28%', tabletSidebarWidth: '52px', - drawerWidth: 360, - tabletDrawerWidth: 320, + desktopDrawerWidth: '360px', + tabletDrawerWidth: '320px', }; |