tammy/meili

Travel planning app, to travel with friends without the headache of planning with them.

Meili

Travel planning app, to travel with friends without the headache of planning with them.

Dependencies

1. Install npm and nodemon globally on your machine.
2. Install cockroachdb from here on your machine.
3. To run tests install bats and jq.

Setup

1. In the home directory, run npm run setup.
2. Run npm run start to start the frontend and backend servers concurrently.
3. Once you see that two servers are running (there might be a compile time lag for the frontend), connect to localhost:1024 (the port is set to 80) on your browser to see the application running.

Footnotes

Current code based off of tutorial found here.

meili's Issues

Collaboration: wrong trip data displays when switching trips

When multiple users are editing the same trip and one or more of those users switches to a different trip, this can cause issues where the trip model switches to the wrong trip for one or more of those users. More investigation is required to reproduce but it's likely that some real time trip model data is not updating properly.

Consider Adding Tests

Lint errors fail build

Currently, the linter fails the build if anything is caught. This slows down development when we just want to paste in code and try it out. Ideally the linter should output the error but not fail the build.

Drag and drop for first card is broken

The D&D handle for the first card in a list is not usable. Also, during the drag operation, the timeline appearance glitches and shows a dotted line above the first element.

Drag and drop is broken

D&D appears to work while dragging, but does not move the element after mouse release.

Adding collaborators doesn't work

Adding a collaborator removes all other collaborators from trip. The expected behaviour is that it adds this collaborator to the trip.

New threads/messages need an author field

Specifically, right now I have the frontend working with:

{
  // some data here
  authorName: string,
  authorPicture: string,
}

but it's not being saved to the DB right now.

No date/time format for frontend

We need a date and time picker of some sort for the datetime field, because right now it's just code-ish gibberish. We can use this:
https://github.com/Haixing-Hu/vue-datetime-picker

Error and success alerts

We currently do not have any alerts that say whether an action was a "Success" or an "Error" so the user can only see whether something is created or not to see the result of their action.

Example: When creating a trip, you see that a trip is created thus you assume it was a success. However if there was an error, you don't know if the app is slow to respond or if you did something wrong.

Something like this would be ideal: https://vuejs-pt.github.io/vue-alert/example/dist/

Polish threads

• Add thread and comment author
• Polish UI for thread
• Polish UI for messages
• Fix bugs with the inputs
• Optional: Resolve threads

Investigate saving and loading

Please find out if all components of the trip persist properly

• Adding/removing/updating a card
• Reordering cards
• Renaming the trip
• Threads: adding

Read only users can still create events

As a read only user I should not be able to make events.

Users are not created upon login

When a user logs in, they should have a user object created for them so they can be added as collaborators.

Timeline doesn't update when changing the datetime

The time shown on the timeline does not update when modifying the datetime. Only changes to other parts of the card will trigger an update.

Can't render global CSS

I can't for the life of me figure out how to make only one CSS file and use that one globally along with the local scoped CSS. If there is a global one then it would make styling a lot easier since we reuse a lot of components.

It'd be even nicer if we can have SASS working.

Functions can't access file-global consts

Currently the app does not render on my machine for the following reason. In utils/auth.js, the getIdToken function cannot access the ID_TOKEN_KEY variable:

const ID_TOKEN_KEY = 'id_token';

export function getIdToken() {
  return localStorage.getItem(ID_TOKEN_KEY);
}

Specifically the issue is:

[Vue warn]: Error in render: "ReferenceError: Can't find variable: ID_TOKEN_KEY"

found in

---> <PublicBattles> at src/components/publicBattles.vue
       <App> at src/App.vue

One workaround is to define all the constants in the functions that use them... but I feel like there's something else going on that I'm missing...

404 Page on the frontend

Read-only collaborators

• Add collaborators as read-only
• Have a readonly view of the trip

Facebook logout doesn't work

sdk.js:57 FB.logout() called without an access token.

Responsive Design

Would be nice to fix up the responsive design of the site.

Things that I've noticed when width gets small:

• Trip list is not handled well
• Neither is the detail view

Hover tooltip for online users

It'd be nice to see the names of people who are looking at the trip.

Trip edit page: columns misaligned

When there are an insufficient number of events in a trip, the threads panel shifts under the timeline.

Comments sometimes don't persist

Requires investigation

Deleting components

• Delete trip
• Delete event
• Resolve thread
• Delete message

Allow editing trip metadata

What we should have:

• On creating a trip, you can upload a picture.
• On a trip, there should be an option to edit the picture.

Make Logout Work

We should not need to refresh to logout.

Create new trip does not add self as collaborator

When a new trip is created, the one who created the trip is not a collaborator so they can not see the trip.

Map updates should not hook into events

The markers on the map refresh any time there is an update with events. This is unnecessary and causes flickering in the UI. The map should listen on its own data (maybe a map from cardID to marker object).