Giter VIP home page Giter VIP logo

amnh-validation-tool's Introduction

amnh-validation-tool

This is a tool based on the prototype we built at the AMNH Hack the Deep Hackaton 2018.

It is a simple web application that helps AMNH Marine Samples volunteers to input and generate CSV records of the marine samples collected by the museum.

It's goal is to help lower the number of input errors while recording each specimen. Most of the WebApp functionalities work offline, but some of them require internet access to work. It does not require a backend and can be hosted on a free service such as github pages.

Features

  • Validates Taxonomical data using the Worms API
  • Validates long and lat locations by using the Gmaps API
  • Validates required input fields
  • Generates timestamp id for the records
  • Requires and registers volunteers name while working on the records
  • Exports data to CSV
  • In browser Database with IndexDB so many records can be added before exporting
  • Link to decimal longitute converter
  • Temperature converter

Usage

  1. Input Volunteer name

intro

  1. Follow instructions for every section of the form

  2. Press add another record to save the current one and work on another, or press download CSV to finish for the day and download the CSV file.

save

mocks

https://ninjamock.com/s/DXFFHRx

slightly better mocks

Full screen: https://xd.adobe.com/view/eab4a78f-089d-4c3d-b286-cec32a560560?fullscreen For comments: https://xd.adobe.com/view/6616fd30-9971-45fc-8e68-af9ccd306d7b/ More or less Style guide: https://xd.adobe.com/spec/cdc00271-692a-465e-8059-0f00a0ba38e6

How to work on this

Build tools

  1. Install parcel $ sudo npm install -g parcel-bundler If you run by any problem it's probably the node version, parcel doesn't work on old versions.

  2. run npm install

  3. run npm run dev on the root folder

  4. Go to localhost:1234 to see the project

SCSS

We are using a component/helper classes based CSS methodology. Once you have built the system, load the styleguide.html file so you can see the components in action.

JS

Since we are using parcel, ES6 features do work.

Deployment

Deployment will happen using gh-pages

run npm run build in the root folder.

amnh-validation-tool's People

Contributors

atmalagon avatar cfinucane avatar ericperrotta avatar krtonga avatar ondoheer avatar plapcity avatar theseanything avatar tiburona avatar

Watchers

 avatar  avatar  avatar  avatar

amnh-validation-tool's Issues

Finish up Locations Section

  • Search location should autocomplete with MapBox.

  • Farenheit to Celsius converter.

  • User should be able to click a location on the map.

  • Autocomplete all the fields when a user picks something in MapBox.

Make the date pickers work with jquery UI

Datepickers are not working currently. We are using Jquery for this and it was working on the stylesheet. See why it is not working on our form. Jquery is already installed.

User name input

Editable user name field that persists through page refresh.

Fix WORMs API issues

  • API Error
  • change the basic iframe to become the search form
  • handle non results

Yes/No Functionality in Host Section

In the Host section, when the user clicks "Yes" display all the fields to enter. If the user clicks "No" scroll automatically to the next section.

Write to Christine

  • Ask about the closed sets
  • Ask about selectors/multiselectors for the closed sets
  • Is there always a collector?

Make the header fixed and dynamic

The header should stay fixed to the top of the page as the user scrolls through the form.

We need to user's name to the header.

We need to add a "Save" Button which will be used to write to the database. (Do not implement database writes in this step.)

Add a Counter of how many records are currently in the user's local database.

Add tooltips to input fields

  • Search location
  • Latitude from / to

The moment I started reading through all of the fields, I felt these were the same ones as in the excel, and that they would be trained by Christine. The ones that might need a further explanation are actually our fields, which are mostly buttons!!!

I would add instructions to the footer add another, download csv what do you think @ericperrotta

Standardize the look of the closed sets and text inputs

Have the style be the same for when a user has not yet chosen any thing from a closed set list or entered anything into a text box.

The style should also be the same when the user has entered text into a text input or chosen an option in a closed set. This style should differ from above.

Add Download CSV button functionality

When the user clicks on the "Download CSV" button, this should write all the data to a CSV and clear the database once the records have been written.

Add Another Specimen Button Functionality

When the user clicks on the "Add Another Specimen" Button at the bottom of the form, all the data entered should be added to the database or updated for that particular record.

All fields should be cleared. (This can be done by refreshing the page.)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.