rewrite structures index with vuetify (ongoing)

assets/style/global.css

@@ -0,0 +1,759 @@
+body {
+  overflow-x: hidden;
+}
+
+a {
+  text-decoration: none;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 500;
+}
+
+h1, h2 {
+  padding: 5px;
+}
+
+h1 {
+  color: #e4611b;
+  font-size: 1.6em;
+  font-weight: 500;
+}
+
+h2 {
+  color: #333333;
+  font-size: 1.4em;
+  font-weight: 500;
+}
+
+h3 {
+  color: #333333;
+  font-size: 1.2em;
+  font-weight: 500;
+}
+
+h4 {
+  color: #333333;
+  font-size: 1.2em;
+  font-weight: 500;
+}
+
+h5 {
+  color: #333333;
+  font-size: 1em;
+  font-weight: 500;
+}
+
+a {
+  color: #e4611b;
+}
+
+a:hover {
+  color: #893a10;
+  text-decoration: underline;
+}
+
+p {
+  padding: 5px;
+  margin: 0 0 10px;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-justify {
+  text-align: justify;
+}
+
+.text-right {
+  text-align: right;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+table caption {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  color: #777;
+  text-align: left;
+}
+
+table td, table th {
+  border: 1px solid #ddd;
+  padding: 8px;
+}
+
+table tr:nth-child(even) {
+  background-color: #f2f2f2;
+}
+
+table th {
+  padding-top: 12px;
+  padding-bottom: 12px;
+  text-align: left;
+  color: #333333;
+}
+
+pre {
+  display: block;
+  padding: 9.5px;
+  margin: 0 0 10px;
+  font-size: 13px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: #f5f5f5;
+  word-break: break-all;
+  word-wrap: break-word;
+  color: #333333;
+}
+
+img {
+  max-width: 95%;
+  height: auto;
+}
+
+hr {
+  margin: 15px 5px;
+  border-color: #BBB;
+}
+
+.align-center {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.ot-structures-frame, .ot-structures-frame-details {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  font-family: Arial, serif;
+}
+.ot-structures-frame header, .ot-structures-frame-details header {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  width: 100%;
+  align-items: center;
+}
+.ot-structures-frame h2, .ot-structures-frame-details h2 {
+  font-size: 21px;
+  font-weight: 750;
+  flex: 1;
+  text-align: left;
+  color: #e4611b;
+}
+.ot-structures-frame header a, .ot-structures-frame-details header a {
+  padding: 3px;
+  margin: 2px;
+  font-weight: 500;
+}
+.ot-structures-frame input, .ot-structures-frame select, .ot-structures-frame-details input, .ot-structures-frame-details select {
+  height: 36px;
+  border: solid 1px #bfbfbf;
+  border-radius: 0;
+}
+.ot-structures-frame .structure-col, .ot-structures-frame-details .structure-col {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  max-width: 50%;
+  padding: 12px;
+  align-items: center;
+}
+.ot-structures-frame .btn, .ot-structures-frame-details .btn {
+  background-color: #e4611b;
+  border-radius: 4px;
+  padding: 8px;
+  font-weight: 750;
+  color: #ffffff;
+  text-align: center;
+}
+.ot-structures-frame .spacer, .ot-structures-frame-details .spacer {
+  flex: 1;
+}
+
+.ot-structures-frame {
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.ot-structures-frame #structure-map-wrapper {
+  position: relative;
+  width: 100%;
+  padding-bottom: 100%;
+  float: left;
+  height: 0;
+}
+.ot-structures-frame #structure-map {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+}
+.ot-structures-frame #structure-map a {
+  text-decoration: none;
+}
+.ot-structures-frame #structure-map-bar {
+  margin: 16px 2% 6px 2%;
+  width: 100%;
+}
+.ot-structures-frame #structure-map-bar .advice {
+  color: #262626;
+  font-weight: 750;
+  text-align: center;
+  font-size: 12px;
+}
+.ot-structures-frame #overseas-provinces-list {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  flex-direction: row;
+  list-style: none;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  padding: 0;
+  width: 100%;
+}
+.ot-structures-frame #overseas-provinces-list li {
+  margin: 5px;
+  min-width: 50px;
+  width: 75px;
+  height: 75px;
+}
+.ot-structures-frame #overseas-provinces-list li img {
+  border: solid 1px #000000;
+  max-width: 100%;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+.ot-structures-frame .structure-search {
+  width: 100%;
+}
+.ot-structures-frame .structure-search form {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.ot-structures-frame .structure-search-row {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin-bottom: 8px;
+}
+.ot-structures-frame .search-bar-wrapper {
+  display: flex;
+  flex-direction: row;
+  height: 30px;
+  padding: 6px 2%;
+  border: solid 1px #bfbfbf;
+  margin: 6px 0;
+  max-width: 44%;
+}
+.ot-structures-frame .search-bar-wrapper:not(:last-child) {
+  margin-right: auto;
+}
+.ot-structures-frame .search-bar {
+  flex: 1;
+  background: none;
+  outline: none;
+  height: auto;
+  font-size: 18px;
+  border: none;
+  width: 95%;
+  min-width: 85%;
+}
+.ot-structures-frame .search-bar-btn {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  border: none;
+  background: none;
+  width: 5%;
+  min-width: 24px;
+  padding: 5px;
+  font-size: 18px;
+  cursor: pointer;
+  min-height: 32px;
+}
+.ot-structures-frame .search-bar-btn .fas {
+  color: #8c8c8c;
+}
+.ot-structures-frame .city-search-dropdown {
+  min-width: 100%;
+  position: relative;
+  display: inline-block;
+  top: 10px;
+  left: -100%;
+}
+.ot-structures-frame .city-search-results, .ot-structures-frame .city-search-no-result, .ot-structures-frame .city-search-loading {
+  position: absolute;
+  min-width: 100%;
+  background: #EEEEEE;
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+  z-index: 99;
+  top: 100%;
+}
+.ot-structures-frame .city-search-loading img {
+  padding: 10px;
+  width: 30px;
+}
+.ot-structures-frame .city-search-item, .ot-structures-frame .city-search-no-result {
+  display: block;
+  padding: 12px 24px;
+  white-space: nowrap;
+}
+.ot-structures-frame .city-search-item:hover {
+  background-color: #d9d9d9;
+  cursor: pointer;
+}
+.ot-structures-frame .structure-search select {
+  color: #e4611b;
+  padding: 4px 6px;
+  margin: 3px 2%;
+  font-weight: 750;
+  width: 22%;
+  min-width: 110px;
+  font-size: 12px;
+}
+.ot-structures-frame .structure-search select:first-child {
+  margin-left: 0;
+}
+.ot-structures-frame .structure-search select:last-child {
+  margin-right: 0;
+}
+.ot-structures-frame .structure-search .reset-search {
+  background: none;
+  color: #e4611b;
+  margin: 0 6px 6px 0;
+  cursor: pointer;
+  height: 36px;
+  border: solid 2px #e4611b;
+  border-radius: 0;
+}
+.ot-structures-frame .structure-search .submit-search {
+  background-color: #e4611b;
+  color: #ffffff;
+  font-weight: 750;
+  margin: 0 0 6px 6px;
+  cursor: pointer;
+  height: 36px;
+  border: none;
+  border-radius: 0;
+}
+.ot-structures-frame .structure-results .structures-page {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.ot-structures-frame .structure-card {
+  display: flex;
+  flex-direction: column;
+  width: 42%;
+  min-width: 200px;
+  border: solid 1px #cccccc;
+  border-radius: 4px;
+  padding: 12px;
+  margin: 8px 1%;
+  background-color: #f2f2f2;
+}
+.ot-structures-frame .structure-poster {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  margin: 8px;
+  min-width: 160px;
+  height: 80px;
+}
+.ot-structures-frame .structure-poster img {
+  width: auto;
+  height: auto;
+  max-width: 100%;
+}
+.ot-structures-frame .structure-details {
+  display: flex;
+  flex-direction: column;
+}
+.ot-structures-frame .structure-details > * {
+  margin: 4px;
+}
+.ot-structures-frame .structure-practices {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  min-height: 18px;
+}
+.ot-structures-frame .structure-practice {
+  background-color: #d9d9d9;
+  color: #262626;
+  font-size: 11px;
+  margin: 1px 4px 1px 0;
+  padding: 1px 5px 3px 5px;
+  height: 16px;
+  border-radius: 6px;
+}
+.ot-structures-frame .structure-name {
+  font-size: 18px;
+  font-weight: 750;
+  width: 100%;
+  text-align: left;
+  color: #e4611b;
+}
+.ot-structures-frame .structure-details-table td {
+  border: none;
+}
+.ot-structures-frame .structure-details-entry {
+  color: #595959;
+}
+.ot-structures-frame .structure-details-entry .fas {
+  color: #e4611b;
+}
+.ot-structures-frame .structure-see {
+  width: 128px;
+  max-height: 28px;
+  padding: 4px;
+  font-weight: 500;
+  margin-top: 8px;
+}
+.ot-structures-frame .structure-see:hover {
+  text-decoration: none;
+  color: white;
+}
+.ot-structures-frame .results-count-message {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  color: #666666;
+  font-size: 0.8em;
+  padding-left: 12px;
+}
+.ot-structures-frame .pagination-bar li a {
+  color: #4d4d4d;
+  font-weight: 600;
+}
+.ot-structures-frame .pagination-bar li.current a {
+  color: #e4611b;
+}
+
+.ot-structures-frame.list-view .structure-col-map {
+  display: none;
+}
+.ot-structures-frame.list-view .search-bar-wrapper {
+  flex: 1;
+  max-width: none;
+}
+.ot-structures-frame.list-view .search-bar-wrapper:not(:last-child) {
+  margin-right: 2%;
+}
+.ot-structures-frame.list-view .structure-search-row.filters {
+  margin: 0 auto 12px auto;
+}
+.ot-structures-frame.list-view .search-bar {
+  flex: 1;
+  max-width: none;
+}
+.ot-structures-frame.list-view .filters select, .ot-structures-frame.list-view .filters button {
+  height: 52px;
+  margin: 3px 0.5%;
+}
+.ot-structures-frame.list-view .filters .reset-search {
+  margin-left: 0;
+}
+.ot-structures-frame.list-view .filters .submit-search {
+  margin-right: 0;
+}
+.ot-structures-frame.list-view .filters select {
+  width: 18.5%;
+}
+.ot-structures-frame.list-view .filters button {
+  width: 10.5%;
+}
+.ot-structures-frame.list-view .structure-col {
+  align-items: normal;
+}
+.ot-structures-frame.list-view .structure-col-results {
+  width: 100%;
+  max-width: 100%;
+}
+.ot-structures-frame.list-view .structure-card {
+  width: 95%;
+  flex-direction: row;
+}
+.ot-structures-frame.list-view .structure-card .spacer {
+  flex: 0;
+}
+.ot-structures-frame.list-view .structure-details {
+  flex: 1;
+}
+.ot-structures-frame.list-view .structure-see {
+  align-self: flex-end;
+}
+
+.ot-structures-frame.map-view .activate-map-view {
+  font-weight: 750;
+}
+
+.ot-structures-frame.list-view .activate-list-view {
+  font-weight: 750;
+}
+
+@media screen and (min-width: 700px) and (max-width: 1048px) {
+  .ot-structures-frame.map-view #overseas-provinces-list li {
+    width: 85px;
+    height: 85px;
+    margin: 5px 12px;
+  }
+  .ot-structures-frame.map-view .structure-search select {
+    margin: 3px 2%;
+    width: 46%;
+  }
+
+  .ot-structures-frame.list-view .structure-search-row {
+    flex-wrap: nowrap;
+  }
+  .ot-structures-frame.list-view .filters select, .ot-structures-frame.list-view .filters button {
+    width: 15%;
+    margin: 1%;
+  }
+}
+@media screen and (max-width: 700px) {
+  .ot-structures-frame {
+    flex-direction: column;
+    flex-wrap: nowrap;
+  }
+  .ot-structures-frame .structure-col {
+    max-width: none;
+    min-width: 100px;
+    overflow: hidden;
+  }
+  .ot-structures-frame .structure-search-row {
+    flex-direction: column;
+  }
+  .ot-structures-frame .search-bar-wrapper {
+    width: 95%;
+    max-width: 95%;
+    margin: 3px auto;
+  }
+  .ot-structures-frame .search-bar-wrapper input {
+    width: auto;
+  }
+  .ot-structures-frame .structure-search select {
+    width: 95%;
+    margin: 3px auto;
+  }
+  .ot-structures-frame .structure-card {
+    width: 100%;
+  }
+
+  .ot-structures-frame.list-view .search-bar-wrapper {
+    width: 85%;
+  }
+  .ot-structures-frame.list-view .structure-card {
+    flex-direction: column;
+  }
+  .ot-structures-frame.list-view .structure-search-row {
+    flex-wrap: nowrap;
+  }
+  .ot-structures-frame.list-view .structure-search-row.filters {
+    margin: 0;
+  }
+  .ot-structures-frame.list-view .filters select, .ot-structures-frame.list-view .filters button {
+    width: 80%;
+    margin: 5px auto;
+  }
+}
+.ot-structures-frame-details {
+  flex-direction: column;
+}
+.ot-structures-frame-details .please-wait {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100vh;
+  justify-content: center;
+  align-items: center;
+}
+.ot-structures-frame-details .content {
+  margin: 18px 10%;
+  max-width: 80%;
+}
+.ot-structures-frame-details header {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  flex-direction: row;
+}
+.ot-structures-frame-details header .go-back {
+  margin: 16px;
+  padding: 4px 8px;
+  color: #737373;
+  font-weight: 700;
+}
+.ot-structures-frame-details header h2 {
+  font-size: 14px;
+  flex: 1;
+}
+.ot-structures-frame-details .structure-header {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.ot-structures-frame-details .structure-header > * {
+  margin: 12px;
+}
+.ot-structures-frame-details .structure-header .logo {
+  height: 60px;
+  width: auto;
+}
+.ot-structures-frame-details .structure-header h3 {
+  font-size: 22px;
+  color: #e4611b;
+  font-weight: 750;
+  flex: 1;
+}
+.ot-structures-frame-details .structure-header .social {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.ot-structures-frame-details .structure-header .social a {
+  font-size: 22px;
+  padding: 4px 6px;
+  color: #808080;
+}
+.ot-structures-frame-details .structure-practices {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  margin: 6px auto;
+  padding-bottom: 6px;
+  flex-wrap: wrap;
+  min-height: 18px;
+  justify-content: center;
+  border-bottom: solid 1px #a6a6a6;
+}
+.ot-structures-frame-details .structure-practice {
+  background-color: #d9d9d9;
+  color: #262626;
+  font-size: 11px;
+  margin: 1px 4px 1px 0;
+  padding: 1px 5px 3px 5px;
+  height: 16px;
+  border-radius: 6px;
+}
+.ot-structures-frame-details .illustration-container {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  flex-direction: row;
+  margin: 40px 20%;
+  justify-content: center;
+}
+.ot-structures-frame-details .illustration-container img {
+  max-height: 180px;
+  width: auto;
+}
+.ot-structures-frame-details .practices-tags {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  flex-direction: row;
+}
+.ot-structures-frame-details .details {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  flex-direction: row;
+  max-width: 100%;
+  color: #666666;
+}
+.ot-structures-frame-details .details h4 {
+  font-size: 18px;
+  font-weight: 750;
+  border-bottom: solid 1px #e4611b;
+  align-self: flex-start;
+  color: #666666;
+  margin: 8px 0;
+}
+.ot-structures-frame-details .details .description {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  flex-direction: column;
+  border-right: solid 2px #e4611b;
+  width: 45%;
+  padding-right: 5%;
+}
+.ot-structures-frame-details .details .contact {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  flex-direction: column;
+  width: 45%;
+  padding-left: 5%;
+}
+.ot-structures-frame-details .details .contact td {
+  background: none;
+  border: none;
+  width: 80%;
+}
+.ot-structures-frame-details .details .contact td:first-child {
+  width: 20%;
+  color: #e4611b;
+}
+.ot-structures-frame-details .spot-on-bar {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  flex-direction: row;
+}
+.ot-structures-frame-details #structure-details-map {
+  height: 300px;
+  margin-top: 45px;
+}
+
+/*# sourceMappingURL=global.css.map */

assets/style/global.scss

@@ -0,0 +1,852 @@
+@import "mixins";
+
+$theme-color-1: #e4611b;
+
+$btn-background-color: $theme-color-1;
+$btn-text-color: #ffffff;
+$input-border-color: #bfbfbf;
+$content-h1-color: $theme-color-1;
+$content-h2-color: #333333;
+$content-h3-color: #333333;
+$content-h4-color: #333333;
+$content-h5-color: #333333;
+$content-h1-size: 1.6em;
+$content-h1-weight: 500;
+$content-h2-size: 1.4em;
+$content-h2-weight: 500;
+$content-h3-size: 1.2em;
+$content-h3-weight: 500;
+$content-h4-size: 1.2em;
+$content-h4-weight: 500;
+$content-h5-size: 1em;
+$content-h5-weight: 500;
+$content-a-color: $theme-color-1;
+
+body {
+  overflow-x: hidden;
+}
+
+a {
+  text-decoration: none;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 500;
+}
+
+h1, h2 {
+  padding: 5px;
+}
+
+h1 {
+  color: $content-h1-color;
+  font-size: $content-h1-size;
+  font-weight: $content-h1-weight;
+}
+
+h2 {
+  color: $content-h2-color;
+  font-size: $content-h2-size;
+  font-weight: $content-h2-weight;
+}
+
+h3 {
+  color: $content-h3-color;
+  font-size: $content-h3-size;
+  font-weight: $content-h3-weight;
+}
+
+h4 {
+  color: $content-h4-color;
+  font-size: $content-h4-size;
+  font-weight: $content-h4-weight;
+}
+
+h5 {
+  color: $content-h5-color;
+  font-size: $content-h5-size;
+  font-weight: $content-h5-weight;
+}
+
+a {
+  color: $content-a-color;
+}
+
+a:hover {
+  color: darken($content-a-color, 20%);
+  text-decoration: underline;
+}
+
+p {
+  padding: 5px;
+  margin: 0 0 10px;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-justify {
+  text-align: justify;
+}
+
+.text-right {
+  text-align: right;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+table caption {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  color: #777;
+  text-align: left;
+}
+
+table td, table th {
+  border: 1px solid #ddd;
+  padding: 8px;
+}
+
+table tr:nth-child(even) {
+  background-color: #f2f2f2;
+}
+
+table th {
+  padding-top: 12px;
+  padding-bottom: 12px;
+  text-align: left;
+  color: #333333;
+}
+
+pre {
+  display: block;
+  padding: 9.5px;
+  margin: 0 0 10px;
+  font-size: 13px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: #f5f5f5;
+  word-break: break-all;
+  word-wrap: break-word;
+  color: #333333;
+}
+
+img {
+  max-width: 95%;
+  height: auto;
+}
+
+hr {
+  margin: 15px 5px;
+  border-color: #BBB;
+}
+
+.align-center {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+
+.ot-structures-frame, .ot-structures-frame-details {
+  @include flexbox;
+  font-family: Arial, serif;
+
+  header {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    width: 100%;
+    align-items: center;
+  }
+
+  h2 {
+    font-size: 21px;
+    font-weight: 750;
+    flex: 1;
+    text-align: left;
+    color: $btn-background-color;
+  }
+
+  header a {
+    padding: 3px;
+    margin: 2px;
+    font-weight: 500;
+  }
+
+  input, select {
+    height: 36px;
+    border: solid 1px $input-border-color;
+    border-radius: 0;
+  }
+
+  .structure-col {
+    @include flexbox;
+    flex-direction: column;
+    flex: 1;
+    max-width: 50%;
+    padding: 12px;
+    align-items: center;
+  }
+
+  .btn {
+    background-color: $btn-background-color;
+    border-radius: 4px;
+    padding: 8px;
+    font-weight: 750;
+    color: $btn-text-color;
+    text-align: center;
+  }
+
+  .spacer {
+    flex: 1;
+  }
+}
+
+.ot-structures-frame {
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  // The wrapper role is to maintain the map's height equal to its width
+  // @see https://stackoverflow.com/a/14896313/4279120
+  #structure-map-wrapper {
+    position: relative;
+    width: 100%;
+    padding-bottom: 100%;
+    float: left;
+    height: 0;
+  }
+
+  #structure-map {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+  }
+
+  #structure-map a {
+    text-decoration: none;
+  }
+
+  #structure-map-bar {
+    margin: 16px 2% 6px 2%;
+    width: 100%;
+  }
+
+  #structure-map-bar .advice {
+    color: #262626;
+    font-weight: 750;
+    text-align: center;
+    font-size: 12px;
+  }
+
+  #overseas-provinces-list {
+    @include flexbox;
+    flex-direction: row;
+    list-style: none;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    padding: 0;
+    width: 100%;
+  }
+
+  #overseas-provinces-list li {
+    margin: 5px;
+    min-width: 50px;
+    width: 75px;
+    height: 75px;
+  }
+
+  #overseas-provinces-list li img {
+    border: solid 1px #000000;
+    max-width: 100%;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+  }
+
+  .structure-search {
+    width: 100%;
+  }
+
+  .structure-search form {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .structure-search-row {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin-bottom: 8px;
+  }
+
+  .search-bar-wrapper {
+    display: flex;
+    flex-direction: row;
+    height: 30px;
+    padding: 6px 2%;
+    border: solid 1px $input-border-color;
+    margin: 6px 0;
+    max-width: 44%;
+  }
+
+  .search-bar-wrapper:not(:last-child) {
+    margin-right: auto;
+  }
+
+  .search-bar {
+    flex: 1;
+    background: none;
+    outline: none;
+    height: auto;
+    font-size: 18px;
+    border: none;
+    width: 95%;
+    min-width: 85%;
+  }
+
+  .search-bar-btn {
+    @include flexbox;
+    flex-direction: column;
+    justify-content: center;
+    border: none;
+    background: none;
+    width: 5%;
+    min-width: 24px;
+    padding: 5px;
+    font-size: 18px;
+    cursor: pointer;
+    min-height: 32px;
+  }
+
+  .search-bar-btn .fas {
+    color: darken($input-border-color, 20);
+  }
+
+  .city-search-dropdown {
+    min-width: 100%;
+    position: relative;
+    display: inline-block;
+    top: 10px;
+    left: -100%;
+  }
+
+  .city-search-results, .city-search-no-result, .city-search-loading {
+    position: absolute;
+    min-width: 100%;
+    background: #EEEEEE;
+    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
+    z-index: 99;
+    top: 100%;
+  }
+
+  .city-search-loading img {
+    padding:10px;
+    width:30px;
+  }
+
+  .city-search-item, .city-search-no-result {
+    display: block;
+    padding: 12px 24px;
+    white-space: nowrap;
+  }
+
+  .city-search-item:hover {
+    background-color: #d9d9d9;
+    cursor: pointer;
+  }
+
+  .structure-search select {
+    color: $btn-background-color;
+    padding: 4px 6px;
+    margin: 3px 2%;
+    font-weight: 750;
+    width: 22%;
+    min-width: 110px;
+    font-size: 12px;
+  }
+
+  .structure-search select:first-child {
+    margin-left: 0;
+  }
+  .structure-search select:last-child {
+    margin-right: 0;
+  }
+
+  .structure-search .reset-search {
+    background: none;
+    color: $btn-background-color;
+    margin: 0 6px 6px 0;
+    cursor: pointer;
+    height: 36px;
+    border: solid 2px $btn-background-color;
+    border-radius: 0;
+  }
+
+  .structure-search .submit-search {
+    background-color: $btn-background-color;
+    color: $btn-text-color;
+    font-weight: 750;
+    margin: 0 0 6px 6px;
+    cursor: pointer;
+    height: 36px;
+    border: none;
+    border-radius: 0;
+  }
+
+  .structure-results .structures-page {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .structure-card {
+    display: flex;
+    flex-direction: column;
+    width: 42%;
+    min-width: 200px;
+    border: solid 1px #cccccc;
+    border-radius: 4px;
+    padding: 12px;
+    margin: 8px 1%;
+    background-color: #f2f2f2;
+  }
+
+  .structure-poster {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    margin: 8px;
+    min-width: 160px;
+    height: 80px;
+  }
+
+  .structure-poster img {
+    width: auto;
+    height: auto;
+    max-width: 100%;
+  }
+
+  .structure-details {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .structure-details > * {
+    margin: 4px;
+  }
+
+  .structure-practices {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    min-height: 18px;
+  }
+
+  .structure-practice {
+    background-color: #d9d9d9;
+    color: #262626;
+    font-size: 11px;
+    margin: 1px 4px 1px 0;
+    padding: 1px 5px 3px 5px;
+    height: 16px;
+    border-radius: 6px;
+  }
+
+  .structure-name {
+    font-size: 18px;
+    font-weight: 750;
+    width: 100%;
+    text-align: left;
+    color: $btn-background-color;
+  }
+
+  .structure-details-table td {
+    border:none;
+  }
+
+  .structure-details-entry {
+    color: #595959;
+  }
+
+  .structure-details-entry .fas {
+    color: $btn-background-color;
+  }
+
+  .structure-see {
+    width: 128px;
+    max-height: 28px;
+    padding: 4px;
+    font-weight: 500;
+    margin-top: 8px;
+  }
+
+  .structure-see:hover {
+    text-decoration: none;
+    color: white;
+  }
+
+  .results-count-message {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    color: #666666;
+    font-size: 0.8em;
+    padding-left: 12px;
+  }
+
+  .pagination-bar {
+    li a {
+      color: #4d4d4d;
+      font-weight: 600;
+    }
+
+    li.current a {
+      color: $btn-background-color;
+    }
+  }
+}
+
+.ot-structures-frame.list-view {
+  // List view changes
+
+  .structure-col-map {
+    display: none;
+  }
+
+  .structure-search form .search-buttons {
+  }
+
+  .search-bar-wrapper {
+    flex: 1;
+    max-width: none;
+  }
+
+  .search-bar-wrapper:not(:last-child) {
+    margin-right: 2%;
+  }
+
+  .structure-search-row.filters {
+    margin: 0 auto 12px auto;
+  }
+
+  .search-bar {
+    flex: 1;
+    max-width: none;
+  }
+
+  .filters select, .filters button {
+    height: 52px;
+    margin: 3px 0.5%;
+  }
+
+  .filters .reset-search {
+    margin-left: 0;
+  }
+
+  .filters .submit-search {
+    margin-right: 0;
+  }
+
+  .filters select {
+    width: 18.5%;
+  }
+
+  .filters button {
+    width: 10.5%;
+  }
+
+  .structure-col {
+    align-items: normal;
+  }
+
+  .structure-col-results {
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .structure-card {
+    width: 95%;
+    flex-direction: row;
+  }
+
+  .structure-card .spacer {
+    flex: 0; // disable spacer in list view
+  }
+
+  .structure-details {
+    flex: 1;
+  }
+
+  .structure-see {
+    align-self: flex-end;
+  }
+}
+
+.ot-structures-frame.map-view .activate-map-view {
+  font-weight: 750;
+}
+.ot-structures-frame.list-view .activate-list-view {
+  font-weight: 750;
+}
+
+// Medium screens
+@media screen and (min-width: 700px) and (max-width: 1048px) {
+  .ot-structures-frame.map-view {
+    #overseas-provinces-list li {
+      width: 85px;
+      height: 85px;
+      margin: 5px 12px;
+    }
+
+    .structure-search select {
+      margin: 3px 2%;
+      width: 46%;
+    }
+  }
+
+  .ot-structures-frame.list-view {
+    .structure-search-row {
+      flex-wrap: nowrap;
+    }
+
+    .filters {
+      select, button {
+        width: 15%;
+        margin: 1%;
+      }
+    }
+  }
+}
+
+
+// Small screens
+@media screen and (max-width: 700px) {
+  .ot-structures-frame {
+    flex-direction: column;
+    flex-wrap: nowrap;
+
+    .structure-col {
+      max-width: none;
+
+      // prevents content to be higher than the container
+      min-width: 100px;
+      overflow: hidden;
+    }
+
+    .structure-search-row {
+      flex-direction: column;
+    }
+
+    .search-bar-wrapper {
+      width: 95%;
+      max-width: 95%;
+      margin: 3px auto;
+    }
+
+    .search-bar-wrapper input {
+      width: auto;
+    }
+
+    .structure-search select {
+      width: 95%;
+      margin: 3px auto;
+    }
+
+    .structure-card {
+      width: 100%;
+    }
+  }
+  .ot-structures-frame.list-view {
+
+    .search-bar-wrapper {
+      width: 85%;
+    }
+
+    .structure-card {
+      flex-direction: column;
+    }
+
+    .structure-search-row {
+      flex-wrap: nowrap;
+    }
+
+    .structure-search-row.filters {
+      margin: 0;
+    }
+
+    .filters {
+      select, button {
+        width: 80%;
+        margin: 5px auto;
+      }
+    }
+  }
+}
+
+.ot-structures-frame-details {
+  flex-direction: column;
+
+  .please-wait {
+    @include flexbox;
+    flex-direction: row;
+    width: 100%;
+    height: 100vh;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .content {
+    margin: 18px 10%;
+    max-width: 80%;
+  }
+
+  header {
+    @include flexbox;
+    flex-direction: row;
+
+    .go-back {
+      margin: 16px;
+      padding: 4px 8px;
+      color: #737373;
+      font-weight: 700;
+    }
+
+    h2 {
+      font-size: 14px;
+      flex: 1
+    }
+  }
+
+  .structure-header {
+    @include flexbox;
+    flex-direction: row;
+    align-items: center;
+
+    >* {
+      margin: 12px;
+    }
+
+    .logo {
+      height: 60px;
+      width: auto;
+    }
+
+    h3 {
+      font-size: 22px;
+      color: $btn-background-color;
+      font-weight: 750;
+      flex: 1;
+    }
+
+    .social {
+      @include flexbox;
+      flex-direction: row;
+      align-items: center;
+    }
+
+    .social a {
+      font-size: 22px;
+      padding: 4px 6px;
+      color: #808080;
+    }
+  }
+
+  .structure-practices {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    margin: 6px auto;
+    padding-bottom: 6px;
+    flex-wrap: wrap;
+    min-height: 18px;
+    justify-content: center;
+    border-bottom: solid 1px #a6a6a6;
+  }
+
+  .structure-practice {
+    background-color: #d9d9d9;
+    color: #262626;
+    font-size: 11px;
+    margin: 1px 4px 1px 0;
+    padding: 1px 5px 3px 5px;
+    height: 16px;
+    border-radius: 6px;
+  }
+
+  .illustration-container {
+    @include flexbox;
+    flex-direction: row;
+    margin: 40px 20%;
+    justify-content: center;
+
+    img {
+      max-height: 180px;
+      width: auto;
+    }
+  }
+
+  .practices-tags {
+    @include flexbox;
+    flex-direction: row;
+  }
+
+  .details {
+    @include flexbox;
+    flex-direction: row;
+    max-width: 100%;
+    color: #666666;
+
+    h4 {
+      font-size: 18px;
+      font-weight: 750;
+      border-bottom: solid 1px $btn-background-color;
+      align-self: flex-start;
+      color: #666666;
+      margin: 8px 0;
+    }
+
+    .description {
+      @include flexbox;
+      flex-direction: column;
+      border-right: solid 2px $btn-background-color;
+      width: 45%;
+      padding-right: 5%;
+    }
+    .contact {
+      @include flexbox;
+      flex-direction: column;
+      width: 45%;
+      padding-left: 5%;
+    }
+
+    .contact td {
+      background: none;
+      border: none;
+      width: 80%;
+    }
+    .contact td:first-child {
+      width: 20%;
+      color: $btn-background-color;
+    }
+  }
+
+  .spot-on-bar {
+    @include flexbox;
+    flex-direction: row;
+  }
+
+  #structure-details-map {
+    height: 300px;
+    margin-top: 45px;
+  }
+
+}

assets/style/mixins.css

@@ -0,0 +1,3 @@
+
+
+/*# sourceMappingURL=mixins.css.map */

assets/style/mixins.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"mixins.css"}

assets/style/mixins.scss

@@ -0,0 +1,23 @@
+@mixin flexbox() {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+}
+
+@mixin flex($values) {
+  -webkit-box-flex: $values;
+  -moz-box-flex:  $values;
+  -webkit-flex:  $values;
+  -ms-flex:  $values;
+  flex:  $values;
+}
+
+@mixin order($val) {
+  -webkit-box-ordinal-group: $val;
+  -moz-box-ordinal-group: $val;
+  -ms-flex-order: $val;
+  -webkit-order: $val;
+  order: $val;
+}

assets/style/variables.css

@@ -0,0 +1,3 @@
+
+
+/*# sourceMappingURL=variables.css.map */

assets/style/variables.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"variables.css"}

components/Layout/Container.vue

@@ -0,0 +1,18 @@
+<!-- Container générique pleine page, utilisé entre autres
+ pour porter le contenu principal de la page -->
+
+<template>
+  <v-container fluid class="container">
+    <v-row justify="center" align="center">
+      <v-col cols="12" sm="12" md="12">
+        <slot />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<style scoped>
+.container{
+  max-width: 1170px;
+}
+</style>

components/Ui/Loading/Gear.vue

@@ -0,0 +1,7 @@
+<template>
+  <nuxt-img
+    src="/images/gear.gif"
+    :alt="$t('please_wait')"
+    style="margin-top:100px; width:70px"
+  />
+</template>

components/Ui/Map/France.vue

@@ -0,0 +1,38 @@
+<template>
+  <LayoutContainer>
+    <div id="map" />
+
+    <div class="advice">
+      {{ $t("click_on_land_to_go_there") }}
+    </div>
+    <v-row class="map-shortcuts">
+      <v-col cols="2">
+        <nuxt-img src="/images/metropole.png" alt="Metropole" data="{map-fit: '51.03,-5.78;41.2,9.70'}" />
+      </v-col>
+      <v-col cols="2">
+        <nuxt-img src="/images/guadeloupe.png" alt="Guadeloupe" data="{map-fit: '16.62,-62.03;15.74,-60.97'}" />
+      </v-col>
+      <v-col cols="2">
+        <nuxt-img src="/images/martinique.png" alt="Martinique" data="{map-fit: '14.95,-61.43;14.28,-60.60'}" />
+      </v-col>
+      <v-col cols="2">
+        <nuxt-img src="/images/mayotte.png" alt="Mayotte" data="{map-fit: '-12.51,44.86;-13.19,45.45'}" />
+      </v-col>
+      <v-col cols="2">
+        <nuxt-img src="/images/la_reunion.png" alt="La Réunion" data="{map-fit: '-20.65,54.92;-21.65,56.15'}" />
+      </v-col>
+      <v-col cols="2">
+        <nuxt-img src="/images/guyane.png" alt="Guyane" data="{map-fit: '6.24,-54.62;1.87,-50.59'}" />
+      </v-col>
+    </v-row>
+  </LayoutContainer>
+</template>
+
+
+<style>
+  .map-shortcuts img {
+    border: solid 1px #000;
+    width: 75px;
+    height: 75px;
+  }
+</style>

components/Ui/Search/Address.vue

@@ -0,0 +1,30 @@
+<template>
+  <v-text-field
+    type="text"
+    name="search-city"
+    class="search-bar"
+    :placeholder="$t('what') + ' ?'"
+    autocomplete="off"
+  >
+    <button
+      class="search-bar-btn"
+      name="search-localize"
+    >
+      <i class="fas fa-crosshairs" />
+    </button>
+    <div class="city-search-dropdown" style="display: none;">
+      <div class="city-search-loading">
+        <nuxt-img
+          src="EXT:ot_templating/Resources/Public/media/gear.gif"
+          :alt="$t('please_wait')"
+        />
+      </div>
+      <div class="city-search-no-result">
+        {{ $t('no_result') }}
+      </div>
+      <div class="city-search-results" />
+    </div>
+    <input type="hidden" name="lat" value="{ot:request.getArgument(argument: 'lat')}">
+    <input type="hidden" name="long" value="{ot:request.getArgument(argument: 'long')}">
+  </v-text-field>
+</template>

components/Ui/Search/Text.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="search-bar-wrapper">
+    <v-text-field
+      type="text"
+      class="search-bar"
+      name="search-query"
+      :placeholder="$t('what') + ' ?'"
+    >
+      <button
+        class="search-bar-btn"
+        name="submit-search"
+      >
+        <i class="fas fa-search" />
+      </button>
+    </v-text-field>
+  </div>
+</template>

components/Ui/Select/Department.vue

@@ -0,0 +1,120 @@
+<template>
+  <v-select
+    :items="departments"
+    item-value="code"
+    item-text="label"
+    :label="$t('department')"
+  />
+</template>
+
+<script>
+const departments = [
+  { code: '01', label: '01 - Ain' },
+  { code: '02', label: '02 - Aisne' },
+  { code: '03', label: '03 - Allier' },
+  { code: '04', label: '04 - Alpes-de-Haute-Provence' },
+  { code: '05', label: '05 - Hautes-Alpes' },
+  { code: '06', label: '06 - Alpes-Maritimes' },
+  { code: '07', label: '07 - Ardèche' },
+  { code: '08', label: '08 - Ardennes' },
+  { code: '09', label: '09 - Ariège' },
+  { code: '10', label: '10 - Aube' },
+  { code: '11', label: '11 - Aude' },
+  { code: '12', label: '12 - Aveyron' },
+  { code: '13', label: '13 - Bouches-du-Rhône' },
+  { code: '14', label: '14 - Calvados' },
+  { code: '15', label: '15 - Cantal' },
+  { code: '16', label: '16 - Charente' },
+  { code: '17', label: '17 - Charente-Maritime' },
+  { code: '18', label: '18 - Cher' },
+  { code: '19', label: '19 - Corrèze' },
+  { code: '2A', label: '2A - Corse-du-Sud' },
+  { code: '2B', label: '2B - Haute-Corse' },
+  { code: '21', label: '21 - Côte-d\'Or' },
+  { code: '22', label: '22 - Côtes-d\'Armor' },
+  { code: '23', label: '23 - Creuse' },
+  { code: '24', label: '24 - Dordogne' },
+  { code: '25', label: '25 - Doubs' },
+  { code: '26', label: '26 - Drôme' },
+  { code: '27', label: '27 - Eure' },
+  { code: '28', label: '28 - Eure-et-Loir' },
+  { code: '29', label: '29 - Finistère' },
+  { code: '30', label: '30 - Gard' },
+  { code: '31', label: '31 - Haute-Garonne' },
+  { code: '32', label: '32 - Gers' },
+  { code: '33', label: '33 - Gironde' },
+  { code: '34', label: '34 - Hérault' },
+  { code: '35', label: '35 - Ille-et-Vilaine' },
+  { code: '36', label: '36 - Indre' },
+  { code: '37', label: '37 - Indre-et-Loire' },
+  { code: '38', label: '38 - Isère' },
+  { code: '39', label: '39 - Jura' },
+  { code: '40', label: '40 - Landes' },
+  { code: '41', label: '41 - Loir-et-Cher' },
+  { code: '42', label: '42 - Loire' },
+  { code: '43', label: '43 - Haute-Loire' },
+  { code: '44', label: '44 - Loire-Atlantique' },
+  { code: '45', label: '45 - Loiret' },
+  { code: '46', label: '46 - Lot' },
+  { code: '47', label: '47 - Lot-et-Garonne' },
+  { code: '48', label: '48 - Lozère' },
+  { code: '49', label: '49 - Maine-et-Loire' },
+  { code: '50', label: '50 - Manche' },
+  { code: '51', label: '51 - Marne' },
+  { code: '52', label: '52 - Haute-Marne' },
+  { code: '53', label: '53 - Mayenne' },
+  { code: '54', label: '54 - Meurthe-et-Moselle' },
+  { code: '55', label: '55 - Meuse' },
+  { code: '56', label: '56 - Morbihan' },
+  { code: '57', label: '57 - Moselle' },
+  { code: '58', label: '58 - Nièvre' },
+  { code: '59', label: '59 - Nord' },
+  { code: '60', label: '60 - Oise' },
+  { code: '61', label: '61 - Orne' },
+  { code: '62', label: '62 - Pas-de-Calais' },
+  { code: '63', label: '63 - Puy-de-Dôme' },
+  { code: '64', label: '64 - Pyrénées-Atlantiques' },
+  { code: '65', label: '65 - Hautes-Pyrénées' },
+  { code: '66', label: '66 - Pyrénées-Orientales' },
+  { code: '67', label: '67 - Bas-Rhin' },
+  { code: '68', label: '68 - Haut-Rhin' },
+  { code: '69', label: '69 - Rhône' },
+  { code: '70', label: '70 - Haute-Saône' },
+  { code: '71', label: '71 - Saône-et-Loire' },
+  { code: '72', label: '72 - Sarthe' },
+  { code: '73', label: '73 - Savoie' },
+  { code: '74', label: '74 - Haute-Savoie' },
+  { code: '75', label: '75 - Paris' },
+  { code: '76', label: '76 - Seine-Maritime' },
+  { code: '77', label: '77 - Seine-et-Marne' },
+  { code: '78', label: '78 - Yvelines' },
+  { code: '79', label: '79 - Deux-Sèvres' },
+  { code: '80', label: '80 - Somme' },
+  { code: '81', label: '81 - Tarn' },
+  { code: '82', label: '82 - Tarn-et-Garonne' },
+  { code: '83', label: '83 - Var' },
+  { code: '84', label: '84 - Vaucluse' },
+  { code: '85', label: '85 - Vendée' },
+  { code: '86', label: '86 - Vienne' },
+  { code: '87', label: '87 - Haute-Vienne' },
+  { code: '88', label: '88 - Vosges' },
+  { code: '89', label: '89 - Yonne' },
+  { code: '90', label: '90 - Territoire de Belfort' },
+  { code: '91', label: '91 - Essonne' },
+  { code: '92', label: '92 - Hauts-de-Seine' },
+  { code: '93', label: '93 - Seine-Saint-Denis' },
+  { code: '94', label: '94 - Val-de-Marne' },
+  { code: '95', label: '95 - Val-d\'Oise' },
+  { code: '971', label: '971 - Guadeloupe' },
+  { code: '972', label: '972 - Martinique' },
+  { code: '973', label: '973 - Guyane' },
+  { code: '974', label: '974 - La Réunion' },
+  { code: '976', label: '976 - Mayotte' }
+]
+
+export default {
+  data () {
+    this.departments = departments
+  }
+}
+</script>

lang/fr-FR.js

@@ -0,0 +1,27 @@
+export default (_context, _locale) => {
+  return ({
+    member_companies: 'Structures adhérentes',
+    map: 'Carte',
+    list: 'Liste',
+    no_result: 'Aucun résultat',
+    click_on_land_to_go_there: 'Cliquez sur une des régions ci-dessous pour centrer la carte sur elle',
+    what: 'Quoi',
+    where: 'Où',
+    please_wait: 'Veuillez patienter',
+    an_error_occured: 'Une erreur s\'est produite',
+    results: 'Résultats',
+    see_more: 'Voir plus',
+    go_to_first_page: 'Se rendre à la première page',
+    go_to_page: 'Se rendre à la page',
+    go_to_last_page: 'Se rendre à la dernière page',
+    go_back: 'Retour',
+    find_us_on: 'Retrouvez-nous sur',
+    descriptive: 'Descriptif',
+    contact: 'Contact',
+    spot_on_from: 'Coup de projecteur du',
+    department: 'Département',
+    distance: 'Distance',
+    federation: 'Fédération',
+    type: 'Type'
+  })
+}

nuxt.config.js

@@ -23,7 +23,7 @@ export default {
 
   // Global CSS: https://go.nuxtjs.dev/config-css
   css: [
-    '~/assets/style/global.scss'
+    // '~/assets/style/global.scss'
   ],
 
   i18n: {

pages/structures_adherentes/index.vue

@@ -1,393 +1,147 @@
+<!-- Search for member structures -->
+
 <template>
-  <LayoutContainer>
-    <!-- All members -->
-    <div
-      class="ot-structures-frame map-view"
-    >
-      <header>
+  <LayoutContainer class="map-view">
+    <!-- Header -->
+    <v-row>
+      <v-col cols="9">
         <h2>{{ $t("member_companies") }}</h2>
+      </v-col>
+      <v-col cols="3">
         <a href="#" class="activate-map-view">{{ $t("map") }}</a>
         <a href="#" class="activate-list-view">{{ $t("list") }}</a>
-      </header>
-
-      <div class="structure-col structure-col-map">
-        <div id="structure-map-wrapper">
-          <div id="structure-map" />
-        </div>
+      </v-col>
+    </v-row>
 
-        <div id="structure-map-bar">
-          <div class="advice">
-            {{ $t("click_on_land_to_go_there") }}
-          </div>
-          <ul id="overseas-provinces-list">
-            <li><nuxt-img src="/images/metropole.png" alt="Metropole" data="{map-fit: '51.03,-5.78;41.2,9.70'}" /></li>
-            <li><nuxt-img src="/images/guadeloupe.png" alt="Guadeloupe" data="{map-fit: '16.62,-62.03;15.74,-60.97'}" /></li>
-            <li><nuxt-img src="/images/martinique.png" alt="Martinique" data="{map-fit: '14.95,-61.43;14.28,-60.60'}" /></li>
-            <li><nuxt-img src="/images/mayotte.png" alt="Mayotte" data="{map-fit: '-12.51,44.86;-13.19,45.45'}" /></li>
-            <li><nuxt-img src="/images/la_reunion.png" alt="La Réunion" data="{map-fit: '-20.65,54.92;-21.65,56.15'}" /></li>
-            <li><nuxt-img src="/images/guyane.png" alt="Guyane" data="{map-fit: '6.24,-54.62;1.87,-50.59'}" /></li>
-          </ul>
-        </div>
-      </div>
+    <v-row>
+      <!-- Map Column (hidden in 'list-view' mode)-->
+      <v-col cols="6">
+        <UiMapFrance />
+      </v-col>
 
-      <div class="structure-col structure-col-results">
-        <div class="structure-search">
+      <!-- Results column -->
+      <v-col cols="6">
+        <!-- Search form -->
+        <v-row class="structure-search">
           <v-form id="structure-search-form" method="get">
-            <div class="structure-search-row">
-              <div class="search-bar-wrapper">
-                <v-text-field
-                  type="text"
-                  class="search-bar"
-                  name="search-query"
-                  :placeholder="$t('what') + ' ?'"
-                >
-                  <button
-                    class="search-bar-btn"
-                    name="submit-search"
-                  >
-                    <i class="fas fa-search" />
-                  </button>
-                </v-text-field>
-              </div>
-              <div class="search-bar-wrapper">
-                <v-text-field
-                  type="text"
-                  name="search-city"
-                  class="search-bar"
-                  :placeholder="$t('what') + ' ?'"
-                  autocomplete="off"
-                >
-                  <button
-                    class="search-bar-btn"
-                    name="search-localize"
-                  >
-                    <i class="fas fa-crosshairs" />
-                  </button>
-                  <div class="city-search-dropdown" style="display: none;">
-                    <div class="city-search-loading">
-                      <nuxt-img
-                        src="EXT:ot_templating/Resources/Public/media/gear.gif"
-                        :alt="$t('please_wait')"
-                      />
-                    </div>
-                    <div class="city-search-no-result">
-                      {{ $t('no_result') }}
-                    </div>
-                    <div class="city-search-results" />
-                  </div>
-                  <input type="hidden" name="lat" value="{ot:request.getArgument(argument: 'lat')}">
-                  <input type="hidden" name="long" value="{ot:request.getArgument(argument: 'long')}">
-                </v-text-field>
-              </div>
-            </div>
-            <div class="structure-search-row filters">
-              <select name="search-practice" disabled>
-                <option value="">
-                  Type
-                </option>
-              </select>
-              <select name="search-province">
-                <option value="">
-                  Département
-                </option>
-                <option value="01">
-                  01 - Ain
-                </option><option value="02">
-                  02 - Aisne
-                </option><option value="03">
-                  03 - Allier
-                </option><option value="04">
-                  04 - Alpes-de-Haute-Provence
-                </option><option value="05">
-                  05 - Hautes-Alpes
-                </option><option value="06">
-                  06 - Alpes-Maritimes
-                </option><option value="07">
-                  07 - Ardèche
-                </option><option value="08">
-                  08 - Ardennes
-                </option><option value="09">
-                  09 - Ariège
-                </option><option value="10">
-                  10 - Aube
-                </option><option value="11">
-                  11 - Aude
-                </option><option value="12">
-                  12 - Aveyron
-                </option><option value="13">
-                  13 - Bouches-du-Rhône
-                </option><option value="14">
-                  14 - Calvados
-                </option><option value="15">
-                  15 - Cantal
-                </option><option value="16">
-                  16 - Charente
-                </option><option value="17">
-                  17 - Charente-Maritime
-                </option><option value="18">
-                  18 - Cher
-                </option><option value="19">
-                  19 - Corrèze
-                </option><option value="2A">
-                  2A - Corse-du-Sud
-                </option><option value="2B">
-                  2B - Haute-Corse
-                </option><option value="21">
-                  21 - Côte-d'Or
-                </option><option value="22">
-                  22 - Côtes-d'Armor
-                </option><option value="23">
-                  23 - Creuse
-                </option><option value="24">
-                  24 - Dordogne
-                </option><option value="25">
-                  25 - Doubs
-                </option><option value="26">
-                  26 - Drôme
-                </option><option value="27">
-                  27 - Eure
-                </option><option value="28">
-                  28 - Eure-et-Loir
-                </option><option value="29">
-                  29 - Finistère
-                </option><option value="2A">
-                  2A - Corse-du-Sud
-                </option><option value="2B">
-                  2B - Haute-Corse
-                </option><option value="30">
-                  30 - Gard
-                </option><option value="31">
-                  31 - Haute-Garonne
-                </option><option value="32">
-                  32 - Gers
-                </option><option value="33">
-                  33 - Gironde
-                </option><option value="34">
-                  34 - Hérault
-                </option><option value="35">
-                  35 - Ille-et-Vilaine
-                </option><option value="36">
-                  36 - Indre
-                </option><option value="37">
-                  37 - Indre-et-Loire
-                </option><option value="38">
-                  38 - Isère
-                </option><option value="39">
-                  39 - Jura
-                </option><option value="40">
-                  40 - Landes
-                </option><option value="41">
-                  41 - Loir-et-Cher
-                </option><option value="42">
-                  42 - Loire
-                </option><option value="43">
-                  43 - Haute-Loire
-                </option><option value="44">
-                  44 - Loire-Atlantique
-                </option><option value="45">
-                  45 - Loiret
-                </option><option value="46">
-                  46 - Lot
-                </option><option value="47">
-                  47 - Lot-et-Garonne
-                </option><option value="48">
-                  48 - Lozère
-                </option><option value="49">
-                  49 - Maine-et-Loire
-                </option><option value="50">
-                  50 - Manche
-                </option><option value="51">
-                  51 - Marne
-                </option><option value="52">
-                  52 - Haute-Marne
-                </option><option value="53">
-                  53 - Mayenne
-                </option><option value="54">
-                  54 - Meurthe-et-Moselle
-                </option><option value="55">
-                  55 - Meuse
-                </option><option value="56">
-                  56 - Morbihan
-                </option><option value="57">
-                  57 - Moselle
-                </option><option value="58">
-                  58 - Nièvre
-                </option><option value="59">
-                  59 - Nord
-                </option><option value="60">
-                  60 - Oise
-                </option><option value="61">
-                  61 - Orne
-                </option><option value="62">
-                  62 - Pas-de-Calais
-                </option><option value="63">
-                  63 - Puy-de-Dôme
-                </option><option value="64">
-                  64 - Pyrénées-Atlantiques
-                </option><option value="65">
-                  65 - Hautes-Pyrénées
-                </option><option value="66">
-                  66 - Pyrénées-Orientales
-                </option><option value="67">
-                  67 - Bas-Rhin
-                </option><option value="68">
-                  68 - Haut-Rhin
-                </option><option value="69">
-                  69 - Rhône
-                </option><option value="70">
-                  70 - Haute-Saône
-                </option><option value="71">
-                  71 - Saône-et-Loire
-                </option><option value="72">
-                  72 - Sarthe
-                </option><option value="73">
-                  73 - Savoie
-                </option><option value="74">
-                  74 - Haute-Savoie
-                </option><option value="75">
-                  75 - Paris
-                </option><option value="76">
-                  76 - Seine-Maritime
-                </option><option value="77">
-                  77 - Seine-et-Marne
-                </option><option value="78">
-                  78 - Yvelines
-                </option><option value="79">
-                  79 - Deux-Sèvres
-                </option><option value="80">
-                  80 - Somme
-                </option><option value="81">
-                  81 - Tarn
-                </option><option value="82">
-                  82 - Tarn-et-Garonne
-                </option><option value="83">
-                  83 - Var
-                </option><option value="84">
-                  84 - Vaucluse
-                </option><option value="85">
-                  85 - Vendée
-                </option><option value="86">
-                  86 - Vienne
-                </option><option value="87">
-                  87 - Haute-Vienne
-                </option><option value="88">
-                  88 - Vosges
-                </option><option value="89">
-                  89 - Yonne
-                </option><option value="90">
-                  90 - Territoire de Belfort
-                </option><option value="91">
-                  91 - Essonne
-                </option><option value="92">
-                  92 - Hauts-de-Seine
-                </option><option value="93">
-                  93 - Seine-Saint-Denis
-                </option><option value="94">
-                  94 - Val-de-Marne
-                </option><option value="95">
-                  95 - Val-d'Oise
-                </option><option value="971">
-                  971 - Guadeloupe
-                </option><option value="972">
-                  972 - Martinique
-                </option><option value="973">
-                  973 - Guyane
-                </option><option value="974">
-                  974 - La Réunion
-                </option><option value="976">
-                  976 - Mayotte
-                </option>
-              </select>
+            <v-row>
+              <v-col cols="6">
+                <UiSearchText />
+              </v-col>
 
-              <select name="search-federation" disabled>
-                <option value="">
-                  Fédération
-                </option>
-                <option value="-1" />
-              </select>
+              <v-col cols="6">
+                <UiSearchAddress />
+              </v-col>
+            </v-row>
 
-              <select name="search-radius">
-                <option value="">
-                  Distance
-                </option>
-                <option value="10">
-                  10km
-                </option>
-                <option value="30">
-                  30km
-                </option>
-                <option value="50">
-                  50km
-                </option>
-                <option value="100">
-                  100km
-                </option>
-                <option value="200">
-                  200km
-                </option>
-              </select>
-            </div>
-            <div class="structure-search-row search-buttons">
-              <button class="reset-search">
-                Réinitialiser
-              </button>
-              <span class="spacer" />
-              <button class="submit-search" name="submit-search">
-                Rechercher
-              </button>
-            </div>
-          </v-form>
-        </div>
+            <v-row class="filters">
+              <v-col cols="3">
+                <v-select
+                  :label="$t('type')"
+                  disabled
+                  solo
+                />
+              </v-col>
+              <v-col cols="3">
+                <UiSelectDepartment />
+              </v-col>
+              <v-col cols="3">
+                <v-select
+                  :label="$t('federation')"
+                  disabled
+                  solo
+                />
+              </v-col>
+              <v-col cols="3">
+                <v-select
+                  :label="$t('distance')"
+                  :items="[
+                    {distance: 10, label: '10km'},
+                    {distance: 30, label: '30km'},
+                    {distance: 100, label: '100km'},
+                    {distance: 200, label: '200km'}
+                  ]"
+                  item-value="distance"
+                  item-text="label"
+                  solo
+                />
+              </v-col>
+            </v-row>
 
-        <div class="structure-results">
-          <span class="please-wait">
-            <nuxt-img
-              src="/images/gear.gif"
-              :alt="$t('please_wait')"
-              style="margin-top:100px; width:70px"
-            />
-          </span>
+            <v-row class="search-buttons">
+              <v-col cols="3">
+                <v-btn class="reset-search">
+                  Réinitialiser
+                </v-btn>
+              </v-col>
+              <v-col cols="6" class="spacer" />
+              <v-col cols="3">
+                <v-btn class="submit-search" name="submit-search">
+                  Rechercher
+                </v-btn>
+              </v-col>
+            </v-row>
+          </v-form>
+        </v-row>
 
-          <span class="no-result" style="display: none">{{ $t("no_result") }}</span>
-          <span class="error-message" style="display: none">{{ $t("an_error_occured") }}</span>
-          <span class="results-count-message" style="display: none">
-            <i class="count" />&nbsp;<i>{{ $t("results") }}</i>
-          </span>
+        <!-- Results -->
+        <v-row>
+          <!--          <span class="no-result" style="display: none">{{ $t("no_result") }}</span>-->
+          <!--          <span class="error-message" style="display: none">{{ $t("an_error_occured") }}</span>-->
+          <!--          <span class="results-count-message" style="display: none">-->
+          <!--            <i class="count" />&nbsp;<i>{{ $t("results") }}</i>-->
+          <!--          </span>-->
 
-          <div class="structures-page">
-            <div class="structure-card-model" data-id="" style="display: none">
-              <div class="structure-poster">
-                <nuxt-img src="images/event-default.jpg" alt="poster" />
-              </div>
+          <v-card
+            v-for="structure in structures"
+            :key="structure.id"
+            elevation="1"
+            outlined
+            min-width="200px"
+            height="400px"
+            style="width: 45%; margin: 12px 2.5%; padding: 14px;"
+          >
+            <v-img
+              :src="structure.logoId ? ('https://api.opentalent.fr/app.php/_internal/secure/files/' + structure.logoId) : '/images/default.jpg'"
+              alt="poster"
+              height="80px"
+              max-width="100%"
+              max-height="100%"
+              :contain="true"
+            />
 
-              <div class="structure-details">
-                <div class="structure-practices">
-                  <span class="structure-practice-model" style="display: none" />
-                </div>
+            <v-card-subtitle class="structure-practices" />
 
-                <div class="structure-name">
-                  <a target="_blank" href="" />
-                </div>
-                <table class="structure-details-table">
-                  <tr class="structure-details-entry structure-address">
-                    <td><i class="fas fa-map-marker-alt" /></td>
-                    <td class="structure-details-address" />
-                  </tr>
-                  <tr class="structure-details-entry structure-federation">
-                    <td><i class="fas fa-project-diagram" /></td>
-                    <td class="structure-details-federation" />
-                  </tr>
-                </table>
-              </div>
+            <v-card-title>
+              <a target="_blank" :href="structure.website">{{ structure.name }}</a>
+            </v-card-title>
 
-              <div class="spacer" />
+            <v-card-text>
+              <v-row>
+                <v-col cols="3">
+                  <i class="fas fa-map-marker-alt" />
+                </v-col>
+                <v-col cols="9">
+                  {{ [structure.streetAddress, structure.postalCode, structure.addressCity].join(" ") }}
+                </v-col>
+              </v-row>
+              <v-row>
+                <v-col cols="3">
+                  <i class="fas fa-project-diagram" />
+                </v-col>
+                <v-col cols="9">
+                  {{ structure.n1Name }}
+                </v-col>
+              </v-row>
+            </v-card-text>
 
-              <a class="btn structure-see" data-organization-id="" href="#">
+            <v-card-actions>
+              <a class="btn structure-see" href="#">
                 <span>{{ $t("see_more") }}</span>
-                <i class="fa fa-caret-right" style="margin-left: 5px;" />
+                <i class="fa fa-caret-right" />
               </a>
-            </div>
-          </div>
+            </v-card-actions>
+          </v-card>
 
           <div class="pagination-bar" style="display:none;">
             <a class="goto-page goto-first-page" data-page="1" href="#" :title="$t('go_to_first_page')">
@@ -406,8 +160,1595 @@
               <i class="fa fa-angle-double-right" />
             </a>
           </div>
-        </div>
-      </div>
-    </div>
+        </v-row>
+      </v-col>
+    </v-row>
   </LayoutContainer>
 </template>
+
+<script>
+
+export default {
+  data () {
+    return {
+      structures: [
+        {
+          id: '5854',
+          name: 'CMF Rhône-Alpes',
+          logoId: '13038',
+          principalType: 'REGIONAL_FEDERATION',
+          website: 'https://fmra.opentalent.fr',
+          latitude: '45.527896881103516',
+          longitude: '5.741861820220947',
+          streetAddress: 'Mairie de la Bridoire 510 route du Lac',
+          postalCode: '73520',
+          addressCity: 'LA BRIDOIRE',
+          country: null,
+          practices: null,
+          n1Id: '12097',
+          n1Name: 'CONFÉDÉRATION MUSICALE DE FRANCE',
+          n2Id: null,
+          n3Id: null,
+          n4Id: null,
+          n5Id: null,
+          parents: '12097'
+        },
+        {
+          id: '2289',
+          name: 'Union des Fédérations Musicales de Haute-Savoie',
+          logoId: '13039',
+          principalType: 'DEPARTEMENTAL_FEDERATION',
+          website: 'https://ufm74.opentalent.fr',
+          latitude: '46.381401062012',
+          longitude: '6.5108823776245',
+          streetAddress: '13 avenue Jules Ferry',
+          postalCode: '74200',
+          addressCity: 'THONON-LES-BAINS',
+          country: null,
+          practices: null,
+          n1Id: '5854',
+          n1Name: 'CMF Rhône-Alpes',
+          n2Id: '12097',
+          n3Id: null,
+          n4Id: null,
+          n5Id: null,
+          parents: '5854,12097'
+        },
+        {
+          id: '1374',
+          name: 'Fédération des Musiques du Faucigny',
+          logoId: '13040',
+          principalType: 'LOCAL_FEDERATION',
+          website: 'https://fmfaucigny.opentalent.fr',
+          latitude: '46.06029510498',
+          longitude: '6.5806193351746',
+          streetAddress: 'MAIRIE DE CLUSES HOTEL DE VILLE',
+          postalCode: '74300',
+          addressCity: 'Cluses',
+          country: null,
+          practices: null,
+          n1Id: '2289',
+          n1Name: 'Union des Fédérations Musicales de Haute-Savoie',
+          n2Id: '5854',
+          n3Id: '12097',
+          n4Id: null,
+          n5Id: null,
+          parents: '2289,5854,12097'
+        },
+        {
+          id: '1893',
+          name: 'Fédération Musicale du Chablais',
+          logoId: '13041',
+          principalType: 'LOCAL_FEDERATION',
+          website: 'https://fmchablais.opentalent.fr',
+          latitude: '46.37556457519531',
+          longitude: '6.527181148529053',
+          streetAddress: 'Batiment Ivomar ZAC du Larry',
+          postalCode: '74200',
+          addressCity: 'MARIN',
+          country: 'France',
+          practices: null,
+          n1Id: '2289',
+          n1Name: 'Union des Fédérations Musicales de Haute-Savoie',
+          n2Id: '5854',
+          n3Id: '12097',
+          n4Id: null,
+          n5Id: null,
+          parents: '2289,5854,12097'
+        },
+        {
+          id: '1849',
+          name: 'Fédération musicale du Genevois',
+          logoId: '13042',
+          principalType: 'LOCAL_FEDERATION',
+          website: 'https://fmgenevois.opentalent.fr',
+          latitude: '45.747020721436',
+          longitude: '6.2935471534729',
+          streetAddress: '8 rue Sainte Catherine',
+          postalCode: '74600',
+          addressCity: 'ANNECY',
+          country: 'France',
+          practices: null,
+          n1Id: '2289',
+          n1Name: 'Union des Fédérations Musicales de Haute-Savoie',
+          n2Id: '5854',
+          n3Id: '12097',
+          n4Id: null,
+          n5Id: null,
+          parents: '2289,5854,12097'
+        },
+        {
+          id: '498',
+          name: "Orchestre d'Harmonie de Cluses",
+          logoId: '13043',
+          principalType: 'ARTISTIC_PRACTICE_ONLY',
+          website: 'https://ohcluses.opentalent.fr',
+          latitude: '46.06039',
+          longitude: '6.580582',
+          streetAddress: '16 B rue du Pré Bénévix Place Claude Anthoine Salle André Favre',
+          postalCode: '74300',
+          addressCity: 'CLUSES',
+          country: 'France',
+          practices: 'HARMONY_ORCHESTRA',
+          n1Id: '1374',
+          n1Name: 'Fédération des Musiques du Faucigny',
+          n2Id: '2289',
+          n3Id: '5854',
+          n4Id: '12097',
+          n5Id: null,
+          parents: '1374,2289,5854,12097'
+        },
+        {
+          id: '541',
+          name: "Musique Municipale de Passy 'Echo de Warens'",
+          logoId: '13044',
+          principalType: 'ARTISTIC_PRACTICE_ONLY',
+          website: 'https://musique-passy.opentalent.fr',
+          latitude: '45.92109680175781',
+          longitude: '6.695181846618652',
+          streetAddress: "14 Chemin de l'île",
+          postalCode: '74190',
+          addressCity: 'PASSY',
+          country: null,
+          practices: 'HARMONY_ORCHESTRA',
+          n1Id: '1374',
+          n1Name: 'Fédération des Musiques du Faucigny',
+          n2Id: '2289',
+          n3Id: '5854',
+          n4Id: '12097',
+          n5Id: null,
+          parents: '1374,2289,5854,12097'
+        },
+        {
+          id: '584',
+          name: "Harmonie d'Evian",
+          logoId: null,
+          principalType: 'ARTISTIC_PRACTICE_ONLY',
+          website: 'https://orchestre-harmonie-evian.opentalent.fr',
+          latitude: '46.39456558227539',
+          longitude: '6.582443714141846',
+          streetAddress: '1 nouvelle route du stade',
+          postalCode: '74500',
+          addressCity: 'EVIAN',
+          country: 'France',
+          practices: 'HARMONY_ORCHESTRA',
+          n1Id: '1893',
+          n1Name: 'Fédération Musicale du Chablais',
+          n2Id: '2289',
+          n3Id: '5854',
+          n4Id: '12097',
+          n5Id: null,
+          parents: '1893,2289,5854,12097'
+        },
+        {
+          id: '885',
+          name: 'Harmonie Municipale de Machilly / Saint-Cergues',
+          logoId: null,
+          principalType: 'ARTISTIC_PRACTICE_ONLY',
+          website: 'https://harmonie-machilly-saint-cergues.opentalent.fr',
+          latitude: '46.25160217285156',
+          longitude: '6.331543922424316',
+          streetAddress: '290 route des Voirons',
+          postalCode: '74140',
+          addressCity: 'MACHILLY',
+          country: 'France',
+          practices: 'HARMONY_ORCHESTRA',
+          n1Id: '1893',
+          n1Name: 'Fédération Musicale du Chablais',
+          n2Id: '2289',
+          n3Id: '5854',
+          n4Id: '12097',
+          n5Id: null,
+          parents: '1893,2289,5854,12097'
+        },
+        {
+          id: '842',
+          name: "Orchestre d'harmonie de La Clusaz",
+          logoId: '13045',
+          principalType: 'ARTISTIC_PRACTICE_ONLY',
+          website: 'https://echo-des-aravis.opentalent.fr',
+          latitude: '45.90581130981445',
+          longitude: '6.421348571777344',
+          streetAddress: 'Espace Musique 41, Salon des Dames',
+          postalCode: '74220',
+          addressCity: 'LA CLUSAZ',
+          country: 'France',
+          practices: 'HARMONY_ORCHESTRA',
+          n1Id: '1849',
+          n1Name: 'Fédération musicale du Genevois',
+          n2Id: '2289',
+          n3Id: '5854',
+          n4Id: '12097',
+          n5Id: null,
+          parents: '1849,2289,5854,12097'
+        },
+        {
+          id: '928',
+          name: "Orchestre d'Harmonie de Sevrier",
+          logoId: '13046',
+          principalType: 'ARTISTIC_PRACTICE_ONLY',
+          website: 'https://ohsevrier.opentalent.fr',
+          latitude: '45.863983154297',
+          longitude: '6.1415858268738',
+          streetAddress: '8 rue Sainte Catherine',
+          postalCode: '74600',
+          addressCity: 'ANNECY',
+          country: 'France',
+          practices: 'HARMONY_ORCHESTRA',
+          n1Id: '1849',
+          n1Name: 'Fédération musicale du Genevois',
+          n2Id: '2289',
+          n3Id: '5854',
+          n4Id: '12097',
+          n5Id: null,
+          parents: '1849,2289,5854,12097'
+        },
+        {
+          id: '977',
+          name: 'Association démonstration avec titre',
+          logoId: '13047',
+          principalType: 'ARTISTIC_PRACTICE_ONLY',
+          website: 'https://demo.opentalent.fr',
+          latitude: '43.05202865600586',
+          longitude: '2.2192111015319824',
+          streetAddress: '17, rue de la Mairie',
+          postalCode: '11300',
+          addressCity: 'LIMOUX',
+          country: null,
+          practices: null,
+          n1Id: '93931',
+          n1Name: 'Opentalent Manager',
+          n2Id: null,
+          n3Id: null,
+          n4Id: null,
+          n5Id: null,
+          parents: '93931'
+        },
+        {
+          id: '1065',
+          name: "Orchestre d'Harmonie Municipal de Marignier",
+          logoId: '13048',
+          principalType: 'ARTISTIC_PRACTICE_ONLY',
+          website: 'https://ohm-marignier.opentalent.fr',
+          latitude: '46.0908203125',
+          longitude: '6.500844955444336',
+          streetAddress: 'SALLE JEAN BALLALOUD 17 RUE DU PATRONAGE',
+          postalCode: '74970',
+          addressCity: 'MARIGNIER',
+          country: 'France',
+          practices: 'HARMONY_ORCHESTRA',
+          n1Id: '1374',
+          n1Name: 'Fédération des Musiques du Faucigny',
+          n2Id: '2289',
+          n3Id: '5854',
+          n4Id: '12097',
+          n5Id: null,
+          parents: '1374,2289,5854,12097'
+        },
+        {
+          id: '1199',
+          name: 'Harmonie Municipale de Samoëns',
+          logoId: '13049',
+          principalType: 'ARTISTIC_PRACTICE_EDUCATION',
+          website: 'https://hm-samoens.opentalent.fr',
+          latitude: '46.084044',
+          longitude: '6.728173',
+          streetAddress: 'C/ Sarah GUILLOT 200 route de Mathonex La Combe',
+          postalCode: '74340',
+          addressCity: 'SAMOENS',
+          country: 'France',
+          practices: 'HARMONY_ORCHESTRA',
+          n1Id: '1374',
+          n1Name: 'Fédération des Musiques du Faucigny',
+          n2Id: '2289',
+          n3Id: '5854',
+          n4Id: '12097',
+          n5Id: null,
+          parents: '1374,2289,5854,12097'
+        },
+        {
+          id: '1462',
+          name: "L'Echo du Lac Bénit",
+          logoId: '151967',
+          principalType: 'ARTISTIC_PRACTICE_EDUCATION',
+          website: 'https://musique-mtsaxonnex.opentalent.fr',
+          latitude: '46.0538444519043',
+          longitude: '6.484353542327881',
+          streetAddress: "Mairie route de l'église",
+          postalCode: '74130',
+          addressCity: 'MONT-SAXONNEX',
+          country: 'France',
+          practices: 'HARMONY_ORCHESTRA',
+          n1Id: '1374',
+          n1Name: 'Fédération des Musiques du Faucigny',
+          n2Id: '2289',
+          n3Id: '5854',
+          n4Id: '12097',
+          n5Id: null,
+          parents: '1374,2289,5854,12097'
+        },
+        {
+          id: '1548',
+          name: "Orchestre d'Harmonie de Chamonix Mont-Blanc",
+          logoId: '13051',
+          principalType: 'ARTISTIC_PRACTICE_ONLY',
+          website: 'https://chamonixmusique.opentalent.fr',
+          latitude: '45.9780387878418',
+          longitude: '6.922300338745117',
+          streetAddress: '242.LE PLAGNOLET',
+          postalCode: '74400',
+          addressCity: 'CHAMONIX MONT-BLANC',
+          country: 'France',
+          practices: 'HARMONY_ORCHESTRA',
+          n1Id: '1374',
+          n1Name: 'Fédération des Musiques du Faucigny',
+          n2Id: '2289',
+          n3Id: '5854',
+          n4Id: '12097',
+          n5Id: null,
+          parents: '1374,2289,5854,12097'
+        },
+        {
+          id: '1505',
+          name: 'Harmonie Municipale de Saint-Jeoire',
+          logoId: '13052',
+          principalType: 'ARTISTIC_PRACTICE_ONLY',
+          website: 'https://harmonie-saint-jeoire.opentalent.fr',
+          latitude: '46.137715',
+          longitude: '6.457955',
+          streetAddress: 'Mairie 156 rue du Fauçigny',
+          postalCode: '74490',
+          addressCity: 'SAINT-JEOIRE EN FAUCIGNY',
+          country: null,
+          practices: 'HARMONY_ORCHESTRA',
+          n1Id: '1374',
+          n1Name: 'Fédération des Musiques du Faucigny',
+          n2Id: '2289',
+          n3Id: '5854',
+          n4Id: '12097',
+          n5Id: null,
+          parents: '1374,2289,5854,12097'
+        },
+        {
+          id: '1591',
+          name: "Harmonie municipale des Houches l' écho des glaciers",
+          logoId: '13053',
+          principalType: 'ARTISTIC_PRACTICE_ONLY',
+          website: 'https://musique-leshouches.opentalent.fr',
+          latitude: '45.89430618286133',
+          longitude: '6.803390026092529',
+          streetAddress: '72 rte de la griaz',
+          postalCode: '74310',
+          addressCity: 'LES HOUCHES',
+          country: null,
+          practices: 'HARMONY_ORCHESTRA',
+          n1Id: '1374',
+          n1Name: 'Fédération des Musiques du Faucigny',
+          n2Id: '2289',
+          n3Id: '5854',
+          n4Id: '12097',
+          n5Id: null,
+          parents: '1374,2289,5854,12097'
+        },
+        {
+          id: '1634',
+          name: 'Harmonie Municipale de Saint Gervais',
+          logoId: null,
+          principalType: 'ARTISTIC_PRACTICE_ONLY',
+          website: 'https://harmonie-stgervais74.opentalent.fr',
+          latitude: '45.89208984375',
+          longitude: '6.711752414703369',
+          streetAddress: "Mairie de Saint Gervais 50 Avenue du Mont d'Arbois",
+          postalCode: '74170',
+          addressCity: 'SAINT GERVAIS',
+          country: null,
+          practices: 'HARMONY_ORCHESTRA',
+          n1Id: '1374',
+          n1Name: 'Fédération des Musiques du Faucigny',
+          n2Id: '2289',
+          n3Id: '5854',
+          n4Id: '12097',
+          n5Id: null,
+          parents: '1374,2289,5854,12097'
+        },
+        {
+          id: '1677',
+          name: "Orchestre d'harmonie   Megève",
+          logoId: '170018',
+          principalType: 'ARTISTIC_PRACTICE_EDUCATION',
+          website: 'https://ohmegeve.opentalent.fr',
+          latitude: '45.856876373291',
+          longitude: '6.6177501678467',
+          streetAddress: 'Maison des frères 23 quai du Glapet',
+          postalCode: '74120',
+          addressCity: 'MEGEVE',
+          country: 'France',
+          practices: 'HARMONY_ORCHESTRA',
+          n1Id: '1374',
+          n1Name: 'Fédération des Musiques du Faucigny',
+          n2Id: '2289',
+          n3Id: '5854',
+          n4Id: '12097',
+          n5Id: null,
+          parents: '1374,2289,5854,12097'
+        },
+        {
+          id: '1720',
+          name: 'Harmonie de Mieussy',
+          logoId: '13054',
+          principalType: 'ARTISTIC_PRACTICE_ONLY',
+          website: 'https://harmoniemieussy.opentalent.fr',
+          latitude: '46.133934020996094',
+          longitude: '6.5243239402771',
+          streetAddress: 'Chef-Lieu Mairie',
+          postalCode: '74440',
+          addressCity: 'MIEUSSY',
+          country: null,
+          practices: 'HARMONY_ORCHESTRA',
+          n1Id: '1374',
+          n1Name: 'Fédération des Musiques du Faucigny',
+          n2Id: '2289',
+          n3Id: '5854',
+          n4Id: '12097',
+          n5Id: null,
+          parents: '1374,2289,5854,12097'
+        },
+        {
+          id: '1763',
+          name: 'Harmonie Municipale Reignier-Esery',
+          logoId: '13055',
+          principalType: 'ARTISTIC_PRACTICE_ONLY',
+          website: 'https://harmonie-reignier.opentalent.fr',
+          latitude: '46.13705062866211',
+          longitude: '6.2681145668029785',
+          streetAddress: '197 Grande Rue Mairie de Reignier',
+          postalCode: '74930',
+          addressCity: 'REIGNIER',
+          country: 'France',
+          practices: 'HARMONY_ORCHESTRA',
+          n1Id: '1374',
+          n1Name: 'Fédération des Musiques du Faucigny',
+          n2Id: '2289',
+          n3Id: '5854',
+          n4Id: '12097',
+          n5Id: null,
+          parents: '1374,2289,5854,12097'
+        },
+        {
+          id: '1806',
+          name: "Estudiantina d'Annecy",
+          logoId: null,
+          principalType: 'ARTISTIC_PRACTICE_ONLY',
+          website: 'https://estudiantina-annecy.opentalent.fr',
+          latitude: '45.89717102050781',
+          longitude: '6.125161170959473',
+          streetAddress: '5, allée du Tertre Chateauvieux',
+          postalCode: '74600',
+          addressCity: 'SEYNOD',
+          country: 'France',
+          practices: 'PLUCKED_ORCHESTRA',
+          n1Id: '1849',
+          n1Name: 'Fédération musicale du Genevois',
+          n2Id: '2289',
+          n3Id: '5854',
+          n4Id: '12097',
+          n5Id: null,
+          parents: '1849,2289,5854,12097'
+        },
+        {
+          id: '1938',
+          name: 'HARMONIE MUNICIPALE DE SALLANCHES',
+          logoId: '13056',
+          principalType: 'ARTISTIC_PRACTICE_ONLY',
+          website: 'https://sallanchesharmonie.opentalent.fr',
+          latitude: '45.93632125854492',
+          longitude: '6.629683494567871',
+          streetAddress: 'quai de l hotel de ville mairie',
+          postalCode: '74700',
+          addressCity: 'SALLANCHES',
+          country: 'France',
+          practices: 'HARMONY_ORCHESTRA',
+          n1Id: '1374',
+          n1Name: 'Fédération des Musiques du Faucigny',
+          n2Id: '2289',
+          n3Id: '5854',
+          n4Id: '12097',
+          n5Id: null,
+          parents: '1374,2289,5854,12097'
+        },
+        {
+          id: '1981',
+          name: 'Ecole de Musique des Aravis',
+          logoId: null,
+          principalType: 'ARTISTIC_PRACTICE_EDUCATION',
+          website: 'https://aravismusique.opentalent.fr',
+          latitude: '45.90442657470703',
+          longitude: '6.42335319519043',
+          streetAddress: '41, Salon des Dames Espace Musique',
+          postalCode: '74220',
+          addressCity: 'LA CLUSAZ',
+          country: 'France',
+          practices: 'ORCHESTRA_CLASS',
+          n1Id: '1849',
+          n1Name: 'Fédération musicale du Genevois',
+          n2Id: '2289',
+          n3Id: '5854',
+          n4Id: '12097',
+          n5Id: null,
+          parents: '1849,2289,5854,12097'
+        },
+        {
+          id: '2024',
+          name: "Harmonie Municipale d'Arâches La Frasse",
+          logoId: '13057',
+          principalType: 'ARTISTIC_PRACTICE_ONLY',
+          website: 'https://harmonie-araches-lafrasse.opentalent.fr',
+          latitude: '46.02651596069336',
+          longitude: '6.636077880859375',
+          streetAddress: '213 route des cyclamens',
+          postalCode: '74300',
+          addressCity: 'Arâches-la-Frasse',
+          country: 'France',
+          practices: 'HARMONY_ORCHESTRA',
+          n1Id: '1374',
+          n1Name: 'Fédération des Musiques du Faucigny',
+          n2Id: '2289',
+          n3Id: '5854',
+          n4Id: '12097',
+          n5Id: null,
+          parents: '1374,2289,5854,12097'
+        },
+        {
+          id: '2072',
+          name: 'Harmonie Municipale de Marnaz',
+          logoId: '13058',
+          principalType: 'ARTISTIC_PRACTICE_EDUCATION',
+          website: 'https://harmoniedemarnaz.opentalent.fr',
+          latitude: '46.060596466064',
+          longitude: '6.5268602371216',
+          streetAddress: '65, rue Antoine de Saint Exupéry',
+          postalCode: '74460',
+          addressCity: 'MARNAZ',
+          country: 'France',
+          practices: 'HARMONY_ORCHESTRA',
+          n1Id: '1374',
+          n1Name: 'Fédération des Musiques du Faucigny',
+          n2Id: '2289',
+          n3Id: '5854',
+          n4Id: '12097',
+          n5Id: null,
+          parents: '1374,2289,5854,12097'
+        },
+        {
+          id: '2160',
+          name: "Harmonie L' Echo des deux Vallées",
+          logoId: '13059',
+          principalType: 'ARTISTIC_PRACTICE_ONLY',
+          website: 'https://musique-chatillon.opentalent.fr',
+          latitude: '46.08719253540039',
+          longitude: '6.583064556121826',
+          streetAddress: '15, place de la mairie',
+          postalCode: '74300',
+          addressCity: 'CHATILLON sur CLUSES',
+          country: 'France',
+          practices: 'HARMONY_ORCHESTRA',
+          n1Id: '1374',
+          n1Name: 'Fédération des Musiques du Faucigny',
+          n2Id: '2289',
+          n3Id: '5854',
+          n4Id: '12097',
+          n5Id: null,
+          parents: '1374,2289,5854,12097'
+        },
+        {
+          id: '2117',
+          name: "Harmonie l'Espérance",
+          logoId: '13060',
+          principalType: 'ARTISTIC_PRACTICE_EDUCATION',
+          website: 'https://esperance-vlg.opentalent.fr',
+          latitude: '46.2016149',
+          longitude: '6.2471439',
+          streetAddress: "1 rue de l'Esperance",
+          postalCode: '74100',
+          addressCity: 'Ville-la-Grand',
+          country: 'France',
+          practices: null,
+          n1Id: '1374',
+          n1Name: 'Fédération des Musiques du Faucigny',
+          n2Id: '2289',
+          n3Id: '5854',
+          n4Id: '12097',
+          n5Id: null,
+          parents: '1374,2289,5854,12097'
+        },
+        {
+          id: '2245',
+          name: "Orchestre d'Harmonie du Grand-Bornand",
+          logoId: '13061',
+          principalType: 'ARTISTIC_PRACTICE_ONLY',
+          website: 'https://grandbo.opentalent.fr',
+          latitude: '45.942027',
+          longitude: '6.426699',
+          streetAddress: 'Chalet Marie Liesse 170 route de la Patinoire',
+          postalCode: '74450',
+          addressCity: 'LE GRAND-BORNAND',
+          country: 'France',
+          practices: 'HARMONY_ORCHESTRA',
+          n1Id: '1849',
+          n1Name: 'Fédération musicale du Genevois',
+          n2Id: '2289',
+          n3Id: '5854',
+          n4Id: '12097',
+          n5Id: null,
+          parents: '1849,2289,5854,12097'
+        },
+        {
+          id: '2338',
+          name: 'Echo de la Tournette',
+          logoId: null,
+          principalType: 'ARTISTIC_PRACTICE_EDUCATION',
+          website: 'https://harmoniedethones.opentalent.fr',
+          latitude: '45.88652038574219',
+          longitude: '6.3144145011901855',
+          streetAddress: '2 ter rue du Fier',
+          postalCode: '74230',
+          addressCity: 'THÔNES',
+          country: 'France',
+          practices: 'HARMONY_ORCHESTRA',
+          n1Id: '1849',
+          n1Name: 'Fédération musicale du Genevois',
+          n2Id: '2289',
+          n3Id: '5854',
+          n4Id: '12097',
+          n5Id: null,
+          parents: '1849,2289,5854,12097'
+        },
+        {
+          id: '2382',
+          name: 'Le Choeur du Brevon',
+          logoId: null,
+          principalType: 'ARTISTIC_PRACTICE_ONLY',
+          website: 'https://choeur-du-brevon.opentalent.fr',
+          latitude: '46.232735',
+          longitude: '6.535429',
+          streetAddress: 'Les Chevriers 1200 rte du Brevon',
+          postalCode: '74470',
+          addressCity: 'LULLIN',
+          country: 'France',
+          practices: 'MIXED_CHORUS',
+          n1Id: '1893',
+          n1Name: 'Fédération Musicale du Chablais',
+          n2Id: '2289',
+          n3Id: '5854',
+          n4Id: '12097',
+          n5Id: null,
+          parents: '1893,2289,5854,12097'
+        },
+        {
+          id: '2541',
+          name: 'Echos du Chéran',
+          logoId: '13062',
+          principalType: 'ARTISTIC_PRACTICE_ONLY',
+          website: 'https://echosducheran.opentalent.fr',
+          latitude: '45.816383361816406',
+          longitude: '6.023940086364746',
+          streetAddress: '34 Chemin des Moulins Maison des Associations',
+          postalCode: '74540',
+          addressCity: 'Alby-sur-Chéran',
+          country: 'France',
+          practices: 'HARMONY_ORCHESTRA',
+          n1Id: '1849',
+          n1Name: 'Fédération musicale du Genevois',
+          n2Id: '2289',
+          n3Id: '5854',
+          n4Id: '12097',
+          n5Id: null,
+          parents: '1849,2289,5854,12097'
+        },
+        {
+          id: '2587',
+          name: "Orchestre d'Harmonie Municipal de Fillinges",
+          logoId: '13063',
+          principalType: 'ARTISTIC_PRACTICE_ONLY',
+          website: 'https://ohfillinges.opentalent.fr',
+          latitude: '46.15928268432617',
+          longitude: '6.3435163497924805',
+          streetAddress: '857 route du chef-lieu',
+          postalCode: '74250',
+          addressCity: 'FILLINGES',
+          country: null,
+          practices: 'HARMONY_ORCHESTRA',
+          n1Id: '1893',
+          n1Name: 'Fédération Musicale du Chablais',
+          n2Id: '2289',
+          n3Id: '5854',
+          n4Id: '12097',
+          n5Id: null,
+          parents: '1893,2289,5854,12097'
+        },
+        {
+          id: '2632',
+          name: 'Musique Echo de Gavot',
+          logoId: null,
+          principalType: 'ARTISTIC_PRACTICE_EDUCATION',
+          website: 'https://echodegavot.opentalent.fr',
+          latitude: '46.37945556640625',
+          longitude: '6.630401134490967',
+          streetAddress: 'Bâtiment Communal Chef Lieu',
+          postalCode: '74500',
+          addressCity: 'SAINT PAUL EN CHABLAIS',
+          country: 'France',
+          practices: 'HARMONY_ORCHESTRA',
+          n1Id: '1893',
+          n1Name: 'Fédération Musicale du Chablais',
+          n2Id: '2289',
+          n3Id: '5854',
+          n4Id: '12097',
+          n5Id: null,
+          parents: '1893,2289,5854,12097'
+        },
+        {
+          id: '2678',
+          name: 'ÉCOLE DES ARTS VIVANTS DE FAVERGES-SEYTHENEX',
+          logoId: '339356',
+          principalType: 'ARTISTIC_PRACTICE_EDUCATION',
+          website: 'https://musique-faverges.opentalent.fr',
+          latitude: '48.670036315918',
+          longitude: '8.2316989898682',
+          streetAddress: 'Place Bühlertal Centre musical Robert Stäubli',
+          postalCode: '74210',
+          addressCity: 'FAVERGES-SEYTHENEX',
+          country: 'France',
+          practices: 'EDUCATION',
+          n1Id: '1849',
+          n1Name: 'Fédération musicale du Genevois',
+          n2Id: '2289',
+          n3Id: '5854',
+          n4Id: '12097',
+          n5Id: null,
+          parents: '1849,2289,5854,12097'
+        },
+        {
+          id: '2762',
+          name: "Orchestre d'Harmonie Cruseilles-Le Châble",
+          logoId: '13065',
+          principalType: 'ARTISTIC_PRACTICE_ONLY',
+          website: 'https://ohcc.opentalent.fr',
+          latitude: '46.03376007080078',
+          longitude: '6.106630802154541',
+          streetAddress: "Centre de Secours 141 route d'Annecy",
+          postalCode: '74350',
+          addressCity: 'CRUSEILLES',
+          country: 'France',
+          practices: 'HARMONY_ORCHESTRA',
+          n1Id: '1374',
+          n1Name: 'Fédération des Musiques du Faucigny',
+          n2Id: '2289',
+          n3Id: '5854',
+          n4Id: '12097',
+          n5Id: null,
+          parents: '1374,2289,5854,12097'
+        },
+        {
+          id: '2808',
+          name: 'Harmonie Intercommunale de Bonneville - Ayze - Vougy',
+          logoId: '159185',
+          principalType: 'ARTISTIC_PRACTICE_EDUCATION',
+          website: 'https://harmonie-bonneville.opentalent.fr',
+          latitude: '0',
+          longitude: '0',
+          streetAddress: null,
+          postalCode: '74130',
+          addressCity: 'Bonneville',
+          country: null,
+          practices: 'EDUCATION,HARMONY_ORCHESTRA,ORCHESTRA_CLASS',
+          n1Id: '1374',
+          n1Name: 'Fédération des Musiques du Faucigny',
+          n2Id: '2289',
+          n3Id: '5854',
+          n4Id: '12097',
+          n5Id: null,
+          parents: '1374,2289,5854,12097'
+        },
+        {
+          id: '2854',
+          name: 'Harmonie municipale du fer à cheval',
+          logoId: null,
+          principalType: 'ARTISTIC_PRACTICE_EDUCATION',
+          website: 'https://fanfareduferacheval.opentalent.fr',
+          latitude: '46.070793151855',
+          longitude: '6.8110952377319',
+          streetAddress: '104 Route de Nambride',
+          postalCode: '74740',
+          addressCity: 'SIXT-FER-A-CHEVAL',
+          country: 'France',
+          practices: 'HARMONY_ORCHESTRA',
+          n1Id: '1374',
+          n1Name: 'Fédération des Musiques du Faucigny',
+          n2Id: '2289',
+          n3Id: '5854',
+          n4Id: '12097',
+          n5Id: null,
+          parents: '1374,2289,5854,12097'
+        },
+        {
+          id: '2992',
+          name: 'Esperance Douvainoise',
+          logoId: '48398',
+          principalType: 'ARTISTIC_PRACTICE_EDUCATION',
+          website: 'https://esperance-douvainoise.opentalent.fr',
+          latitude: '46.303418874294',
+          longitude: '6.3039148207627',
+          streetAddress: 'Avenue du Stade Espace Associatif et Culturel',
+          postalCode: '74140',
+          addressCity: 'Douvaine',
+          country: 'France',
+          practices: 'EDUCATION,HARMONY_ORCHESTRA,ORCHESTRA_CLASS',
+          n1Id: '1893',
+          n1Name: 'Fédération Musicale du Chablais',
+          n2Id: '2289',
+          n3Id: '5854',
+          n4Id: '12097',
+          n5Id: null,
+          parents: '1893,2289,5854,12097'
+        },
+        {
+          id: '3038',
+          name: "Orchestre d'Harmonie de Rumilly",
+          logoId: '13068',
+          principalType: 'ARTISTIC_PRACTICE_ONLY',
+          website: 'https://harmonierumilly74.opentalent.fr',
+          latitude: '45.86713790893555',
+          longitude: '5.942357063293457',
+          streetAddress: "rue de l'annexion Maison des Associations",
+          postalCode: '74150',
+          addressCity: 'RUMILLY',
+          country: null,
+          practices: 'HARMONY_ORCHESTRA',
+          n1Id: '1849',
+          n1Name: 'Fédération musicale du Genevois',
+          n2Id: '2289',
+          n3Id: '5854',
+          n4Id: '12097',
+          n5Id: null,
+          parents: '1849,2289,5854,12097'
+        },
+        {
+          id: '3084',
+          name: 'Ecole de Musique du Pays de Cruseilles',
+          logoId: '13069',
+          principalType: 'ARTISTIC_EDUCATION_ONLY',
+          website: 'https://ecole-musique-cruseilles.opentalent.fr',
+          latitude: '46.03089904785156',
+          longitude: '6.105513572692871',
+          streetAddress: "141 route d'Annecy",
+          postalCode: '74350',
+          addressCity: 'CRUSEILLES',
+          country: null,
+          practices: 'EDUCATION',
+          n1Id: '1849',
+          n1Name: 'Fédération musicale du Genevois',
+          n2Id: '2289',
+          n3Id: '5854',
+          n4Id: '12097',
+          n5Id: null,
+          parents: '1849,2289,5854,12097'
+        },
+        {
+          id: '3138',
+          name: 'Association musicale de Vétraz-Monthoux VETRAZ MUSIQUE',
+          logoId: null,
+          principalType: 'ARTISTIC_PRACTICE_EDUCATION',
+          website: 'https://vetrazmusique.opentalent.fr',
+          latitude: '46.186485290527344',
+          longitude: '6.270125389099121',
+          streetAddress: '7, Chemin des Clus',
+          postalCode: '74100',
+          addressCity: 'Vétraz-Monthoux',
+          country: 'France',
+          practices: 'EDUCATION,HARMONY_ORCHESTRA',
+          n1Id: '1374',
+          n1Name: 'Fédération des Musiques du Faucigny',
+          n2Id: '2289',
+          n3Id: '5854',
+          n4Id: '12097',
+          n5Id: null,
+          parents: '1374,2289,5854,12097'
+        },
+        {
+          id: '3186',
+          name: "L'écho du Semnoz",
+          logoId: null,
+          principalType: 'ARTISTIC_PRACTICE_ONLY',
+          website: 'https://harmoniedegruffy.opentalent.fr',
+          latitude: '45.78824234008789',
+          longitude: '6.054960250854492',
+          streetAddress: 'ENTREVES',
+          postalCode: '73340',
+          addressCity: 'BELLECOMBE-EN-BAUGES',
+          country: 'France',
+          practices: 'HARMONY_ORCHESTRA',
+          n1Id: '1849',
+          n1Name: 'Fédération musicale du Genevois',
+          n2Id: '2289',
+          n3Id: '5854',
+          n4Id: '12097',
+          n5Id: null,
+          parents: '1849,2289,5854,12097'
+        },
+        {
+          id: '3232',
+          name: 'Centre de Pratique Musicale du Lac',
+          logoId: '13070',
+          principalType: 'ARTISTIC_PRACTICE_EDUCATION',
+          website: 'https://cpml.opentalent.fr',
+          latitude: '45.83303451538086',
+          longitude: '6.165421962738037',
+          streetAddress: '72, Route de Tavan',
+          postalCode: '74410',
+          addressCity: 'SAINT-JORIOZ',
+          country: 'France',
+          practices: 'EDUCATION',
+          n1Id: '1849',
+          n1Name: 'Fédération musicale du Genevois',
+          n2Id: '2289',
+          n3Id: '5854',
+          n4Id: '12097',
+          n5Id: null,
+          parents: '1849,2289,5854,12097'
+        },
+        {
+          id: '3278',
+          name: 'Harmonie de Saint-Sigismond',
+          logoId: null,
+          principalType: 'ARTISTIC_PRACTICE_ONLY',
+          website: 'https://musique-saintsigismond.opentalent.fr',
+          latitude: '46.07004928588867',
+          longitude: '6.620676040649414',
+          streetAddress: '685 les alluaz',
+          postalCode: '74300',
+          addressCity: 'SAINT-SIGISMOND',
+          country: 'France',
+          practices: 'HARMONY_ORCHESTRA',
+          n1Id: '1374',
+          n1Name: 'Fédération des Musiques du Faucigny',
+          n2Id: '2289',
+          n3Id: '5854',
+          n4Id: '12097',
+          n5Id: null,
+          parents: '1374,2289,5854,12097'
+        },
+        {
+          id: '3324',
+          name: 'La Voix du Léman',
+          logoId: '39926',
+          principalType: 'ARTISTIC_PRACTICE_ONLY',
+          website: 'https://ohlavoixduleman.opentalent.fr',
+          latitude: '46.3897089',
+          longitude: '6.5359195999999',
+          streetAddress: 'Place du 8 mai 1945',
+          postalCode: '74500',
+          addressCity: 'PUBLIER',
+          country: 'France',
+          practices: 'HARMONY_ORCHESTRA',
+          n1Id: '1893',
+          n1Name: 'Fédération Musicale du Chablais',
+          n2Id: '2289',
+          n3Id: '5854',
+          n4Id: '12097',
+          n5Id: null,
+          parents: '1893,2289,5854,12097'
+        },
+        {
+          id: '3370',
+          name: 'Ecole de musique ABC',
+          logoId: null,
+          principalType: 'ARTISTIC_PRACTICE_EDUCATION',
+          website: 'https://ecoledemusiqueabc.opentalent.fr',
+          latitude: '46.13518142700195',
+          longitude: '6.132789611816406',
+          streetAddress: "34 place de l'église",
+          postalCode: '74160',
+          addressCity: 'ARCHAMPS',
+          country: 'France',
+          practices: 'EDUCATION,ORCHESTRA_CLASS',
+          n1Id: '1849',
+          n1Name: 'Fédération musicale du Genevois',
+          n2Id: '2289',
+          n3Id: '5854',
+          n4Id: '12097',
+          n5Id: null,
+          parents: '1849,2289,5854,12097'
+        },
+        {
+          id: '3416',
+          name: 'ASSOCIATION MUSICALE DE SAINT APOLLINAIRE',
+          logoId: '13072',
+          principalType: 'ARTISTIC_PRACTICE_EDUCATION',
+          website: 'https://amsa.opentalent.fr',
+          latitude: '47.33273390238',
+          longitude: '5.082311455542',
+          streetAddress: '129 RUE SAINT JEAN MAISON DES ASSOCIATIONS',
+          postalCode: '21850',
+          addressCity: 'SAINT-APOLLINAIRE',
+          country: 'France',
+          practices: 'EDUCATION',
+          n1Id: '8522',
+          n1Name: "CMF Côte d'Or",
+          n2Id: '8565',
+          n3Id: '12097',
+          n4Id: null,
+          n5Id: null,
+          parents: '8522,8565,12097'
+        },
+        {
+          id: '3506',
+          name: "Orchestre d'Harmonie Municipale de SCIONZIER (OHMS)",
+          logoId: '307099',
+          principalType: 'ARTISTIC_PRACTICE_ONLY',
+          website: 'https://harmonie-scionzier.opentalent.fr',
+          latitude: '46.0593998',
+          longitude: '6.5524099',
+          streetAddress: null,
+          postalCode: '74950',
+          addressCity: 'SCIONZIER',
+          country: 'France',
+          practices: 'HARMONY_ORCHESTRA',
+          n1Id: '1374',
+          n1Name: 'Fédération des Musiques du Faucigny',
+          n2Id: '2289',
+          n3Id: '5854',
+          n4Id: '12097',
+          n5Id: null,
+          parents: '1374,2289,5854,12097'
+        },
+        {
+          id: '10733',
+          name: "Fédération des sociétés de musique d'Alsace",
+          logoId: '13074',
+          principalType: 'REGIONAL_FEDERATION',
+          website: 'https://fsma.opentalent.fr',
+          latitude: '48.5789133',
+          longitude: '7.7540132',
+          streetAddress: 'Maison des associations 1a Place des Orphelins',
+          postalCode: '67000',
+          addressCity: 'STRASBOURG',
+          country: null,
+          practices: null,
+          n1Id: '12097',
+          n1Name: 'CONFÉDÉRATION MUSICALE DE FRANCE',
+          n2Id: null,
+          n3Id: null,
+          n4Id: null,
+          n5Id: null,
+          parents: '12097'
+        },
+        {
+          id: '37321',
+          name: "Association des Sociétés Chorales d'Alsace",
+          logoId: null,
+          principalType: 'DEPARTEMENTAL_FEDERATION',
+          website: 'https://asca.opentalent.fr',
+          latitude: '47.74827575683594',
+          longitude: '7.346599578857422',
+          streetAddress: 'c/o Sylvie Maurice 14 rue de Chalampé',
+          postalCode: '68100',
+          addressCity: 'Mulhouse',
+          country: null,
+          practices: null,
+          n1Id: '12097',
+          n1Name: 'CONFÉDÉRATION MUSICALE DE FRANCE',
+          n2Id: null,
+          n3Id: null,
+          n4Id: null,
+          n5Id: null,
+          parents: '12097'
+        },
+        {
+          id: '37386',
+          name: 'Union Départementale des Musiques du Bas Rhin',
+          logoId: null,
+          principalType: 'DEPARTEMENTAL_FEDERATION',
+          website: 'https://udmbr.opentalent.fr',
+          latitude: '48.8292077',
+          longitude: '7.6580206',
+          streetAddress: '6 rue des Roses',
+          postalCode: '67350',
+          addressCity: 'DAUENDORF',
+          country: null,
+          practices: null,
+          n1Id: '10733',
+          n1Name: "Fédération des sociétés de musique d'Alsace",
+          n2Id: '12097',
+          n3Id: null,
+          n4Id: null,
+          n5Id: null,
+          parents: '10733,12097'
+        },
+        {
+          id: '37418',
+          name: 'CMF  HAUTE-ALSACE',
+          logoId: '359019',
+          principalType: 'DEPARTEMENTAL_FEDERATION',
+          website: 'https://udsmhr.opentalent.fr',
+          latitude: '47.776653289795',
+          longitude: '7.3691039085388',
+          streetAddress: '9 rue de Saint-Louis',
+          postalCode: '68390',
+          addressCity: 'SAUSHEIM',
+          country: 'France',
+          practices: null,
+          n1Id: '10733',
+          n1Name: "Fédération des sociétés de musique d'Alsace",
+          n2Id: '12097',
+          n3Id: null,
+          n4Id: null,
+          n5Id: null,
+          parents: '10733,12097'
+        },
+        {
+          id: '11815',
+          name: "CMF-Aquitaine Fédération Musicale d'Aquitaine",
+          logoId: null,
+          principalType: 'REGIONAL_FEDERATION',
+          website: 'https://fmaquitaine.opentalent.fr',
+          latitude: '44.9259247',
+          longitude: '-0.49066590000007',
+          streetAddress: '18 Place de la Victoire Hotel de ville',
+          postalCode: '33440',
+          addressCity: 'Ambarès-et-Lagrave',
+          country: null,
+          practices: null,
+          n1Id: '12097',
+          n1Name: 'CONFÉDÉRATION MUSICALE DE FRANCE',
+          n2Id: null,
+          n3Id: null,
+          n4Id: null,
+          n5Id: null,
+          parents: '12097'
+        },
+        {
+          id: '37450',
+          name: 'Union des Sociétés Musicales de la Dordogne',
+          logoId: null,
+          principalType: 'DEPARTEMENTAL_FEDERATION',
+          website: 'https://udmd.opentalent.fr',
+          latitude: '45.41175842285156',
+          longitude: '0.9117730259895325',
+          streetAddress: '15 rue Albert Bonneau',
+          postalCode: '24800',
+          addressCity: 'THIVIERS',
+          country: 'France',
+          practices: null,
+          n1Id: '11815',
+          n1Name: "CMF-Aquitaine Fédération Musicale d'Aquitaine",
+          n2Id: '12097',
+          n3Id: null,
+          n4Id: null,
+          n5Id: null,
+          parents: '11815,12097'
+        },
+        {
+          id: '23917',
+          name: 'CMF GIRONDE',
+          logoId: '39568',
+          principalType: 'DEPARTEMENTAL_FEDERATION',
+          website: 'https://udam33.opentalent.fr',
+          latitude: '44.9269344',
+          longitude: '-0.4900999',
+          streetAddress: 'CMF GIRONDE Hôtel de Ville 18, place de la Victoire',
+          postalCode: '33440',
+          addressCity: 'AMBARES et LAGRAVE',
+          country: null,
+          practices: null,
+          n1Id: '11815',
+          n1Name: "CMF-Aquitaine Fédération Musicale d'Aquitaine",
+          n2Id: '12097',
+          n3Id: null,
+          n4Id: null,
+          n5Id: null,
+          parents: '11815,12097'
+        },
+        {
+          id: '37482',
+          name: 'Union des Sociétés Musicales de Lot et Garonne',
+          logoId: null,
+          principalType: 'DEPARTEMENTAL_FEDERATION',
+          website: 'https://usmlg.opentalent.fr',
+          latitude: '44.197147369384766',
+          longitude: '0.6396999955177307',
+          streetAddress: '1944 Route de Pécau',
+          postalCode: '47240',
+          addressCity: 'BON-ENCONTRE',
+          country: null,
+          practices: null,
+          n1Id: '11815',
+          n1Name: "CMF-Aquitaine Fédération Musicale d'Aquitaine",
+          n2Id: '12097',
+          n3Id: null,
+          n4Id: null,
+          n5Id: null,
+          parents: '11815,12097'
+        },
+        {
+          id: '37498',
+          name: 'Confédération musicale de France en Pyrénées Atlantiques',
+          logoId: '13078',
+          principalType: 'DEPARTEMENTAL_FEDERATION',
+          website: 'https://udmpa.opentalent.fr',
+          latitude: '43.48881912231445',
+          longitude: '-0.7686976790428162',
+          streetAddress: '',
+          postalCode: '',
+          addressCity: '',
+          country: 'France',
+          practices: null,
+          n1Id: '11815',
+          n1Name: "CMF-Aquitaine Fédération Musicale d'Aquitaine",
+          n2Id: '12097',
+          n3Id: null,
+          n4Id: null,
+          n5Id: null,
+          parents: '11815,12097'
+        },
+        {
+          id: '37514',
+          name: "Fédération Musicale d'Auvergne",
+          logoId: '13079',
+          principalType: 'REGIONAL_FEDERATION',
+          website: 'https://fma.opentalent.fr',
+          latitude: '45.28485107421875',
+          longitude: '3.3902878761291504',
+          streetAddress: 'BP 114',
+          postalCode: '43103',
+          addressCity: 'BRIOUDE cedex 03',
+          country: 'France',
+          practices: null,
+          n1Id: '12097',
+          n1Name: 'CONFÉDÉRATION MUSICALE DE FRANCE',
+          n2Id: null,
+          n3Id: null,
+          n4Id: null,
+          n5Id: null,
+          parents: '12097'
+        },
+        {
+          id: '37530',
+          name: "Union Départementale des Sociétés Musicales de l'Allier",
+          logoId: '13080',
+          principalType: 'DEPARTEMENTAL_FEDERATION',
+          website: 'https://udsma.opentalent.fr',
+          latitude: '46.102451324463',
+          longitude: '3.1950829029083',
+          streetAddress: '18, rue Croix des Rameaux',
+          postalCode: '03800',
+          addressCity: 'Gannat',
+          country: null,
+          practices: null,
+          n1Id: '37514',
+          n1Name: "Fédération Musicale d'Auvergne",
+          n2Id: '12097',
+          n3Id: null,
+          n4Id: null,
+          n5Id: null,
+          parents: '37514,12097'
+        },
+        {
+          id: '37546',
+          name: 'Union Départementale des Sociétés Musicales du Cantal',
+          logoId: null,
+          principalType: 'DEPARTEMENTAL_FEDERATION',
+          website: 'https://udsm.opentalent.fr',
+          latitude: '44.925296783447266',
+          longitude: '2.4423909187316895',
+          streetAddress: 'Centre Pierre Mendès France 37 rue des Carmes',
+          postalCode: '15000',
+          addressCity: 'Aurillac',
+          country: null,
+          practices: null,
+          n1Id: '37514',
+          n1Name: "Fédération Musicale d'Auvergne",
+          n2Id: '12097',
+          n3Id: null,
+          n4Id: null,
+          n5Id: null,
+          parents: '37514,12097'
+        },
+        {
+          id: '37578',
+          name: 'Union Départementale des Sociétés Musicales du Puy de Dôme',
+          logoId: null,
+          principalType: 'DEPARTEMENTAL_FEDERATION',
+          website: 'https://udsm63.opentalent.fr',
+          latitude: '45.796936035156',
+          longitude: '3.2485909461975',
+          streetAddress: 'BP69 7 av Roger Prat',
+          postalCode: '63430',
+          addressCity: 'Pont du Chateau',
+          country: null,
+          practices: null,
+          n1Id: '37514',
+          n1Name: "Fédération Musicale d'Auvergne",
+          n2Id: '12097',
+          n3Id: null,
+          n4Id: null,
+          n5Id: null,
+          parents: '37514,12097'
+        },
+        {
+          id: '10776',
+          name: 'Fédération Musicale de Basse-Normandie',
+          logoId: null,
+          principalType: 'REGIONAL_FEDERATION',
+          website: 'https://fmbn.opentalent.fr',
+          latitude: '49.193336486816',
+          longitude: '-0.40285688638687',
+          streetAddress: "Michel Morin 8 rue d'auvergne",
+          postalCode: '14000',
+          addressCity: 'CAEN',
+          country: null,
+          practices: null,
+          n1Id: '12097',
+          n1Name: 'CONFÉDÉRATION MUSICALE DE FRANCE',
+          n2Id: null,
+          n3Id: null,
+          n4Id: null,
+          n5Id: null,
+          parents: '12097'
+        },
+        {
+          id: '8565',
+          name: 'CMF Bourgogne',
+          logoId: '13082',
+          principalType: 'REGIONAL_FEDERATION',
+          website: 'https://frsmb.opentalent.fr',
+          latitude: '47.32759475708008',
+          longitude: '4.82658052444458',
+          streetAddress: '1 RUE DE LA PETITE FIN',
+          postalCode: '21410',
+          addressCity: 'Ancey',
+          country: 'France',
+          practices: null,
+          n1Id: '12097',
+          n1Name: 'CONFÉDÉRATION MUSICALE DE FRANCE',
+          n2Id: null,
+          n3Id: null,
+          n4Id: null,
+          n5Id: null,
+          parents: '12097'
+        },
+        {
+          id: '8522',
+          name: "CMF Côte d'Or",
+          logoId: '13083',
+          principalType: 'DEPARTEMENTAL_FEDERATION',
+          website: 'https://cmf21.opentalent.fr',
+          latitude: '47.289310455322',
+          longitude: '5.0091304779053',
+          streetAddress: "L'entrepôt, boite J4/16 40 rue de Longvic",
+          postalCode: '21300',
+          addressCity: 'Chenôve',
+          country: 'France',
+          practices: null,
+          n1Id: '8565',
+          n1Name: 'CMF Bourgogne',
+          n2Id: '12097',
+          n3Id: null,
+          n4Id: null,
+          n5Id: null,
+          parents: '8565,12097'
+        },
+        {
+          id: '19449',
+          name: 'CONFEDERATION MUSICALE DE LA NIEVRE CMF Nièvre',
+          logoId: '13084',
+          principalType: 'DEPARTEMENTAL_FEDERATION',
+          website: 'https://udsmn.opentalent.fr',
+          latitude: '47.06442642211914',
+          longitude: '3.2113540172576904',
+          streetAddress: '435 Rue des Ouches',
+          postalCode: '58130',
+          addressCity: 'Urzy',
+          country: null,
+          practices: null,
+          n1Id: '8565',
+          n1Name: 'CMF Bourgogne',
+          n2Id: '12097',
+          n3Id: null,
+          n4Id: null,
+          n5Id: null,
+          parents: '8565,12097'
+        },
+        {
+          id: '19433',
+          name: 'FMSL - CMF Saône et Loire',
+          logoId: '13085',
+          principalType: 'DEPARTEMENTAL_FEDERATION',
+          website: 'https://fmsl.opentalent.fr',
+          latitude: '46.78220748901367',
+          longitude: '4.855426788330078',
+          streetAddress: '30 rue Saint Georges',
+          postalCode: '71100',
+          addressCity: 'CHALON-SUR-SAÔNE',
+          country: null,
+          practices: null,
+          n1Id: '8565',
+          n1Name: 'CMF Bourgogne',
+          n2Id: '12097',
+          n3Id: null,
+          n4Id: null,
+          n5Id: null,
+          parents: '8565,12097'
+        },
+        {
+          id: '19211',
+          name: "Fédération Musicale de l'Yonne",
+          logoId: '13086',
+          principalType: 'DEPARTEMENTAL_FEDERATION',
+          website: 'https://fmy.opentalent.fr',
+          latitude: '47.73518371582',
+          longitude: '3.2917716503143',
+          streetAddress: '11 ue de la taille  les Breandes',
+          postalCode: '89000',
+          addressCity: 'PERRIGNY',
+          country: null,
+          practices: null,
+          n1Id: '8565',
+          n1Name: 'CMF Bourgogne',
+          n2Id: '12097',
+          n3Id: null,
+          n4Id: null,
+          n5Id: null,
+          parents: '8565,12097'
+        },
+        {
+          id: '10819',
+          name: 'CMF Bretagne',
+          logoId: null,
+          principalType: 'REGIONAL_FEDERATION',
+          website: 'https://federationmusicalebretagne.opentalent.fr',
+          latitude: '48.03236389160156',
+          longitude: '-3.4900450706481934',
+          streetAddress: 'Pont Tanguy Domaine de la Flûte Enchantée',
+          postalCode: '56320',
+          addressCity: 'Le Faouët',
+          country: null,
+          practices: null,
+          n1Id: '12097',
+          n1Name: 'CONFÉDÉRATION MUSICALE DE FRANCE',
+          n2Id: null,
+          n3Id: null,
+          n4Id: null,
+          n5Id: null,
+          parents: '12097'
+        },
+        {
+          id: '37594',
+          name: "Fédération musicale de Côtes d'Armor",
+          logoId: null,
+          principalType: 'DEPARTEMENTAL_FEDERATION',
+          website: 'https://fepem.opentalent.fr',
+          latitude: '48.51417922973633',
+          longitude: '-2.7658350467681885',
+          streetAddress: 'Pont Tanguy Domaine de la Flûte Enchantée',
+          postalCode: '56320',
+          addressCity: 'LE FAOUËT',
+          country: 'France',
+          practices: null,
+          n1Id: '10819',
+          n1Name: 'CMF Bretagne',
+          n2Id: '12097',
+          n3Id: null,
+          n4Id: null,
+          n5Id: null,
+          parents: '10819,12097'
+        },
+        {
+          id: '37610',
+          name: 'Fédération Musicale de Finistère',
+          logoId: null,
+          principalType: 'DEPARTEMENTAL_FEDERATION',
+          website: 'https://fmf.opentalent.fr',
+          latitude: '48.428123474121094',
+          longitude: '-4.503469944000244',
+          streetAddress: 'Pont Tanguy Domaine de la Flûte Enchantée',
+          postalCode: '56320',
+          addressCity: 'LE FAOUËT',
+          country: null,
+          practices: null,
+          n1Id: '10819',
+          n1Name: 'CMF Bretagne',
+          n2Id: '12097',
+          n3Id: null,
+          n4Id: null,
+          n5Id: null,
+          parents: '10819,12097'
+        },
+        {
+          id: '37626',
+          name: 'Fédération des structures musicales en Ille et Vilaine',
+          logoId: '13087',
+          principalType: 'DEPARTEMENTAL_FEDERATION',
+          website: 'https://fsm35.opentalent.fr',
+          latitude: '47.96603775024414',
+          longitude: '-1.7967469692230225',
+          streetAddress: 'Pont Tanguy',
+          postalCode: '56320',
+          addressCity: 'LE FAOUËT',
+          country: null,
+          practices: null,
+          n1Id: '10819',
+          n1Name: 'CMF Bretagne',
+          n2Id: '12097',
+          n3Id: null,
+          n4Id: null,
+          n5Id: null,
+          parents: '10819,12097'
+        },
+        {
+          id: '37642',
+          name: 'Fédération musicale du Morbihan',
+          logoId: null,
+          principalType: 'DEPARTEMENTAL_FEDERATION',
+          website: 'https://fepem56.opentalent.fr',
+          latitude: '47.66520309448242',
+          longitude: '-2.7524585723876953',
+          streetAddress: 'Pont Tanguy',
+          postalCode: '56320',
+          addressCity: 'LE FAOUËT',
+          country: 'France',
+          practices: null,
+          n1Id: '10819',
+          n1Name: 'CMF Bretagne',
+          n2Id: '12097',
+          n3Id: null,
+          n4Id: null,
+          n5Id: null,
+          parents: '10819,12097'
+        },
+        {
+          id: '37353',
+          name: 'CMF Centre Val de Loire',
+          logoId: '36480',
+          principalType: 'REGIONAL_FEDERATION',
+          website: 'https://cmfcentrevaldeloire.opentalent.fr',
+          latitude: '47.7174905',
+          longitude: '1.9435408',
+          streetAddress: '9 Rue Aristide Briand',
+          postalCode: '45240',
+          addressCity: 'LA FERTE ST AUBIN',
+          country: 'France',
+          practices: null,
+          n1Id: '12097',
+          n1Name: 'CONFÉDÉRATION MUSICALE DE FRANCE',
+          n2Id: null,
+          n3Id: null,
+          n4Id: null,
+          n5Id: null,
+          parents: '12097'
+        }]
+    }
+  }
+}
+
+</script>