From e6ffe9feb2edccfc94da88b307e18df09932dada Mon Sep 17 00:00:00 2001 From: "Nicholas H." Date: Tue, 10 Dec 2024 20:17:03 -0500 Subject: [PATCH] misc fixes and improvements (#31) * change cursor to pointer when hovering over destinations, change destination delete icon to a brighter red on hover, don't allow the destination component to be draggable when it's expanded, don't allow manually adding a destination with the same name as an existing destination, fix some styling * make sure lat/lng are numbers, make lat/lng editable, add new modal to allow user to give a Google Maps url to try to parse out lng/lat from * cleanup some things --- src/components/Destination.vue | 82 +++++++++++++++++---------- src/components/DestinationList.vue | 11 +++- src/components/OptionsModal.vue | 4 +- src/main.ts | 28 ++++----- src/utils/modal.ts | 91 ++++++++++++++++++++++++++++-- src/variables.css | 1 + tsconfig.json | 3 +- 7 files changed, 163 insertions(+), 57 deletions(-) diff --git a/src/components/Destination.vue b/src/components/Destination.vue index 3e8dd2c..c1ca733 100644 --- a/src/components/Destination.vue +++ b/src/components/Destination.vue @@ -2,8 +2,6 @@
  • @@ -104,7 +102,19 @@
    -

    lat: {{destination.latitude}}, long: {{destination.longitude}}

    +

    lat: {{destination.latitude}}, long: {{destination.longitude}}

    + +
    + + + +
    @@ -140,7 +150,7 @@ export default defineComponent({ expanded: false, isEditing: false, editSnapshot: {}, - currDestTitle: "" + currDestTitle: "", } }, components: { @@ -150,31 +160,25 @@ export default defineComponent({ destination: {required: true, type: Object} }, methods: { - highlightBorder: function(): void { - const name = this.destination.name; - const dest = document.getElementById(name + '_dest'); - if(dest !== null){ - dest.style.border = '2px solid #fff'; - } - }, - - dehighlightBorder: function(): void { - const name = this.destination.name; - const dest = document.getElementById(name + '_dest'); - if(dest !== null){ - dest.style.border = '2px solid #000'; - } - }, - toggleVisibility: function(): void { const name = this.destination.name; + const parent = document.getElementById(name + '_dest'); const content = document.getElementById(name + '_content'); if(content !== null){ if(this.expanded && !this.isEditing){ content.style.display = "none"; + + if(parent){ + parent.setAttribute('draggable', true); + } }else{ content.style.display = "block"; + + if(parent){ + // don't allow component to be draggable if open/expanded + parent.setAttribute('draggable', false); + } } } @@ -210,7 +214,7 @@ export default defineComponent({ // calls a method of the Vue root instance const modal = new Modal(); const remove = await modal.createQuestionModal("Are you sure you want to remove this destination?"); - if (remove) { + if(remove){ const name = (evt.target as HTMLElement).id.split("_")[0]; // i.e. name_dest, and we want name this.$root.removeDestination(name); } @@ -221,14 +225,13 @@ export default defineComponent({ // to update state, the destination name, if edited, will be // checked to make sure its new desired name is not already taken // by another destination - const name = this.destination.name; const destTitle = document.getElementById(name); const newName = destTitle?.textContent?.trim(); // if new name is valid (i.e. not an empty string), the change will happen // if it doesn't happen, we'll at least have restored the dest title to its original - if (destTitle) { + if(destTitle){ destTitle.textContent = this.currDestTitle; destTitle.setAttribute('contenteditable', "false"); } @@ -241,11 +244,17 @@ export default defineComponent({ data.newName = newName; // get from and to dates - const fromDate = this.$refs[name + "_fromDate"].getDateInfo(); - const toDate = this.$refs[name + "_toDate"].getDateInfo(); + const fromDate = this.$refs[`${name}_fromDate`].getDateInfo(); + const toDate = this.$refs[`${name}_toDate`].getDateInfo(); data.fromDate = `${fromDate.month}-${fromDate.day}-${fromDate.year}`; data.toDate = `${toDate.month}-${toDate.day}-${toDate.year}`; + + // get lng and lat + const latInput = document.getElementById('latInput'); + const lngInput = document.getElementById('lngInput'); + if(latInput) data.latitude = parseFloat(latInput.value); + if(lngInput) data.longitude = parseFloat(lngInput.value); // get route color and remove color wheel const routeColorInput = document.getElementById(this.destination.name + "_routeColorPicker") as HTMLInputElement; @@ -329,7 +338,7 @@ export default defineComponent({ enlargedImage.style.marginTop = "1%"; if(document.body.clientHeight < enlargedImage.height || - document.body.clientWidth < enlargedImage.width) { + document.body.clientWidth < enlargedImage.width){ // reduce size of enlarged image if larger than the page // or rescale using a canvas? } @@ -424,9 +433,13 @@ export default defineComponent({ .dest { padding: 3px; border: 2px solid var(--black); - /*border-radius: 15px;*/ text-align: center; } + + .dest:hover { + border: 2px solid var(--white); + cursor: pointer; + } .content { display: none; @@ -450,9 +463,10 @@ export default defineComponent({ display: inline; font-size: 2em; } - + .delete:hover { cursor: pointer; + color: var(--bright-red); } .inputFile { @@ -469,19 +483,25 @@ export default defineComponent({ text-align: center; margin-top: 0; } - + .editRouteColor { display: flex; align-items: center; } - + .editRouteColor input { background-color: transparent; border: none; } - + .editRouteColor input[type=color]:hover { cursor: pointer; } + + #latInputLabel, #lngInputLabel { + display: block; + padding: 0; + margin-bottom: 8px; + } \ No newline at end of file diff --git a/src/components/DestinationList.vue b/src/components/DestinationList.vue index 6ec519a..9e519cb 100644 --- a/src/components/DestinationList.vue +++ b/src/components/DestinationList.vue @@ -68,8 +68,15 @@ export default defineComponent({ }; const modal = new Modal(); - const destinationData: Partial = await modal.addNewDestinationModal(); + const destinationData: Partial | null = await modal.addNewDestinationModal(); + if(destinationData && destinationData.name && destinationData.latitude && destinationData.longitude){ + // make sure a destination with the same name cannot be added + if(Array.from(this.listOfDest).some(x => x.name === destinationData.name)){ + await modal.createMessageModal("A destination with the same name already exists. Please choose another name."); + return; + } + data.name = destinationData.name; data.latitude = destinationData.latitude; data.longitude = destinationData.longitude; @@ -82,6 +89,8 @@ export default defineComponent({ // update data source with new info this.$root.addNewDestination(data); } + }else if (destinationData){ + await modal.createMessageModal("Please provide a name, latitude and longitude."); } } } diff --git a/src/components/OptionsModal.vue b/src/components/OptionsModal.vue index 97960aa..22f0722 100644 --- a/src/components/OptionsModal.vue +++ b/src/components/OptionsModal.vue @@ -2,8 +2,6 @@

    options

    -

    * = experimental feature. please don't expect too much :)

    -

    location lookup*

    @@ -97,6 +95,8 @@
    +

    * = experimental feature. please don't expect too much :)

    +
    diff --git a/src/main.ts b/src/main.ts index 3811d20..60f2287 100644 --- a/src/main.ts +++ b/src/main.ts @@ -26,7 +26,7 @@ createApp({ return h(App, { 'listOfDest': this.tripData[this.currTripIndex].listOfDest, 'tripName': this.tripData[this.currTripIndex].tripName, - 'listOfTripNames': this.tripData.map(trip => trip.tripName), + 'listOfTripNames': this.tripData.map((trip: Trip) => trip.tripName), 'suggestedNextDests': this.suggestedNextDests, // should be based on last destination in listOfDest 'appearanceOptions': this.appearanceOptions, }); @@ -174,7 +174,7 @@ createApp({ removeDestination: function(destName: string): void { const currDests = this.tripData[this.currTripIndex].listOfDest; - this.tripData[this.currTripIndex].listOfDest = currDests.filter(dest => dest.name !== destName); + this.tripData[this.currTripIndex].listOfDest = currDests.filter((dest: Destination) => dest.name !== destName); // TODO: check to see if the last destination of the list was removed and if there is a new last destination. // if so, take the current last dest and show next hop suggestions for that dest (if show next hops option selected) @@ -209,20 +209,14 @@ createApp({ for(let i = 0; i < listOfDest.length; i++){ const dest = listOfDest[i]; if(dest.name === currName){ - // TODO: just do for prop in dest, reassign? - // so we don't have to manually update this each time there's a new prop - dest.notes = data.notes; - dest.fromDate = data.fromDate; - dest.toDate = data.toDate; - dest.images = data.images; - dest.routeColor = data.routeColor; - - if(changeName){ - dest.name = newName; - }else{ - dest.name = currName; + let prop: keyof Destination; + for(prop in data){ + if(prop === "name" && changeName){ + dest.name = newName; + }else{ + dest[prop] = data[prop]; + } } - break; } } @@ -490,7 +484,7 @@ createApp({ this.overpassApiEntityToFind = entity; this.overpassApiKeyToFind = overpassApiEntityKeyMap[entity]; - this.getSuggestionsFromOverpass(this.overpassApiKeyToFind, this.overpassApiEntityToFind).then((data) => { + this.getSuggestionsFromOverpass(this.overpassApiKeyToFind, this.overpassApiEntityToFind).then((data: Array) => { this.suggestedNextDests = data; }); } @@ -514,7 +508,7 @@ createApp({ getNextDestSuggestions: function(): void { if(this.useOverpassAPI){ - this.getSuggestionsFromOverpass(this.overpassApiKeyToFind, this.overpassApiEntityToFind).then((data) => { + this.getSuggestionsFromOverpass(this.overpassApiKeyToFind, this.overpassApiEntityToFind).then((data: Array) => { this.suggestedNextDests = data; }); }else{ diff --git a/src/utils/modal.ts b/src/utils/modal.ts index 6360a06..1d24702 100644 --- a/src/utils/modal.ts +++ b/src/utils/modal.ts @@ -224,7 +224,7 @@ export class Modal { } // modal for adding a new destination manually - addNewDestinationModal(): Promise> { + addNewDestinationModal(): Promise | null> { const modal = document.createElement('div'); modal.id = "modal"; Object.assign(modal.style, this.modalStyle); @@ -255,7 +255,7 @@ export class Modal { // latitude const destinationLat = document.createElement('input'); - destinationLat.type = "text"; + destinationLat.type = "number"; destinationLat.name = "destinationLat"; destinationLat.value = ""; destinationLat.id = "destinationLat"; @@ -270,7 +270,7 @@ export class Modal { // longitude const destinationLong = document.createElement('input'); - destinationLong.type = "text"; + destinationLong.type = "number"; destinationLong.name = "longitude: "; destinationLong.value = ""; destinationLong.id = "destinationLong"; @@ -325,13 +325,25 @@ export class Modal { const okBtn = document.createElement('button'); okBtn.innerText = "ok"; + // button to allow user to try extracting lat/lng via Google Maps url instead + const googleMapsExtractLatLngBtn = document.createElement('button'); + googleMapsExtractLatLngBtn.textContent = 'try extracting lat/lng from url'; + googleMapsExtractLatLngBtn.addEventListener('click', async () => { + const res = await this.showLatLngExtractModal(); + if(res){ + destinationLat.value = `${res.latitude}`; + destinationLong.value = `${res.longitude}`; + } + }); + modal.appendChild(googleMapsExtractLatLngBtn); + const cancelBtn = document.createElement('button'); cancelBtn.innerText = "cancel"; modal.appendChild(okBtn); modal.appendChild(cancelBtn); - return new Promise>((resolve) => { + return new Promise | null>((resolve) => { okBtn.onclick = (): void => { // TODO: come up with a better, not-so-hacky solution for getting the dates if set @@ -369,7 +381,7 @@ export class Modal { } }; cancelBtn.onclick = (): void => { - resolve({}); + resolve(null); }; }).finally(() => { // make sure to close modal @@ -378,4 +390,73 @@ export class Modal { }); } + // modal for trying to extract latitude and longitude from a Google Maps url + // regex: (-?[0-9]{1,2}.[0-9]+),(-?[0-9]{1,3}.[0-9]+) + showLatLngExtractModal(): Promise | null> { + const modal = document.createElement('div'); + modal.id = "modal"; + Object.assign(modal.style, this.modalStyle); + + const displayText = document.createElement('p'); + displayText.textContent = "Enter a Google Maps url and we'll try to extract the latitude and longitude so you don't have to manually type it in! :) "; + modal.appendChild(displayText); + + // latitude + const googleMapsUrlInput = document.createElement('input'); + googleMapsUrlInput.type = "text"; + googleMapsUrlInput.name = "googleMapsUrlInput"; + googleMapsUrlInput.value = ""; + googleMapsUrlInput.id = "googleMapsUrlInput"; + + const googleMapsUrlInputLabel = document.createElement('label'); + googleMapsUrlInputLabel.textContent = "url: "; + googleMapsUrlInputLabel.htmlFor = "googleMapsUrlInput"; + googleMapsUrlInputLabel.style.fontSize = "18px"; + + modal.appendChild(googleMapsUrlInputLabel); + modal.appendChild(googleMapsUrlInput); + + const modalOverlay = document.createElement('div'); + modalOverlay.id = "modal-overlay"; + Object.assign(modalOverlay.style, this.modalOverlayStyle); + + document.body.appendChild(modal); + document.body.appendChild(modalOverlay); + + const extractBtn = document.createElement('button'); + extractBtn.innerText = "extract"; + + const cancelBtn = document.createElement('button'); + cancelBtn.innerText = "cancel"; + + modal.appendChild(extractBtn); + modal.appendChild(cancelBtn); + + return new Promise | null>((resolve) => { + extractBtn.onclick = (): void => { + const url = googleMapsUrlInput.value; + const res = url.match(/-?([0-9]{1,2}.[0-9]+),(-?[0-9]{1,3}.[0-9]+)/g); + if(res){ + const loc = res[0].split(','); + if(loc.length == 2){ + resolve({ + latitude: parseFloat(loc[0]), + longitude: parseFloat(loc[1]), + }); + }else{ + resolve(null); + } + }else{ + resolve(null); + } + }; + cancelBtn.onclick = (): void => { + resolve(null); + }; + }).finally(() => { + // make sure to close modal + document.body.removeChild(modal); + document.body.removeChild(modalOverlay); + }); + } } diff --git a/src/variables.css b/src/variables.css index 14e4650..1e417c7 100644 --- a/src/variables.css +++ b/src/variables.css @@ -18,6 +18,7 @@ --dark-blue: #2c3e50; --dark-slate-blue: #483d8b; --dark-red: #8b0000; + --bright-red: #ff0808; --purple: #6a5acd; --dark-purple: #5541cc; --soft-blue: #9ac5f4; diff --git a/tsconfig.json b/tsconfig.json index b30e49c..424a33d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -12,7 +12,8 @@ "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, - "sourceMap": true, + "sourceMap": false, + "noEmit": true, "baseUrl": ".", "types": [ "jest",