From 75aff5530f93cc3cb1e656f54690d7e55841a5e2 Mon Sep 17 00:00:00 2001 From: Andy Kuny Date: Fri, 8 Mar 2024 09:52:57 -0500 Subject: [PATCH] Solidifying frontent --- nad_ch/controllers/web/package-lock.json | 31 +++++- nad_ch/controllers/web/package.json | 4 +- .../web/routes/data_submissions.py | 2 +- .../web/sass/components/_usa-header.scss | 7 ++ .../web/sass/components/_usa-nav.scss | 14 +++ .../web/sass/components/_usa-sidenav.scss | 44 ++++---- .../web/sass/components/_usa-table.scss | 6 + nad_ch/controllers/web/sass/index.scss | 2 + nad_ch/controllers/web/src/index.ts | 12 ++ nad_ch/controllers/web/src/index.tsx | 5 - .../web/templates/_layouts/base.html | 8 +- .../web/templates/_layouts/sidebar.html | 44 ++++---- .../web/templates/data_submissions/index.html | 81 +++++++------- .../web/templates/data_submissions/show.html | 104 +++++++++--------- nad_ch/controllers/web/templates/index.html | 53 ++++----- nad_ch/controllers/web/webpack.config.js | 2 +- 16 files changed, 240 insertions(+), 179 deletions(-) create mode 100644 nad_ch/controllers/web/sass/components/_usa-header.scss create mode 100644 nad_ch/controllers/web/sass/components/_usa-table.scss create mode 100644 nad_ch/controllers/web/src/index.ts delete mode 100644 nad_ch/controllers/web/src/index.tsx diff --git a/nad_ch/controllers/web/package-lock.json b/nad_ch/controllers/web/package-lock.json index 8988273..d9339bd 100644 --- a/nad_ch/controllers/web/package-lock.json +++ b/nad_ch/controllers/web/package-lock.json @@ -9,9 +9,11 @@ "version": "1.0.0", "license": "ISC", "dependencies": { - "@uswds/uswds": "3.7.1" + "@uswds/uswds": "3.7.1", + "alpinejs": "^3.13.6" }, "devDependencies": { + "@types/alpinejs": "^3.13.6", "css-loader": "^6.10.0", "mini-css-extract-plugin": "^2.8.0", "node-sass": "^9.0.0", @@ -293,6 +295,12 @@ "node": ">= 10" } }, + "node_modules/@types/alpinejs": { + "version": "3.13.6", + "resolved": "https://registry.npmjs.org/@types/alpinejs/-/alpinejs-3.13.6.tgz", + "integrity": "sha512-BMi1/2uQz7mp30VFn69SzjN7YwQ0QzE4Hn3RMBt4iMpQeasdbMiImv1f5yvK1bYmvjIyG/YFg+CgPxbjIXZk0g==", + "dev": true + }, "node_modules/@types/eslint": { "version": "8.56.2", "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.2.tgz", @@ -360,6 +368,19 @@ "node": ">= 4" } }, + "node_modules/@vue/reactivity": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz", + "integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==", + "dependencies": { + "@vue/shared": "3.1.5" + } + }, + "node_modules/@vue/shared": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz", + "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==" + }, "node_modules/@webassemblyjs/ast": { "version": "1.11.6", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz", @@ -671,6 +692,14 @@ "ajv": "^8.8.2" } }, + "node_modules/alpinejs": { + "version": "3.13.6", + "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.13.6.tgz", + "integrity": "sha512-/F7pVR+11r1A0KVw+eY1DcjTFlRQn9arD3p5/2Q4vq0N2WDC/dHpg+Pz7ZMiVQlHE7ZmZmcqTRm1wYTdDLMiEg==", + "dependencies": { + "@vue/reactivity": "~3.1.1" + } + }, "node_modules/ansi-regex": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", diff --git a/nad_ch/controllers/web/package.json b/nad_ch/controllers/web/package.json index aef8c4e..879f308 100644 --- a/nad_ch/controllers/web/package.json +++ b/nad_ch/controllers/web/package.json @@ -9,9 +9,11 @@ "author": "", "license": "ISC", "dependencies": { - "@uswds/uswds": "3.7.1" + "@uswds/uswds": "3.7.1", + "alpinejs": "^3.13.6" }, "devDependencies": { + "@types/alpinejs": "^3.13.6", "css-loader": "^6.10.0", "mini-css-extract-plugin": "^2.8.0", "node-sass": "^9.0.0", diff --git a/nad_ch/controllers/web/routes/data_submissions.py b/nad_ch/controllers/web/routes/data_submissions.py index f54e69c..e8711fa 100644 --- a/nad_ch/controllers/web/routes/data_submissions.py +++ b/nad_ch/controllers/web/routes/data_submissions.py @@ -23,7 +23,7 @@ def home(): @login_required def reports(): # For demo purposes, hard-code the producer name - view_model = list_data_submissions_by_producer(g.ctx, "NJ") + view_model = list_data_submissions_by_producer(g.ctx, "New Jersey") return render_template("data_submissions/index.html", submissions=view_model) diff --git a/nad_ch/controllers/web/sass/components/_usa-header.scss b/nad_ch/controllers/web/sass/components/_usa-header.scss new file mode 100644 index 0000000..7828b30 --- /dev/null +++ b/nad_ch/controllers/web/sass/components/_usa-header.scss @@ -0,0 +1,7 @@ +.usa-header { + border-bottom: 2px solid #dfe1e2; + + .usa-logo { + font-size: 40px; + } +} diff --git a/nad_ch/controllers/web/sass/components/_usa-nav.scss b/nad_ch/controllers/web/sass/components/_usa-nav.scss index 48d19ff..aec8394 100644 --- a/nad_ch/controllers/web/sass/components/_usa-nav.scss +++ b/nad_ch/controllers/web/sass/components/_usa-nav.scss @@ -20,3 +20,17 @@ } } } + +.usa-header--basic .usa-navbar { + position: relative; + width: 100%; +} + +.usa-nav-container { + padding-left: 0; + padding-right: 0; +} + +.usa-accordion__button.usa-nav__link { + text-align: center; +} diff --git a/nad_ch/controllers/web/sass/components/_usa-sidenav.scss b/nad_ch/controllers/web/sass/components/_usa-sidenav.scss index 40f08b7..4611cbf 100644 --- a/nad_ch/controllers/web/sass/components/_usa-sidenav.scss +++ b/nad_ch/controllers/web/sass/components/_usa-sidenav.scss @@ -1,30 +1,13 @@ .usa-sidenav { background-color: var(--Primary-primary-darker, #162e51); border-bottom: none; - padding-left: 2em; + padding-left: 32px; position: fixed; top: 0; left: 0; - padding-right: 2em; z-index: 1000; overflow-y: auto; - - h3 { - color: var(--Base-base-lightest, #f0f0f0); - font-size: 22px; - font-style: normal; - font-weight: 700; - line-height: normal; - } - - h6 { - color: var(--Primary-primary-lighter, #d9e8f6); - font-size: 13px; - font-style: normal; - font-weight: 400; - line-height: normal; - letter-spacing: 0.5px; - } + width: 200px; li { // Default state @@ -74,7 +57,28 @@ } .usa-sidenav__logo { - padding-top: 1em; + padding: 16px 24px 32px 0; + + // Default hover state + &:hover { + } + + .logo-bottom { + color: var(--Base-base-lightest, #f0f0f0); + font-size: 22px; + font-style: normal; + font-weight: 700; + line-height: normal; + } + + .logo-top { + color: var(--Primary-primary-lighter, #d9e8f6); + font-size: 13px; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: 0.5px; + } } .usa-sidenav__button { diff --git a/nad_ch/controllers/web/sass/components/_usa-table.scss b/nad_ch/controllers/web/sass/components/_usa-table.scss new file mode 100644 index 0000000..2a04624 --- /dev/null +++ b/nad_ch/controllers/web/sass/components/_usa-table.scss @@ -0,0 +1,6 @@ +.usa-table { + tbody th, + td { + border-bottom: 1px solid var(--Primary-primary-lighter, #d9e8f6); + } +} diff --git a/nad_ch/controllers/web/sass/index.scss b/nad_ch/controllers/web/sass/index.scss index da4230d..585d621 100644 --- a/nad_ch/controllers/web/sass/index.scss +++ b/nad_ch/controllers/web/sass/index.scss @@ -1,5 +1,7 @@ @forward "@uswds"; @import "base/base"; @import "base/variables"; +@import "components/usa-header"; @import "components/usa-nav"; @import "components/usa-sidenav"; +@import "components/usa-table"; diff --git a/nad_ch/controllers/web/src/index.ts b/nad_ch/controllers/web/src/index.ts new file mode 100644 index 0000000..0f470d9 --- /dev/null +++ b/nad_ch/controllers/web/src/index.ts @@ -0,0 +1,12 @@ +import "@uswds/uswds/css/uswds.css"; +import Alpine from "alpinejs"; + +declare global { + interface Window { + Alpine: any; + } +} + +window.Alpine = Alpine; + +Alpine.start(); diff --git a/nad_ch/controllers/web/src/index.tsx b/nad_ch/controllers/web/src/index.tsx deleted file mode 100644 index 3c2ddb0..0000000 --- a/nad_ch/controllers/web/src/index.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import "@uswds/uswds/css/uswds.css"; - -// TypeScript Entry Point -const message: string = "Welcome to the NAD Collaboration Hub"; -console.log(message); diff --git a/nad_ch/controllers/web/templates/_layouts/base.html b/nad_ch/controllers/web/templates/_layouts/base.html index 4cc4d4f..6b262fe 100644 --- a/nad_ch/controllers/web/templates/_layouts/base.html +++ b/nad_ch/controllers/web/templates/_layouts/base.html @@ -6,9 +6,11 @@
-
{% include "_layouts/sidebar.html" %}
-
-
+
+ {% include "_layouts/sidebar.html" %} +
+
+
{% block content %}{% endblock %}
diff --git a/nad_ch/controllers/web/templates/_layouts/sidebar.html b/nad_ch/controllers/web/templates/_layouts/sidebar.html index eadd582..2d1e528 100644 --- a/nad_ch/controllers/web/templates/_layouts/sidebar.html +++ b/nad_ch/controllers/web/templates/_layouts/sidebar.html @@ -1,27 +1,31 @@ {% block sidebar %} diff --git a/nad_ch/controllers/web/templates/data_submissions/index.html b/nad_ch/controllers/web/templates/data_submissions/index.html index 1d81666..5083d31 100644 --- a/nad_ch/controllers/web/templates/data_submissions/index.html +++ b/nad_ch/controllers/web/templates/data_submissions/index.html @@ -1,50 +1,43 @@ {% extends "_layouts/base.html" %} {% block title %}Home Page{% endblock %} {%block content %} -
-
-
-
- -
-
-
- -
-
-
- {% if submissions %} -
- - - - - - - - - - {% for sub in submissions %} - - - - - - {% endfor %} - -
NameCreated
{{ sub.filename }}{{ sub.date_created }} - View -
-
- {% else %} -

You haven't uploaded any data submissions yet.

- {% endif %} +
+
+
+
+
+ +{% if submissions %} +
+ + + + + + + + + + {% for sub in submissions %} + + + + + + {% endfor %} + +
NameCreated
+ {{ sub.filename }} + {{ sub.date_created }} + View +
-{% endblock %} +{% else %} +

You haven't uploaded any data submissions yet.

+{% endif %} {% endblock %} diff --git a/nad_ch/controllers/web/templates/data_submissions/show.html b/nad_ch/controllers/web/templates/data_submissions/show.html index bca7865..d1faade 100644 --- a/nad_ch/controllers/web/templates/data_submissions/show.html +++ b/nad_ch/controllers/web/templates/data_submissions/show.html @@ -1,6 +1,6 @@ {% extends "_layouts/base.html" %} {% block title %}Report{% endblock %} {%block content %} -
+
@@ -16,11 +16,13 @@
  • @@ -30,8 +32,10 @@ class="usa-accordion__button usa-nav__link" aria-expanded="false" aria-controls="extended-mega-nav-section-two" + :class="showCompleteness ? 'usa-current' : ''" + @click="showSummary = false; showCompleteness = true" > - Completeness + Completeness
    • @@ -41,59 +45,53 @@
    -
    -
    -
    - {% if submission %} -
    -
    -
    -

    - NJ submitted Submission 1.0 to US DOT Schema version 3.0 - 04/2023. Data was extracted from 1 file. -

    -
    -
    -
    -

    1141

    -

    Total records submitted

    -
    -
    -

    0

    -

    Records added to NAD

    -
    -
    -

    537

    -

    Records flagged

    -
    -
    -
    -
    -

    Yes

    -

    ETL update required

    -
    -
    -

    Yes

    -

    Data update required

    -
    -
    -
    -
    -
    -

    Need support? Contact NAD

    -

    nad.dot.gov

    -
    -
    -
    + {% if submission %} +
    +
    +
    +

    + NJ submitted Submission 1.0 to US DOT Schema version 3.0 04/2023. Data + was extracted from 1 file. +

    +
    +
    +
    +

    1141

    +

    Total records submitted

    +
    +
    +

    0

    +

    Records added to NAD

    +
    +
    +

    537

    +

    Records flagged

    -
    -
    +
    +
    +
    +

    Yes

    +

    ETL update required

    +
    +
    +

    Yes

    +

    Data update required

    +
    +
    +
    +
    +
    +

    Need support? Contact NAD

    +

    nad@dot.gov

    - {% else %} -

    No such submission exists.

    - {% endif %}
    +
    + {# Table goes here #} +
    + {% else %} +

    No such submission exists.

    + {% endif %}
    {% endblock %} diff --git a/nad_ch/controllers/web/templates/index.html b/nad_ch/controllers/web/templates/index.html index 460f032..60c0466 100644 --- a/nad_ch/controllers/web/templates/index.html +++ b/nad_ch/controllers/web/templates/index.html @@ -9,34 +9,27 @@
    -
    -
    -
    - {% if current_user.is_authenticated %} -

    Hi, {{ current_user.email }}!

    -

    Thanks for logging in with {{ current_user.login_provider }}.

    - {% else %} - - {% endif %} +{% if current_user.is_authenticated %} +

    Hi, {{ current_user.email }}!

    +

    Thanks for logging in with {{ current_user.login_provider }}.

    +{% else %} +
    -
    -{% endblock %} + + +{% endif %} {% endblock %} diff --git a/nad_ch/controllers/web/webpack.config.js b/nad_ch/controllers/web/webpack.config.js index 9e50f0d..af14225 100644 --- a/nad_ch/controllers/web/webpack.config.js +++ b/nad_ch/controllers/web/webpack.config.js @@ -5,7 +5,7 @@ module.exports = { mode: "development", entry: { main: [ - "./src/index.tsx", // Path to your main JavaScript or TypeScript file + "./src/index.ts", // Path to your main JavaScript or TypeScript file "./sass/index.scss", // Path to your SASS entry file ], },