Skip to content

The UVA is made as a colleberation between students of Mediacollege Amsterdam and the University of Amsterdam. The goal of the project was to create a App to collect marine data. Project is licensed under AGPL-3.0

License

Notifications You must be signed in to change notification settings

webgem-xyz/UVA-React

Repository files navigation

UVA app

Build GitHub version Test Coverage Maintainability

The UVA is made as a collaboration between students of Mediacollege Amsterdam and the University of Amsterdam. The goal of the project was to create a App to collect marine data.

Target devices

Our target devices are all recent mobile devices. The devices will not always have a internet connection so the app is required to work offline. Data must be visible offline and when you are offline you should be able to submit data.

Chrome Firefox Safari Opera Edge
macOS latest macOS latest macOS latest macOS latest
Windows latest Windows latest Windows latest Windows latest
iOS latest iOS latest ios 9.3 and up -
Android latest Android latest -

Getting Started

To get started clone the respority. Open the folder in the terminal and run

  npm install

To start the development server run

  npm run dev

Open your browser and go to http://localhost:8080

To create a production build run

  npm run serve -- --server config

License information

This project is a way for people on sea to send the date they collect to Fleet Science

Copyright (C) 2018 Yannick Frisart - Webgem

This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License along with this program. If not, see http://www.gnu.org/licenses/.

Team

Yannick1691 ThijsvanRijn Coen
Yannick Frisart Thijs van Rijn Coen Filipsen

Table of Contents

Account Component

Usage

The Account component consists of the following

  • Header
    • Back arrow
    • Account
  • Graph of the ammount of contributions
    • Ammount of contributions is based on a monthly basis.
  • Account info
    • Username
    • Logged in since
  • Sign out button

Location

The Account Component is located at

  src/routes/account/

Attributes

The Account Component accepts the following attributes

Attribute Type Usage
Uid string The identifier of the user, used to get the user info etc.
Logout function The function to run when the user presses the Sign out button.
Email string The email of the user, used to show what account the user is currently logged in to.

Add Component

Usage

The Add component consists of the following

  • Header
    • Back arrow
    • Add Measurement
  • Form
    • Longitude
      • Label
      • Input (type number)
    • Latitude
      • Label
      • Input (type number)
    • Date of measurement
      • Label
      • Input (type date)
  • Button +
    • Adds a new form field
      • Select (select the measurement type)
      • Input of the measurement
    • Remove Item button
      • Removes the new form field
  • Button Submit Measurement

Location

The Add Component is located at

  src/routes/add/

Attributes

The Add Component accepts the following attributes

Attribute Type Usage
addMeasurement function The function that handles adding the measurement to the database.

AddButton Component

Usage

The AddButton component consists of the following

  • Link (button)
    • Icon
    • Text of button

Location

The AddButton Component is located at

  src/components/addButton/

Attributes

The AddButton Component accepts the following attributes

Attribute Type Usage
To string Where should the button point to.
Icon image (string) What should the icon be of the button.
Alt string The alt text of the icon.
Text string What should the text of the button be.

AddMedia Component

Usage

The AddMedia component consists of the following

  • Header
    • Back arrow
    • Add Media
  • Form
    • Longitude
      • Label
      • Input (type number)
    • Latitude
      • Label
      • Input (type number)
    • Date
      • Label
      • Input (type date)
    • Category
      • Label
      • Input (type select)
    • Description
      • Label (Description (optional))
      • Input (type text)
  • Button +
    • Add media (camera roll or camera)
  • Currently uploaded media
    • Picture
      • X button to remove media
  • Button Submit Media

Location

The AddMedia Component is located at

  src/routes/addMedia/

Attributes

The Add Component accepts the following attributes

Attribute Type Usage
AddMeasurement function The function that handles adding the media and data to the measurement.
Uid string The user identifier used to decide where the image should be uploaded to.

CreateAccount Component

Usage

The CreateAccount Component consists the following

  • Logo
  • Form
    • Email input
    • Password input
    • SIGN UP button.
  • Cancel button to Login Component

Location

The CreateAccount Component is located at

  src/routes/createAccount/

Attributes

The CreateAccount Component accepts the following attributes

Attribute Type Usage
createAccount function Function that handles creating the user account and sends them to Overview Component.

DatePicker Component

Usage

The DatePicker Component consists of the following

  • Label
  • Input (date)
    • You choose the date

Location

The DatePicker Component is located at

  src/components/datePicker/

Attributes

The DatePicker Component accepts the following attributes

Attribute Type Usage
label string What should the label of the input field be.
handleState function Saves what the date should be.

Edit Component

Usage

The Edit Component consists of the following

  • Header
    • Edit measurement
    • Backarrow
  • Form

Location

The Edit Component is located at

  src/routes/edit/

Attributes

The Edit Component accepts the following attributes

Attribute Type Usage
uid string Used to identify what user to show data of.
measurementId string Used to define what measurement is being edited.

EditMedia Component

Usage

The EditMedia Component consists of the following

  • Header
    • Edit Media
    • Backarrow
  • Form

Location

The EditMedia Component is located at

  src/routes/editMedia/

Attributes

The EditMedia Component accepts the following attributes

Attribute Type Usage
uid string Used to identify what user to show data of.
mediaId string Used to define what Media is being edited.

EditLink Component

Usage

The EditLink Component consists of the following

Location

The EditLink Component is located at

  src/component/editLink/

Attributes

The EditLink Component accepts the following attributes

Attribute Type Usage
Type string What should the text after edit be.
To string If the user clicks where should it be send through (accepts mes or med).

FilterButton Component

Usage

The FilterButton Component consists of the following

  • Button
    • All
    • Measurements
    • Media
  • Filter Function

Location

The FilterButton Component is located at

  src/components/filterButton/

Attributes

The FilterButton Component accepts the following attributes

Attribute Type Usage
Filter string What should the filter be.
Text string What text should the button display.
HandleFilter function function that handles the filtering.

Footer Component

Usage

The Footer Component consists of the following

Location

The Footer Component is located at

  src/components/footer/

Attributes

The Footer Component accepts the following attributes

Attribute Type Usage
--- --- ---

FormItem Component

Usage

The FormItem Component consists of the following

  • Label (measurement type)
  • Select
    • Option
      • Value
        • Acidity
        • Salinity
        • Temperature
  • Label (value)
  • Input (number)
  • Remove Button
    • Value
      • Remove item

Location

The FormItem is located at

  src/components/formItem/

Attributes

The FormItem Component accepts the following attributes

Attribute Type Usage
Item string Used to get the value that was selected.
Value string What should the default value of the input field be.

Header Component

Usage

The Header component consists of the following

Location

The Header Component is located at

  src/components/header/

Attributes

The Header Component accepts the following attributes

Attribute Type Usage
To string Used to determen where the backarrow should send the user to. Don't define if page doesn't need a back arrow.
Title string The text that should be displayed on the top of the page.
Accic boolean Should there be a account circle to Account Component.
BackColor string color code that the header should have.

Home Component

Usage

The Home component consists of the following

  • syncstate of measurements
  • addMeasurement function
  • Router

Location

The Home Component is located at

  src/components/home/

Attributes

The Home Component accepts the following attributes

Attribute Type Usage
uid string User identifier, used to get the measurements of the specific user.
email string Email of the logged in user.
logout function The function that handles the logout process.

InputGroup Component

Usage

The InputGroup Component consists of the following

  • Label
  • Input field

Location

The InputGroup Component is located at

  src/components/inputGroup/

Attributes

The InputGroup Component accepts the following attributes

Attribute Type Usage
Kind string What is the identifier of the input field.
Label string What should the label of the input field be.
Value string What should the default value of the input field be.
handleState function The function that handles user input in the inputfield.
FullWidth bool Should the input field be 50% of the width or 100%.
Placeholder string What should the placeholder of the input field be.
AutoComplete string What should the browser autofill the field with (leave empy to disable autofill).

Item Component

Usage

The Item Component consists of the following

  • Type (icon)
  • Date
  • Uploaded (V)
  • When clicked on the Item Component it will send them to Measurement Component.

Location

The Item Component is located at

  src/components/item/

Attributes

The Item Component accepts the following attributes

Attribute Type Usage
Key string Unique identiier for item.
Index string The key used for the item data.
Details object The data of the item (type, date, uploaded).

LinkRequestButton Component

Usage

The LinkRequestButton Component consists of the following

  • Button
    • Link to Request

Location

The LinkRequestButton Component is located at

  src/components/linkRequestButton/

Attributes

The LinkRequestButton Component accepts the following attributes

Attribute Type Usage
--- --- ---

LocationPopup Component

Usage

The LocationPopup component consists of the following

  • Form
    • Longitude
    • Latitude
  • Preview
    • Map
      • Marker on location of value of Longitude and Latitude
  • Button
    • Reset to current
    • Save changes

Location

The LocationPopup Component is located at

  src/routes/locationPopup/

Attributes

The Account Component accepts the following attributes

Attribute Type Usage
open boolean Is the popup currently open.
longitude string The longitude input value.
latitude string The latitude input value.
handleState function The function that handles input value changes.
handleReset function What happens when the user clicks the reset button.
handleSave function Function that executes when the user presses the SAVE CHANGES button.

Login Component

Usage

The Login component consists of the following

  • Logo of MyMarine
  • Login form
    • Username
      • Label
      • Input (type email)
    • Password
      • Label
      • Input (type password)
  • Log in button
  • I forgot my password ( link to Reset Component )

Location

The Login Component is located at

  src/routes/login/

Attributes

The Account Component accepts the following attributes

Attribute Type Usage
Signin function The function that handles the login.

Map Component

Usage

The Map component consists of the following

  • Google map
    • marker
  • Longitude
  • Latitude

Location

The Map Component is located at

  src/components/map/

Attributes

The Map Component accepts the following attributes

Attribute Type Usage
latitude string What is the latitude of the measurement.
longitude string What is the longitude of the measurement.
label string What should the text be above the map.

Measurement Component

Usage

The Measurement component consists of the following

  • Header
    • Back Arrow
    • View Measurement
  • Map focused at the coordinates from the measurements.
  • List of data (label - value)
    • Longitude
    • Latitude
    • Date
    • Acidity (pH)
    • Salinity (PSU)
    • Temperature
  • A button to delete the measurements

Location

The Measurement Component is located at

  src/routes/measurement/

Attributes

The Measurements Component accepts the following attributes

Attribute Type Usage
measurementId string Used to get the measurement that was selected.
measurements object Object of al the meaurements, reduced to the measurement the user is currently being viewed.
removeMeasurement func Function that handles deleting the measurement from the database.

MeasurementRow Component

Usage

The MeasurementRow Component consists of the following

  • Wrapper row
    • Label
    • Value

Location

The MeasurementRow Component is located at

  src/components/measurementRow/

Attributes

The MeasurementsRow Component accepts the following attributes

Attribute Type Usage
label string What should the label be of the data.
value string The value of the measurementRow.

Media Component

Usage

The Media Component consists of the following

  • Header
    • Back arrow
    • View Media
  • List of data (label - value)
    • Longitude
    • Latitude
    • Date
    • Category
    • Description
  • Media
    • The uploaded media (preview)

Location

The Media Component is located at

  src/routes/media/

Attributes

The Media Component accepts the following attributes

Attribute Type Usage
mediaId string Used to get the media that was selected.
measurements object Passes down all measurements, Media Component reduces the data to what the user is trying to view.

Notification Component

Usage

The Notification Component consists of the following

  • Message
  • Date

Location

The Notification Component is located at

  src/components/notification/

Attributes

The Notification Component accepts the following attributes

Attribute Type Usage
details object The object that contains the message and the date of notification.

Notifications Component

Usage

The Notifications Component consists of the following

Location

The Notifications Component is located at

  src/routes/notifications/

Attributes

The Notifications Component accepts the following attributes

Attribute Type Usage
--- --- ---

Overview Component

Usage

The Overview Component consists of the following

Location

The Overview Component is located at

  src/routes/overview/

Attributes

The Overview Component accepts the following attributes

Attribute Type Usage
Measurements object The measurements of the logged in user.

ProgressBar Component

Usage

The ProgressBar Component consists of the following

  • Bar wrapper
  • Progress bar showing the ammount of progress made

Location

The ProgressBar Component is located at

  src/components/progress/

Attributes

The ProgressBar Component accepts the following attributes

Attribute Type Usage
progress number How much % is uploaded.

Redirect Component

Usage

The Redirect Component consists of the following

  • Route to redirect

Location

The Redirect Component is located at

  src/components/redirect/

Attributes

The Redirect Component accepts the following attributes

Attribute Type Usage
to string Where should the user be redirected to.

RemoveButton Component

Usage

The RemoveButton Component consists of the following

  • Input field (type button)

Location

The RemoveButton Component is located at

  src/components/removeButton/

Attributes

The RemoveButton Component accepts the following attributes

Attribute Type Usage
removeField function The function that handles deleting the field.
i number Identifier of what field it should remove.
value string What should the text in the button be.

Reset Component

Usage

The Reset Component consists of the following

  • Header
    • Back arrow
    • Reset password
  • Email
    • Label
    • Input (type email)
  • Button
    • Reset password

Location

The Reset Component is located at

  src/routes/reset/

Attributes

The Reset Component accepts the following attributes

Attribute Type Usage
Reset function The function that handles the reset of the password.

About

The UVA is made as a colleberation between students of Mediacollege Amsterdam and the University of Amsterdam. The goal of the project was to create a App to collect marine data. Project is licensed under AGPL-3.0

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published