From fef92c392ded43c83bee283f025caa728975fa45 Mon Sep 17 00:00:00 2001 From: frankporras Date: Thu, 12 Sep 2024 16:31:24 +0200 Subject: [PATCH] - Minimap code commented - Code cleaning --- src/app.ts | 56 +-- src/components/minimap/Minimap.ts | 57 ++- src/constants.ts | 6 - src/search_page.html | 698 ------------------------------ 4 files changed, 54 insertions(+), 763 deletions(-) delete mode 100644 src/search_page.html diff --git a/src/app.ts b/src/app.ts index bdcca89..5afe4a2 100644 --- a/src/app.ts +++ b/src/app.ts @@ -1,5 +1,4 @@ import { Component, Vue, Watch } from "vue-facing-decorator"; -// import { RouteLocation } from "vue-router"; import HomeViewComponent from "./views/home-view/home-view-component.vue"; import HelpViewComponent from "./views/help-view/help-view-component.vue"; import MapViewComponent from "./views/map-view/map-view.component.vue"; @@ -11,27 +10,10 @@ import ContactViewComponent from "./views/contact-view/contact-view-component.vu import SitelinkViewComponent from "./views/sitelink-view/sitelink-view-component.vue"; import ImprintViewComponent from "./views/imprint-view/imprint-view-component.vue"; import TermsViewComponent from "./views/terms-view/terms-view-component"; -// import { VUE_API } from "./constants"; -// import VsInput from "./components/vs-input/vs-input.vue"; -// import VsResult from "./components/vs-result/vs-result.vue"; -// import FacetCategory from "./components/face-category/facet-category.vue"; -// import ActiveFacetCategory from "./components/active-facet-category/active-facet-category.vue"; -// import { SolrSettings } from "@/models/solr"; -// import { DatasetService } from "./services/dataset.service"; -// import { Suggestion } from "./models/dataset"; -// import { SolrResponse, FacetFields, FacetItem, FacetResults, FacetInstance } from "./models/headers"; -// import { ActiveFilterCategories } from "@/models/solr"; - -// https://devsoniq.com/how-to-toggle-bulma-css-navbar-in-your-vue-js-project/ @Component({ components: { - // HelloWorld, HomeViewComponent, - // VsInput, - // VsResult, - // FacetCategory, - // ActiveFacetCategory, HelpViewComponent, MapViewComponent, SearchViewComponent, @@ -48,38 +30,40 @@ export default class App extends Vue { public active = false; public portal = "https://data.tethys.at/login"; // VUE_API + "/login"; + /** + * Computed property that returns the current year. + * @returns {number} The current year as a number. + */ get currentYear() { return new Date().getFullYear(); } + /** + * Lifecycle hook called when the component is mounted. + * Currently empty, but can be used to add setup logic when the component is mounted. + */ mounted(): void { - // const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll(".navbar-burger"), 0); - // // Check if there are any navbar burgers - // if ($navbarBurgers.length > 0) { - // // Add a click event on each of them - // $navbarBurgers.forEach((elNavBurger) => { - // elNavBurger.addEventListener("click", () => { - // // Get the target from the "data-target" attribute - // const targetNavbar = elNavBurger.dataset.target; - // const $target = document.getElementById(targetNavbar); - // // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu" - // elNavBurger.classList.toggle("is-active"); - // $target?.classList.toggle("is-active"); - // }); - // }); - // } + } + /** + * Toggles the visibility of the mobile menu. + * @param {MouseEvent} event - The mouse event triggered by the user's interaction. + */ public showMobilemenu(event: MouseEvent): void { - // Don't follow the link + // Prevent the default behavior of the event (e.g., following a link) event.preventDefault(); + // Toggle the active state of the mobile menu this.active = !this.active; } + /** + * Watcher that triggers when the route changes. + * It deactivates the mobile menu by setting `active` to false. + */ @Watch("$route") protected oRouteChangedChanged(): void { - //(to: RouteLocation, from: RouteLocation): void { - // console.log("setting " + from.path + " to " + to.path); + // Close the mobile menu when the route changes this.active = false; } } diff --git a/src/components/minimap/Minimap.ts b/src/components/minimap/Minimap.ts index 35092db..5ec7c65 100644 --- a/src/components/minimap/Minimap.ts +++ b/src/components/minimap/Minimap.ts @@ -11,36 +11,46 @@ export default class Minimap extends Vue { // private originalCenter: L.LatLngExpression = [47.71, 13.55]; // Original center // private originalZoom: number = 6; // Original zoom level + /** + * Lifecycle hook called when the component is mounted. + * Initializes the Leaflet map, sets up base layers, and adds either a circle or rectangle + * based on the `bounds` prop passed to the component. + */ mounted() { + // Initialize the map with specific center and zoom const map = L.map('map', { - center: [47.71, 13.55], - zoomControl: true, - zoom: 6, - minZoom: 5, + center: [47.71, 13.55], // Initial center coordinates + zoomControl: true, // Enable zoom controls + zoom: 6, // Initial zoom level + minZoom: 5, // Minimum zoom level allowed maxBounds: [ - [44.0, 9.0], // Southwest corner of the bounds - [51.0, 18.0] // Northeast corner of the bounds + [44.0, 9.0], // Southwest corner of the bounding box + [51.0, 18.0] // Northeast corner of the bounding box ], - maxBoundsViscosity: 1.0 // Ensure the map cannot be dragged outside the bounds + maxBoundsViscosity: 1.0 // Prevent map from being dragged outside the defined bounds }); // Remove Leaflet logo and text map.attributionControl.setPrefix(false); + // Add basemap.at tile layer to the map const basemapAtLayer = L.tileLayer('https://maps{s}.wien.gv.at/basemap/geolandbasemap/normal/google3857/{z}/{y}/{x}.png', { attribution: 'basemap.at', noWrap: true, subdomains: ['', '1', '2', '3', '4'] }).addTo(map); + // Add Esri imagery tile layer const esriImageryLayer = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { attribution: 'Tiles © Esri' }); + // Add Esri topo map tile layer const esriTopoLayer = L.tileLayer('https://server.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', { attribution: 'Tiles © Esri' }); + // Define available base maps for the user to toggle between const baseMaps = { // "OpenStreetMap": openStreetMapLayer, "basemap.at": basemapAtLayer, @@ -48,6 +58,7 @@ export default class Minimap extends Vue { "ESRI Topo": esriTopoLayer }; + // Define available base maps for the user to toggle between L.control.layers(baseMaps).addTo(map); const [southWest, northEast] = this.bounds; @@ -55,45 +66,45 @@ export default class Minimap extends Vue { if (southWest[0] === northEast[0] || southWest[1] === northEast[1]) { // If y_min and y_max (and x_min and x_max) are equal, generate a circle const center = [southWest[0], southWest[1]] as [number, number]; - // Using CircleMarker to maintain constant size regardless of zoom level + // Add a CircleMarker to the map at the center of the bounds. This kind of marker is used to maintain constant size regardless of zoom level const circleMarker = L.circleMarker(center, { color: '#30D5C8', // Outline color fillColor: '#336699', // Fill color fillOpacity: 1, // Opacity of the fill opacity: 0.5, // Outline opacity - weight: 10, // Outline weight + weight: 10, // Outline weight (thickness) radius: 10 // Radius in pixels }).addTo(map); // Manually create a small bounding box around the marker's center to fit bounds - const buffer = 0.01; // Adjust this value to control the area around the marker + const buffer = 0.01; // Buffer size around the marker. Adjust this value to control the area around the marker const markerBounds = L.latLngBounds( - [center[0] - buffer, center[1] - buffer], // Southwest corner - [center[0] + buffer, center[1] + buffer] // Northeast corner + [center[0] - buffer, center[1] - buffer], // Southwest corner of the bounding box + [center[0] + buffer, center[1] + buffer] // Northeast corner of the bounding box ); - - // Add a click event to the CircleMarker + // Add a click event handler to the CircleMarker circleMarker.on('click', () => { - map.fitBounds(markerBounds, { padding: [10, 10] }); + map.fitBounds(markerBounds, { padding: [10, 10] }); // Adjust map to fit within marker bounds }); + // Automatically adjust the map's view to fit the marker's bounds map.fitBounds(markerBounds, { padding: [10, 10] }); } else { - // Otherwise, generate a rectangle + // If bounds are not equal, draw a rectangle const rectangle = L.rectangle(this.bounds, { - color: '#30D5C8', - weight: 2, - opacity: 1 - }).addTo(map); //336699 + color: '#30D5C8', // Rectangle outline color //Alternative color: 336699 + weight: 2, // Outline thickness + opacity: 1 // Opacity of the rectangle outline + }).addTo(map); - // Add a click event to the Rectangle + // Add a click event handler to the Rectangle rectangle.on('click', () => { - map.fitBounds(this.bounds, { padding: [18, 18] }); + map.fitBounds(this.bounds, { padding: [18, 18] }); // Adjust map to fit within rectangle bounds }); - // Fit the map's view to the rectangle's bounds with padding + // Automatically adjust the map's view to fit the rectangle's bounds with padding map.fitBounds(this.bounds, { padding: [18, 18] }); } } diff --git a/src/constants.ts b/src/constants.ts index acd7381..f689273 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -1,19 +1,13 @@ -// declare const POINT_URL: string; -// declare const EDGE_URL: string; declare const APP_URL: string; declare const VUE_API: string; declare const SOLR_HOST: string; declare const SOLR_CORE: string; -// const _EDGE_URL = EDGE_URL; -// const _POINT_URL = POINT_URL; const _APP_URL = APP_URL; const _VUE_API = VUE_API; const _SOLR_HOST = SOLR_HOST; const _SOLR_CORE = SOLR_CORE; -// export { _EDGE_URL as EDGE_URL }; -// export { _POINT_URL as POINT_URL }; export { _APP_URL as APP_URL }; export { _VUE_API as VUE_API }; export { _SOLR_HOST as SOLR_HOST }; diff --git a/src/search_page.html b/src/search_page.html deleted file mode 100644 index 0941616..0000000 --- a/src/search_page.html +++ /dev/null @@ -1,698 +0,0 @@ -
- -
- -
-
-
-
-
- It looks like you're not logged in right now. you will need to - login to Pro or become a - Coil Member - to access the results. -
-
-
- Login -
-
- Learn more about - Infinity Pro -
-
- Learn more about - Coil -
-
-
-
-
-
-
- -
- - - - - - -
\ No newline at end of file