codybarr / gomobilect Goto Github PK

Set up map component for the client UI.

Example: http://www.womenscenterec.com/pregnancy-calculator

Create an admin page for editing / adding locations and events

• Move Add Location Page

In case an ajax call is going on whenever a component decides to unmount the ajax call should be aborted. Have to add this.

http://mediatemple.net/blog/tips/loading-and-using-external-data-in-react/

Locations:

• Name, Address, Description shouldn't be empty

Events:

• Location and Dates shouldn't be empty
• Start DateTime needs to be before End DateTime

I want to separate the react code from the express code.

Currently all the react stuff is in /src/js/** and the express stuff is in /src/app.js.

Maybe we could put the react stuff in /react/** and the express stuff in /server/**. Waiting for @matenwego to weigh in.

Icon from http://www.womenscenterec.com/

Description could include information about the boutique, etc.

Admins should be able to add/update/delete events and locations, but the superadmin should have access to an additional administrative view that allows him to add/update/delete registered users and change their roles, etc.

After the site accumulates a lot of events we'll want to be able to do a few things like:

• Toggle Sorting by clicking on column headers
• Add pager to tab through events
• Multi-select (checkboxes - with a select all header checkbox) to delete multiple events

Might have to implement some sort of emailing module?

https://nodemailer.com/

Tutorial with Express: https://codeforgeek.com/2014/07/send-e-mail-node-js/

Setting up with Gmail: https://nodemailer.com/using-gmail/

Maybe have one main superuser who can create other content editors.

Make sure all edit components / routes are protected by authentication.

http://blog.slatepeak.com/refactoring-a-basic-authenticated-api-with-node-express-and-mongo/

https://scotch.io/tutorials/routing-react-apps-the-complete-guide (see bottom part about protecting routes)

Since we're using node 6.9.1 it supports ES2015

In addition to a map view there should also be a calendar view (so clients who are only available on certain days can see where the van will be in an efficient way).

Initially it could just center based on all of the added locations.

Maybe we could implement visitor geolocation to center wherever they are.

I think I'd really like to exchange bootstrap for the material ui...http://www.material-ui.com/#/

Or http://materializecss.com/ (I like the parallax template)

Maybe even React for Angular 2 at some point...

Right now we develop using webpack-dev-server, but when you Ctrl+C out and run gulp to start using express none of the javascript assets are up to date. You have to manually run webpack to transpile the assets then run gulp again to test express.

Suggested Fix:

Going to try and get this all into gulp (see: https://webpack.github.io/docs/usage-with-gulp.html).

In the end we should be able to run gulp to start the express server and webpack in watch mode simultaneously!

Update express, webpack config, and mongodb files to account for production environment and deploy test site to AWS.

See if we can switch out all of the Jquery on the site and just use axios for the ajax calls.

I'm thinking about segregating the date and time fields since datepickers seem to be easy to find good solutions for (e.g. https://uxsolutions.github.io/bootstrap-datepicker).

Time could be a simple textbox that autosuggests times in half hour increments when you click the field (like Google Calendar on the web does) (e.g. http://jonthornton.github.io/jquery-timepicker/)

Could create a new content type "registration"

Could take things like:

• Name
• Phone
• Email

Could send the person an email reminder the day of their scheduled time.
Admins could be able to view a particular days registered time slots.

Starting the express server should recreate the location data initially for testing.

• To not intentionally add a way for people to DDoS the site....client side validation should be added to the forms (specifically location).
• Make sure both location and events validate on both the client and server.

Edit:
@matenwego I remember what the issue was last time. It's when editing an existing event I only get one error in the response (regardless of how many there actually are.

Normal err objects will look like this:

{
  "errors": {
    "message": "Event validation failed",
    "name": "ValidationError",
    "errors": {
      "endDateTime": {
        "message": "End Date / Time is required",
        "name": "ValidatorError",
        "properties": {
          "type": "required",
          "message": "End Date / Time is required",
          "path": "endDateTime"
        },
        "kind": "required",
        "path": "endDateTime"
      },
      "startDateTime": {
        "message": "Start Date / Time is required",
        "name": "ValidatorError",
        "properties": {
          "type": "required",
          "message": "Start Date / Time is required",
          "path": "startDateTime"
        },
        "kind": "required",
        "path": "startDateTime"
      },
      "location": {
        "message": "Location is required",
        "name": "ValidatorError",
        "properties": {
          "type": "required",
          "message": "Location is required",
          "path": "location"
        },
        "kind": "required",
        "path": "location"
      }
    }
  }
}

But the error is coming out like this when editing an event:

{
  "errors": {
    "message": "Cast to date failed for value \"I am not a date\" at path \"startDateTime\"",
    "name": "CastError",
    "kind": "date",
    "value": "I am not a date",
    "path": "startDateTime"
  }
}

I suspect because an exception error is occurring.

Currently the add location and edit location forms are being duplicated. Refactor into one component like Events.

If you add a bounce animation to the markers you can see that the markers are readded whenever one is clicked.

Should be able to construct a simple URL, don't even have to use the API:

https://www.google.com/maps/dir//225 Kennedy Drive, Putnam, CT 06260

In authentication.js the JWT tokens are set to expire in 10080 seconds (2.8 hours?). But the token stored in LocalStorage client-side doesn't know when this has expired.

So if you attempt to access a route that requires authentication you'll get a 401 error in the console (even though the view and AuthStore reflect that you're logged in - like the navbar);

Just get the skeleton up so we can start manipulating from there

Get some basic events loaded using the seed file and get them to display on the location page.

Add react router and create some basic routes to make the website a SPA:

• Index
• Map / Locations
• Calendar

Map should fill up entire height and width, except the navbar; remove scroll inhibitor; info windows with schedule should appear in tooltip when clicking the location marker.

Should hit API and load the locations when they get back. Should allow the Component to load regardless if the data is there or not. Don't affect performance please.

Events should be separated by:

• Today
• This Week
• Next Week

And space them out a bit more.

Need to add some React state logic to control the expanding and collapsing of the bootstrap navigation button/bar. Currently it will remain collapsed.

See the following for an idea of how to implement this:

• https://github.com/learncodeacademy/react-js-tutorials/blob/master/2-react-router/src/js/components/layout/Nav.js
• https://youtu.be/XVdwq8W2ZsM?t=2m45s

Dates should no longer be specific to calendar date and time; instead since the Mobile Unit will have a mostly set weekly schedule there should be 'weekday' and 'start/end time' properties for each event document, rather than start/end datetime properties.

Calendar view needs to be updated so there's no navigation between weeks.

Event form needs to be updated to have a drop down box just for the days of the week.

Seed file should be updated to account for event model changes.

Use ProtratorJS

For testing in IE on Mac:

• https://coffeespoonsofcode.com/2014/12/09/how-to-set-up-selenium-grid-to-test-internet-explorer-from-a-mac-or-linux-computer/
• https://developer.microsoft.com/en-us/microsoft-edge/

Currently when you click a marker icon on the main locations page map a new api query is called to retrieve all the current events for that location.

We could optimize this by having one query to obtain the locations and another for all the current events, then only on the initial mount of the component we could update the location state object to include all of the associated events.

Then whenever the client clicks a map marker it'll simply render those events in the info window rather than fire another api call every time.

Will have to set up PUT and DELETE routes for updating and deleting events on the eventlist page

Also add at least an edit button and delete button to add and delete locations

ie. A green google map marker icon if it's currently 10am and there's an event going on at Walmart from 8am - 12pm.

Ooh, maybe make the marker animated? Grow/Shrink? or BOUNCE!!!

marker.setAnimation(google.maps.Animation.BOUNCE);

Make the theme similar to the existing http://gomobilect.com website

Use Parallax: http://pixelcog.github.io/parallax.js/

Ooh.. http://mdbootstrap.com/material-design-for-bootstrap/ looks nice too...