diff options
-rw-r--r-- | app/assets/stylesheets/application/_body.scss | 19 | ||||
-rw-r--r-- | app/assets/stylesheets/taxonomies.scss | 79 | ||||
-rw-r--r-- | app/assets/stylesheets/taxonomies/filter.scss | 3 | ||||
-rw-r--r-- | app/assets/stylesheets/welcome.scss | 33 | ||||
-rw-r--r-- | app/controllers/taxonomies/filter_controller.rb | 7 | ||||
-rw-r--r-- | app/controllers/taxonomies_controller.rb | 11 | ||||
-rw-r--r-- | app/controllers/welcome_controller.rb | 1 | ||||
-rw-r--r-- | app/helpers/taxonomies/filter_helper.rb | 22 | ||||
-rw-r--r-- | app/javascript/controllers/map_controller.js | 49 | ||||
-rw-r--r-- | app/javascript/controllers/taxonomy_controller.js | 56 | ||||
-rw-r--r-- | app/views/taxonomies/_taxonomy.html.erb | 8 | ||||
-rw-r--r-- | app/views/taxonomies/filter/_taxonomy.html.erb | 1 | ||||
-rw-r--r-- | app/views/taxonomies/filter/show.html.erb | 1 | ||||
-rw-r--r-- | app/views/taxonomies/index.html.erb | 5 | ||||
-rw-r--r-- | app/views/taxonomies/show.html.erb | 1 | ||||
-rw-r--r-- | app/views/welcome/index.html.erb | 16 | ||||
-rw-r--r-- | config/routes.rb | 3 | ||||
-rw-r--r-- | db/migrate/20201110225447_create_maps.rb | 14 | ||||
-rw-r--r-- | db/seeds.rb | 5 |
19 files changed, 246 insertions, 88 deletions
diff --git a/app/assets/stylesheets/application/_body.scss b/app/assets/stylesheets/application/_body.scss index 06db39a..95bea4f 100644 --- a/app/assets/stylesheets/application/_body.scss +++ b/app/assets/stylesheets/application/_body.scss @@ -43,11 +43,6 @@ body { } } -main > article { - background-color: rgba(255, 255, 255, 0.8); - z-index: 990; -} - img { max-width: 100%; } @@ -61,9 +56,18 @@ main { } } +main > article { + background-color: rgba(255, 255, 255, 0.8); + z-index: 990; +} + body>aside { position: fixed; - z-index: 1001; + z-index: 1000; + background-color: var(--incommon-clear85); + top: 9rem; + bottom: 0; + border-top-right-radius: 1rem; } @@ -155,6 +159,9 @@ body>aside { --gold: #e7c300; --silver: silver; --bronze: #cd7f32; + --incommon-blue: #216778; + --incommon-blue50: rgba(33, 103, 120, 0.5); + --incommon-clear85: rgba(237, 238, 201, 0.85); --icon-menu-off: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzQzNDQiCiAgIHdpZHRoPSIzNi4yNSIKICAgaGVpZ2h0PSIzNi4yNSIKICAgdmVyc2lvbj0iMS4xIj4KICA8bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE0MzUwIj4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzNDM0OCIgLz4KICA8cGF0aAogICAgIGlkPSJwYXRoNDM0MiIKICAgICBkPSJtIDE5LjQ4NDMzLDIxLjIzNDQgcSAwLjY0MDYyLC0xLjQ4NDQgMC42NDA2MiwtMy4xMDk0IDAsLTEuNjI1IC0wLjY0MDYyLC0zLjA5MzcgLTAuNjI1LC0xLjQ4NDQgLTEuNzAzMSwtMi41NjI1IC0xLjA3ODE0LC0xLjA3ODEgLTIuNTYyNDksLTEuNzAzMSAtMS40Njg3MywtMC42NDA3IC0zLjA5MzcxLC0wLjY0MDcgLTEuNjI0OTcsMCAtMy4xMDkzOSwwLjY0MDcgUSA3LjU0NjksMTEuMzkwNyA2LjQ2ODc3LDEyLjQ2ODggNS4zOTA2MywxMy41NDY5IDQuNzUsMTUuMDMxMyA0LjEyNSwxNi41IDQuMTI1LDE4LjEyNSBxIDAsMS42MjUgMC42MjUsMy4xMDk0IDAuNjQwNjIsMS40Njg3IDEuNzE4NzcsMi41NDY5IDEuMDc4MTMsMS4wNzggMi41NDY4NywxLjcxODcgMS40ODQzNSwwLjYyNSAzLjEwOTM5LDAuNjI1IDEuNjI0OTgsMCAzLjA5MzcxLC0wLjYyNSAxLjQ4NDM1LC0wLjY0MDcgMi41NjI0OSwtMS43MTg3IDEuMDc4MTQsLTEuMDc4MiAxLjcwMzEsLTIuNTQ2OSB6IG0gMTIuMDAwMDYsMCBxIDAuNjQwNjMsLTEuNDg0NCAwLjY0MDYzLC0zLjEwOTQgMCwtMS42MjUgLTAuNjQwNjMsLTMuMDkzNyAtMC42MjUsLTEuNDg0NCAtMS43MDMwOSwtMi41NjI1IC0xLjA3ODEzLC0xLjA3ODEgLTIuNTYyNDgsLTEuNzAzMSAtMS40Njg3NCwtMC42NDA3IC0zLjA5MzcxLC0wLjY0MDcgaCAtNi4wMzEyNiBxIDEuODU5MzMsMS40MDYzIDIuOTM3NDcsMy41IDEuMDkzNzUsMi4wOTM4IDEuMDkzNzUsNC41IDAsMi40MDYzIC0xLjA5Mzc1LDQuNSAtMS4wNzgxNCwyLjA5MzcgLTIuOTM3NDcsMy41IGggNi4wMzEyNiBxIDEuNjI0OTcsMCAzLjA5MzcxLC0wLjYyNSAxLjQ4NDM1LC0wLjY0MDcgMi41NjI0OCwtMS43MTg3IDEuMDc4MTQsLTEuMDc4MiAxLjcwMzA5LC0yLjU0NjkgeiBNIDMzLjMyODEyLDE0LjI1IHEgMC43OTY4OCwxLjg0MzggMC43OTY4OCwzLjg3NSAwLDIuMDMxMyAtMC43OTY4OCwzLjg5MDYgLTAuNzk2ODcsMS44NDM4IC0yLjE0MDU5LDMuMTg3NSAtMS4zMjgxMSwxLjMyODEgLTMuMTg3NTEsMi4xMjUgLTEuODQzNzMsMC43OTY5IC0zLjg3NDk4LDAuNzk2OSBIIDEyLjEyNDk2IHEgLTIuMDMxMjYsMCAtMy44OTA1OSwtMC43OTY5IFEgNi4zOTA2NSwyNi41MzEyIDUuMDQ2ODYsMjUuMjAzMSAzLjcxODc1LDIzLjg1OTQgMi45MjE4NywyMi4wMTU2IDIuMTI1LDIwLjE1NjMgMi4xMjUsMTguMTI1IDIuMTI1LDE2LjA5MzggMi45MjE4NywxNC4yNSAzLjcxODc1LDEyLjM5MDYgNS4wNDY4NiwxMS4wNjI1IDYuMzkwNTgsOS43MTg4IDguMjM0MzcsOC45MjE5IDEwLjA5MzcsOC4xMjUgMTIuMTI0OTYsOC4xMjUgaCAxMi4wMDAwOCBxIDIuMDMxMjUsMCAzLjg3NDk4LDAuNzk2OSAxLjg1OTMzLDAuNzk2OSAzLjE4NzUxLDIuMTQwNiAxLjM0MzcyLDEuMzI4MSAyLjE0MDU5LDMuMTg3NSB6IgogICAgIHN0eWxlPSJmaWxsOiMwMDgwODAiIC8+CiAgPGNpcmNsZQogICAgIHI9IjguMDE1MDAwMyIKICAgICBjeT0iMTguMTMzODMxIgogICAgIGN4PSIxMi4xMjU3MDQiCiAgICAgaWQ9InBhdGg0ODk1IgogICAgIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZWRlZWM5O2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDoxOC42MzU4NjIzNTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLWRhc2hvZmZzZXQ6MDtzdHJva2Utb3BhY2l0eToxO3BhaW50LW9yZGVyOmZpbGwgbWFya2VycyBzdHJva2UiIC8+Cjwvc3ZnPgo='); --icon-menu-on: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzM0NDMiCiAgIHdpZHRoPSIzNi4yNSIKICAgaGVpZ2h0PSIzNi4yNSIKICAgdmVyc2lvbj0iMS4xIj4KICA8bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGEzNDQ5Ij4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzMzQ0NyIgLz4KICA8cGF0aAogICAgIGlkPSJwYXRoMzQ0MSIKICAgICBkPSJtIDIuOTE4ODU3NCwyMi4wMTY3OSBxIC0wLjc5Mzg1NzEsLTEuODYzNjc0IC0wLjc5Mzg1NzEsLTMuODkzNjggMCwtMi4wMzAwMDYgMC43OTM4NTcxLC0zLjg3NDc3OSBRIDMuNzIwMjc0OSwxMi4zODg0MzggNS4wNDcxNTAxLDExLjA2MTU2MiA2LjM5MjkyNjgsOS43MTU3ODUzIDguMjMzOTE5NCw4LjkxODE0ODMgMTAuMDkzODEzLDguMTI0MjkxMyAxMi4xMjc2LDguMTI0MjkxMyBoIDExLjk5ODU4MiBxIDIuMDMwMDA2LDAgMy44NzQ3NzgsMC43OTM4NTcgMS44NTk4OTQsMC43OTc2MzcgMy4xODY3NjksMi4xNDM0MTM3IDEuMzQ1Nzc3LDEuMzI2ODc2IDIuMTQzNDE1LDMuMTg2NzY5IDAuNzkzODU2LDEuODQ0NzczIDAuNzkzODU2LDMuODc0Nzc5IDAsMi4wMzM3ODUgLTAuNzkzODU2LDMuODkzNjggLTAuNzk3NjM4LDEuODQ0NzcyIC0yLjE0MzQxNSwzLjE4Njc2OSAtMS4zMjMwOTUsMS4zMjY4NzUgLTMuMTg2NzY5LDIuMTI0NTEyIC0xLjg0NDc3MiwwLjc5NzYzOCAtMy44NzQ3NzgsMC43OTc2MzggSCAxMi4xMjc2IHEgLTIuMDMzNzg3LDAgLTMuODkzNjgwNiwtMC43OTM4NTggUSA2LjM5MjkyNjgsMjYuNTMwNDM0IDUuMDQ3MTUwMSwyNS4yMDM1NTkgMy43MjAyNzQ5LDIzLjg2MTU2MiAyLjkyMjYzNzYsMjIuMDE2NzkgWiBNIDIxLjAxODc5OSwyNS41MDIyIHEgMS40ODU2NDYsMC42MjM3NDUgMy4xMTExNjMsMC42MjM3NDUgMS42MjU1MTcsMCAzLjA5MjI2MiwtMC42MjM3NDUgMS40ODU2NDcsLTAuNjQyNjQ2IDIuNTYzMDI1LC0xLjcyMDAyNCAxLjA4MTE1NywtMS4wNzczNzcgMS43MDExMjIsLTIuNTQ3OTAzIDAuNjQyNjQ2LC0xLjQ4NTY0NiAwLjY0MjY0NiwtMy4xMTExNjMgMCwtMS42MjU1MTcgLTAuNjQyNjQ2LC0zLjA5MjI2MiAtMC42MTk5NjUsLTEuNDg1NjQ3IC0xLjcwMTEyMiwtMi41NjMwMjUgLTEuMDc3Mzc4LC0xLjA3NzM3NyAtMi41NjMwMjUsLTEuNzAxMTIyIC0xLjQ2Njc0NSwtMC42NDI2NDYgLTMuMDkyMjYyLC0wLjY0MjY0NiAtMS42MjU1MTcsMCAtMy4xMTExNjMsMC42NDI2NDYgLTEuNDcwNTI2LDAuNjIzNzQ1IC0yLjU0NzkwNCwxLjcwMTEyMiAtMS4wNzczNzcsMS4wNzczNzggLTEuNzIwMDIzLDIuNTYzMDI1IC0wLjYyMzc0NSwxLjQ2Njc0NSAtMC42MjM3NDUsMy4wOTIyNjIgMCwxLjYyNTUxNyAwLjYyMzc0NSwzLjExMTE2MyAwLjY0MjY0NiwxLjQ3MDUyNiAxLjcyMDAyMywyLjU0NzkwMyAxLjA3NzM3OCwxLjA3NzM3OCAyLjU0NzkwNCwxLjcyMDAyNCB6IgogICAgIHN0eWxlPSJmaWxsOiMwMDgwODA7ZmlsbC1vcGFjaXR5OjEiIC8+CiAgPGNpcmNsZQogICAgIHI9IjguMDE1MDAwMyIKICAgICBjeT0iMTguMTMyMDc4IgogICAgIGN4PSIyNC4xMjI3ODkiCiAgICAgaWQ9InBhdGg0ODk1IgogICAgIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZWRlZWM5O2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDoxOC42MzU4NjIzNTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLWRhc2hvZmZzZXQ6MDtzdHJva2Utb3BhY2l0eToxO3BhaW50LW9yZGVyOmZpbGwgbWFya2VycyBzdHJva2UiIC8+Cjwvc3ZnPgo='); } diff --git a/app/assets/stylesheets/taxonomies.scss b/app/assets/stylesheets/taxonomies.scss index 446fd20..4e227da 100644 --- a/app/assets/stylesheets/taxonomies.scss +++ b/app/assets/stylesheets/taxonomies.scss @@ -4,39 +4,45 @@ * SPDX-License-Identifier: LAL-1.3 */ -body>aside { - width: auto; - - span[data-target="taxonomy.filter"] { - z-index: 990; - background: var(--icon-menu-on) top left/32px no-repeat; - width: 32px; - height: 32px; - position: absolute; - top: 6.1rem; - left: 10px; - - &.off { - background-image: var(--icon-menu-off); - } - &.on { - background-image: var(--icon-menu-on); - } - } +[data-controller="taxonomy"] { + height: 100%; + overflow: hidden auto; + scrollbar-color: var(--incommon-clear85) var(--incommon-blue); + scrollbar-width: thin; nav { - z-index: 900; - position: fixed; - top: 5.5rem; + position: relative; bottom: 0; margin: 0; padding: 0; - background-color: var(--incommon-blue); - display: block; - border-top-right-radius: 1rem; - width: 20rem; height: calc(100% - 7.5rem); - padding-top: 48px; + padding-top: 32px; + max-width: 35rem; + width: 89vw; + + display: none; + } + &.on { + nav { + display: block; + } + } +} + +button[data-action="taxonomy#toggle"] { + position: absolute; + left: 0.7rem; + display: block; + cursor: pointer; + padding: 16px; + color: transparent; + background: transparent var(--icon-menu-off) top left/32px no-repeat; + border: none; + text-align: center; + z-index: 1002; + + &.on { + background-image: var(--icon-menu-on); } } @@ -49,21 +55,22 @@ body>aside { li { padding: 0.5rem 1rem; + font-weight: normal; + text-align: left; + z-index: 1001; } ol { display: none; } - ol.active { - font-weight: bold; + } + .active { + font-weight: bold; + ol { + display: block; + } + li.active { text-align: right; - li { - display: initial; - &.active { - font-weight: bold; - text-align: right; - } - } } } diff --git a/app/assets/stylesheets/taxonomies/filter.scss b/app/assets/stylesheets/taxonomies/filter.scss new file mode 100644 index 0000000..7506632 --- /dev/null +++ b/app/assets/stylesheets/taxonomies/filter.scss @@ -0,0 +1,3 @@ +// Place all the styles related to the taxonomies/filter controller here. +// They will automatically be included in application.css. +// You can use Sass (SCSS) here: https://sass-lang.com/ diff --git a/app/assets/stylesheets/welcome.scss b/app/assets/stylesheets/welcome.scss index aae15d5..5854dd0 100644 --- a/app/assets/stylesheets/welcome.scss +++ b/app/assets/stylesheets/welcome.scss @@ -8,36 +8,3 @@ // They will automatically be included in application.css. // You can use Sass (SCSS) here: https://sass-lang.com/ -button[data-action="taxonomy#toggle"] { - position: absolute; - top: 9rem; - left: 0.7rem; - display: block; - cursor: pointer; - padding: 16px; - color: transparent; - z-index: 990; - background: transparent var(--icon-menu-off) top left/32px no-repeat; - border: none; - text-align: center; -} -button[data-action="taxonomy#toggle"].on { - background-image: var(--icon-menu-on); -} - -[data-controller="taxonomy"] nav { - display: block; - position: fixed; - top: 9rem; - bottom: 0; - max-width: 35rem; - background-color: rgba(0,128,128,0.5); - z-index: -1; - display: none; - border-top-right-radius: 1rem; -} -[data-controller="taxonomy"] nav.on { - width: 89vw; - z-index: 900; - display: block; -} diff --git a/app/controllers/taxonomies/filter_controller.rb b/app/controllers/taxonomies/filter_controller.rb new file mode 100644 index 0000000..ad3514c --- /dev/null +++ b/app/controllers/taxonomies/filter_controller.rb @@ -0,0 +1,7 @@ +class Taxonomies::FilterController < ApplicationController + # GET /taxonomies/:id/filter + def show + @taxonomy = Taxonomy.find_by(uuid: params[:id]) + render partial: "taxonomies/filter/taxonomy" + end +end diff --git a/app/controllers/taxonomies_controller.rb b/app/controllers/taxonomies_controller.rb new file mode 100644 index 0000000..f33595a --- /dev/null +++ b/app/controllers/taxonomies_controller.rb @@ -0,0 +1,11 @@ +class TaxonomiesController < ApplicationController + # GET /taxonomies + def index + @taxonomies = current_agent.taxonomies.order(:uuid).page params[:page] + end + + # GET /taxonomies/:id + def show + @taxonomy = Taxonomy.find_by(uuid: params[:id]) + end +end diff --git a/app/controllers/welcome_controller.rb b/app/controllers/welcome_controller.rb index e7743e8..85246e5 100644 --- a/app/controllers/welcome_controller.rb +++ b/app/controllers/welcome_controller.rb @@ -6,6 +6,7 @@ class WelcomeController < ApplicationController # GET / def index @map = Map.first + @taxonomy = @map.taxonomy @resources = Resource.order(:uuid).page params[:page] Rails.logger.info "WECLOME ///// #{@resources&.count || 0}" end diff --git a/app/helpers/taxonomies/filter_helper.rb b/app/helpers/taxonomies/filter_helper.rb new file mode 100644 index 0000000..97fe271 --- /dev/null +++ b/app/helpers/taxonomies/filter_helper.rb @@ -0,0 +1,22 @@ +# SPDX-FileCopyrightText: 2020 IN COMMON Collective <collective@incommon.cc> +# +# SPDX-License-Identifier: AGPL-3.0-or-later + +# coding: utf-8 +# frozen_string_literal: true +module Taxonomies::FilterHelper + def taxonomy_filter + @taxonomy ||= Taxonomy.first + html = [] + @taxonomy.categories.each do |cat| + list = [] + cat.sections.each do |sec| + list << tag.li(h("#{sec.rank}. #{sec.name}"), id: "section-#{sec.id}", data: { action: "taxonomy#section", target: 'taxonomy.section', 'taxonomy-section-id': sec.id }) + end + html << tag.li(h("#{cat.rank}. #{cat.name}") << tag.ol(list.join.html_safe), + id: "category-#{cat.id}", + data: { action: "click->taxonomy#category", target: 'taxonomy.category', 'taxonomy-category-id': cat.id }) + end + raw(tag.nav(tag.ol(html.join.html_safe), id: "taxonomy-#{@taxonomy.uuid}")) + end +end diff --git a/app/javascript/controllers/map_controller.js b/app/javascript/controllers/map_controller.js new file mode 100644 index 0000000..5363e5e --- /dev/null +++ b/app/javascript/controllers/map_controller.js @@ -0,0 +1,49 @@ +// SPDX-FileCopyrightText: 2020 IN COMMON Collective <collective@incommon.cc> +// +// SPDX-License-Identifier: AGPL-3.0-or-later + +// Visit The Stimulus Handbook for more details +// https://stimulusjs.org/handbook/introduction +// + +import { Controller } from "stimulus" +import L from "leaflet" +import "leaflet/dist/leaflet.css" + +export default class extends Controller { + static targets = [ "container" ] + + initialize() { + console.log("Map controller initialized.") + } + + connect() { + this.map = L.map(this.containerTarget, { + zoomDelta: 0.5, + zoomSnap: 0.5, + }).setView(this._coordinates(), this._zoom()); + + L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', { + attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery <a href="https://www.mapbox.com/">Mapbox</a>', + maxZoom: 18, + id: 'mapbox/streets-v11', + tileSize: 512, + zoomOffset: -1, + accessToken: 'pk.eyJ1IjoibmVtYWVsIiwiYSI6ImNrZzBrYjBudTB3bnMyenFmNWtrN3h3bmMifQ.Rkeyhm-9iIQOV7NAMA5LaA' + }).addTo(this.map); + } + + disconnect() { + this.map.remove(); + console.log('Map controller disconnected.') + } + + _coordinates() { + return [this.data.get('latitude'), this.data.get('longitude')]; + } + + _zoom() { + return this.data.get('zoom'); + } + +} diff --git a/app/javascript/controllers/taxonomy_controller.js b/app/javascript/controllers/taxonomy_controller.js new file mode 100644 index 0000000..16d57fa --- /dev/null +++ b/app/javascript/controllers/taxonomy_controller.js @@ -0,0 +1,56 @@ +// SPDX-FileCopyrightText: 2020 IN COMMON Collective <collective@incommon.cc> +// +// SPDX-License-Identifier: AGPL-3.0-or-later + +// Visit The Stimulus Handbook for more details +// https://stimulusjs.org/handbook/introduction +// + +import { Controller } from "stimulus" + +export default class extends Controller { + static targets = [ "category", "deploy", "filter", "section", "toggle" ] + + initialize() { + console.log("Taxonomy controller initialized.") + } + + connect() { + console.log("Taxonomy controller connected.") + + if (this.hasFilterTarget) { + let url = `/taxonomies/${this.data.get('uuid')}/filter.js` + console.log(`loading url = ${url}`) + fetch(url, { + headers: { accept: 'application/json'} + }) + .then(response => response.text()) + .then(html => this.filterTarget.innerHTML = html) + } else { + console.log("Taxonomy filter is missing") + } + } + + deploy() { + console.log(`deploying taxonomy ${this.data.get('uuid')}`); + fetch(`/taxonomies/${this.data.get('uuid')}.js`) + .then(response => response.text()) + .then(html => this.deployTarget.innerHTML = html); + } + + toggle() { + var cssClass = 'on'; + this.toggleTarget.classList.toggle(cssClass) + this.filterTarget.parentNode.classList.toggle(cssClass) + } + + category(event) { + let catId = event.target.dataset.taxonomyCategoryId + event.target.classList.toggle('active') + } + + section(event) { + let catId = event.target.dataset.taxonomySectionId + event.target.classList.toggle('active') + } +} diff --git a/app/views/taxonomies/_taxonomy.html.erb b/app/views/taxonomies/_taxonomy.html.erb new file mode 100644 index 0000000..eff6931 --- /dev/null +++ b/app/views/taxonomies/_taxonomy.html.erb @@ -0,0 +1,8 @@ +<section id="taxonomy-<%= taxonomy.to_param %>" data-controller="taxonomy" data-taxonomy-uuid="<%= taxonomy.uuid %>"> + <h3><%= taxonomy.name %></h3> + <p class="summary"><%= h taxonomy.summary %></p> + <div class="description"><%= m taxonomy.description %></div> + <button data-action="taxonomy#deploy">Preview</button> + <div class="deploy" data-target="taxonomy.deploy"></div> +</section> + diff --git a/app/views/taxonomies/filter/_taxonomy.html.erb b/app/views/taxonomies/filter/_taxonomy.html.erb new file mode 100644 index 0000000..99e9c89 --- /dev/null +++ b/app/views/taxonomies/filter/_taxonomy.html.erb @@ -0,0 +1 @@ +<%= taxonomy_filter %> diff --git a/app/views/taxonomies/filter/show.html.erb b/app/views/taxonomies/filter/show.html.erb new file mode 100644 index 0000000..99e9c89 --- /dev/null +++ b/app/views/taxonomies/filter/show.html.erb @@ -0,0 +1 @@ +<%= taxonomy_filter %> diff --git a/app/views/taxonomies/index.html.erb b/app/views/taxonomies/index.html.erb new file mode 100644 index 0000000..d060f6c --- /dev/null +++ b/app/views/taxonomies/index.html.erb @@ -0,0 +1,5 @@ +<section id="taxonomies"> + <h2>Available Taxonomies</h2> + + <%= render collection: @taxonomies: %> +</section> diff --git a/app/views/taxonomies/show.html.erb b/app/views/taxonomies/show.html.erb new file mode 100644 index 0000000..99e9c89 --- /dev/null +++ b/app/views/taxonomies/show.html.erb @@ -0,0 +1 @@ +<%= taxonomy_filter %> diff --git a/app/views/welcome/index.html.erb b/app/views/welcome/index.html.erb index eac1eff..2a154ae 100644 --- a/app/views/welcome/index.html.erb +++ b/app/views/welcome/index.html.erb @@ -1,23 +1,13 @@ -<% content_for :head do %> - <%= stylesheet_link_tag("https://unpkg.com/leaflet@1.7.1/dist/leaflet.css", - integrity: "sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==", - crossorigin: '') %> - <%= javascript_include_tag("https://unpkg.com/leaflet@1.7.1/dist/leaflet.js", - integrity: "sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==", - crossorigin: '') %> -<% end %> - <h1>Bienvenue à l'atelier carto d'IN COMMON</h1> <%= map_container %> <% content_for :aside do %> - <div data-controller="taxonomy" data-taxonomy-id="2519915f-d19c-4281-b758-f5ddb889d7fa"> + <div data-controller="taxonomy" data-taxonomy-uuid="<%= @taxonomy.to_param %>"> <div class="leaflet-bar leaftlet-control" id="taxonomy-toggle"> - <button data-action="taxonomy#toggle"></button> + <button data-action="taxonomy#toggle" data-target="taxonomy.toggle"></button> </div> - <nav data-target="taxonomy.filter"> - </nav> + <div data-target="taxonomy.filter"></div> </div> <% end %> diff --git a/config/routes.rb b/config/routes.rb index a3fcf8c..f5c6194 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -11,6 +11,9 @@ Rails.application.routes.draw do shallow do # Classification routes resources :taxonomies do + member do + get :filter, to: 'taxonomies/filter#show' + end resources :categories do resources :sections end diff --git a/db/migrate/20201110225447_create_maps.rb b/db/migrate/20201110225447_create_maps.rb new file mode 100644 index 0000000..bf001f0 --- /dev/null +++ b/db/migrate/20201110225447_create_maps.rb @@ -0,0 +1,14 @@ +class CreateMaps < ActiveRecord::Migration[6.0] + def change + create_table :maps do |t| + t.uuid :uuid, null: false, unique: true + t.decimal :latitude, precision: 9, scale: 7 + t.decimal :longitude, precision: 10, scale: 7 + t.integer :zoom, default: 13 + t.references :taxonomy, null: false, foreign_key: true + + t.timestamps + end + add_index :maps, [:uuid], unique: true + end +end diff --git a/db/seeds.rb b/db/seeds.rb index ea9fc25..6252ebf 100644 --- a/db/seeds.rb +++ b/db/seeds.rb @@ -48,3 +48,8 @@ if Category.count == 0 end end end + +# Create default map +if Map.count == 0 + Map.create(uuid: "1a42651e-3fe8-4e83-bfcd-f14bb8d0c713", latitude: 50.8503396, longitude: 4.3517103, zoom: 13, taxonomy_id: 1) +end |