UVA app

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.


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

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


Yannick Frisart	Thijs van Rijn	Coen Filipsen

Account Component
Add Component
AddButton Component
AddMedia Component
CreateAccount Component
DatePicker Component
Edit Component
EditMedia Component
EditLink Component
FilterButton Component
Footer Component
FormItem Component
Header Component
Home Component
InputGroup Component
Item Component
LinkRequestButton Component
LocationPopup Component
Login Component
Map Component
Measurement Component
MeasurementRow Component
Media Component
Notification Component
Notifications Component
Overview Component
ProgressBar Component
Redirect Component
RemoveButton Component
Reset Component

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
- Send user back to Login Component.

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
- Adds measurement to database
- Sends user to Overview Component

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
- Submits the media to the database
- Sends the user back to Overview Component

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
- Date input
- Location
  - LocationPopup Component
- User added form element
  - Select
  - Input type number
- Button save changes

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
- Date input
- Location
  - LocationPopup Component
- Category
- Description
- Used uploaded Media
- Button save changes

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

Link
- Edit {type}
- Icon
- Sends to Edit Component or EditMedia Component

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

Overview (icon)
- When clicked on Overview it will send them to Overview Component.
Request (icon)
- When clicked on Request it will send them to Request Component.
Account (icon)
- When clicked on Account it will send them to Account Component.
Notifications (icon)
- When clicked on Notifications it will send them to Notifications Component.

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

Back arrow
Page title
Account circle button to Account Component

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
- If the login is succesfull it will send the user to Overview Component
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

Header
- Notifications
All the notifications Notification Component

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

Header
- Dashboard
- Button to Account Component
Add data
- AddButton Component Add Measurement to Add Component
- AddButton Component Add Media to AddMedia Component
Overview
- Filter
  - FilterButton Component
- List of measurements
  - Type (icon)
  - Date
  - Uploaded (V)

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.

Files

readme.md

Latest commit

History

readme.md

File metadata and controls

UVA app

Target devices

Getting Started

License information

Team

Table of Contents

Account Component

Usage

Location

Attributes

Add Component

Usage

Location

Attributes

AddButton Component

Usage

Location

Attributes

AddMedia Component

Usage

Location

Attributes

CreateAccount Component

Usage

Location

Attributes

DatePicker Component

Usage

Location

Attributes

Edit Component

Usage

Location

Attributes

EditMedia Component

Usage

Location

Attributes

EditLink Component

Usage

Location

Attributes

FilterButton Component

Usage

Location

Attributes

Footer Component

Usage

Location

Attributes

FormItem Component

Usage

Location

Attributes

Header Component

Usage

Location

Attributes

Home Component

Usage

Location

Attributes

InputGroup Component

Usage

Location

Attributes

Item Component

Usage

Location

Attributes

LinkRequestButton Component

Usage

Location

Attributes