Skip to content

Commit

Permalink
misc fixes and improvements (#31)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@syncopika
syncopika authored Dec 11, 2024
1 parent 79d3fa8 commit e6ffe9f
Show file tree
Hide file tree
Showing 7 changed files with 163 additions and 57 deletions.
82 changes: 51 additions & 31 deletions src/components/Destination.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@
<!-- one li is one destination -->
<li :id="destination.name + '_dest'"
class="dest"
@mouseover="highlightBorder"
@mouseleave="dehighlightBorder"
draggable="true"
@dragstart="onDragStart"
>
Expand Down Expand Up @@ -104,7 +102,19 @@

<hr />

<p class='latlng'> lat: {{destination.latitude}}, long: {{destination.longitude}} </p>
<p v-if="!isEditing" class="latlng"> lat: {{destination.latitude}}, long: {{destination.longitude}} </p>

<div v-if="isEditing">
<label id="latInputLabel" for="latInput">
lat:
<input id="latInput" type="number" :value="destination.latitude" />
</label>

<label id="lngInputLabel" for="lngInput">
long:
<input id="lngInput" type="number" :value="destination.longitude" />
</label>
</div>

<button @click="toggleEdit" v-if="!isEditing"> edit </button>

Expand Down Expand Up @@ -140,7 +150,7 @@ export default defineComponent({
expanded: false,
isEditing: false,
editSnapshot: {},
currDestTitle: ""
currDestTitle: "",
}
},
components: {
Expand All @@ -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);
}
}
}
Expand Down Expand Up @@ -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);
}
Expand All @@ -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");
}
Expand All @@ -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;
Expand Down Expand Up @@ -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?
}
Expand Down Expand Up @@ -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;
Expand All @@ -450,9 +463,10 @@ export default defineComponent({
display: inline;
font-size: 2em;
}
.delete:hover {
cursor: pointer;
color: var(--bright-red);
}
.inputFile {
Expand All @@ -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;
}
</style>
11 changes: 10 additions & 1 deletion src/components/DestinationList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,15 @@ export default defineComponent({
};
const modal = new Modal();
const destinationData: Partial<DestinationInterface> = await modal.addNewDestinationModal();
const destinationData: Partial<DestinationInterface> | 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;
Expand All @@ -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.");
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions src/components/OptionsModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@
<div>
<div class="modal">
<h1> options </h1>
<p class="experimentalNote"> * = experimental feature. please don't expect too much :) </p>

<hr />
<p id="locationLookup"> location lookup* </p>
<div class="section">
Expand Down Expand Up @@ -97,6 +95,8 @@

<hr />

<p class="experimentalNote"> * = experimental feature. please don't expect too much :) </p>

<div id="buttons">
<button @click="updateOptions"> ok </button>
<button @click="$emit('close')"> cancel </button>
Expand Down
28 changes: 11 additions & 17 deletions src/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
});
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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;
}
}
Expand Down Expand Up @@ -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<OverpassAPIDestinationSuggestion>) => {
this.suggestedNextDests = data;
});
}
Expand All @@ -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<OverpassAPIDestinationSuggestion>) => {
this.suggestedNextDests = data;
});
}else{
Expand Down
Loading

0 comments on commit e6ffe9f

Please sign in to comment.