Light

ifrcgo / alert-hub-web-app Goto Github PK

View Code? Open in Web Editor NEW

2.0 4.0 0.0 1.12 MB

IFRC Alert Hub provides global emergency alerts, empowering communities to protect lives and livelihoods.

Home Page: https://alerthub.ifrc.org/

Dockerfile 0.10% TypeScript 86.25% JavaScript 2.03% HTML 0.87% CSS 10.75%

alert-hub-web-app's Introduction

IFRC ALERT HUB

Web client for the Alert Hub platform

Getting started

Prerequisites

You can either use docker or yarn to locally run or build this application.

Local setup

1. Clone the repo

git clone [email protected]:IFRCGo/alert-hub-web-app.git
cd alert-hub-web-app

2. Install the dependencies

# Skip if running through docker
yarn install

3. Setup environment variables:

Create a .env file with following variables

APP_TITLE=
APP_MAPBOX_ACCESS_TOKEN=
APP_GRAPHQL_API_ENDPOINT=
APP_GRAPHQL_CODEGEN_ENDPOINT=

You can contact IFRC team to get appropriate values for these variables

4. Run dev instance

yarn start
# or
docker-compose up

Directory Structure

.
├── patches/ (Patches to any of the external dependencies)
├── public/ (Content that needs to be copied during build)
├── generated/ (Generated files: eg. Typescript Definitions)
├── index.html (Base html file)
└── src/
    ├── App/
    │   ├── index.tsx (Defines providers: eg. Auth, Route, Request, Alert)
    │   └── routes.tsx
            ├── index.tsx (Defines routes for the pages)    
    ├── assets/ (images, icons)
    ├── components/ (Commonly used components)
    │   ├── domain/ (Components that are specific to a domain)
    ├── config.ts (Defines configurations read from environment variables)
    ├── declarations/ (Type declarations for external libraries)
    ├── hooks (React Hooks)
    ├── index.tsx (Initializes React)
    ├── utils (Utility functions)
    └── views/ (Pages that we can navigate on the platform)
        └── RootLayout/
            └── index.tsx (Defines root layout and requests fetched for DomainContext)

External facing API

Here is the documentation for Alert Hub GraphQL Client Usage Guide

alert-hub-web-app's People

Contributors

Stargazers

Watchers

alert-hub-web-app's Issues

Add date filter

When click on a country on a map auto select the filters.

Add detail in alert ongoing map pop up

Add pop-up in the map
Add alerts detail in the pop-up
Add tabs for Info-list
Add dropdown to select Polygons to view alert on map for a particular alert.
Add senders email
Add date
Add pagination in the pop-up

Add polygon geo in alert details

Fix admin1 list in the Alert detail page

Table view > Sorting buttons not working

Steps to Replicate

Go to Table view of alerts
Click on sorting buttons on column 'Event', 'Country'

Expected Behavior

The data in the table is sorted in some order

Actual Behavior

No changes were seen in the order

ALERT HUB Feedback and Issues

Map View

IFRCGo/alert-hub-backend#50
#105
#92
In the user stories, it mentions the ability to select a particular admin1 on the map to view its alerts. Has this functionality been completely removed with the list view, or could it be added back?
Paola emphasized that descriptions and instructions are crucial and should be prioritized, but they do not appear in the map view. Is it possible to include them on the initial view of the alert?

Prototype view:

Current view:

#93

Table View

#96
When I click on "View Details" for an alert in the table, could it open in a new page or provide a way to return to the same page (with filtering intact) instead of redirecting me back to the map view?
#94
#90
The prototype's table features a button to copy the link of the alert, which is missing in the new system. Could this be added back in the new frontend?

Alert detail:

The area menu seems to take up a lot of space unnecessarily. It should work like a toggle, similar to info1 vs. info2, allowing for multiple areas. In the original version, all details like area description, altitude, ceiling, and area shape were neatly grouped under 'AREA 1', and the same pattern followed for 'AREA 2', if present. I thought you were working on this last week but maybe I misunderstood so could you please fix it?
P.S. AREA is described as "The container for all component parts of the area sub-element of the info sub-element of the alert message" and in comparison INFO is describes as "The container for all component parts of the info sub-element of the alert message"

Current system:

Old system

Source feeds

#95
When clicking on a card, could it open in a new page?.
It appears there are some duplicates in the system, particularly instances where organizations and languages are identical. Could we remove these actual duplicates for a cleaner database? For instance, as illustrated below:

cc @barshathakuri

Add remaining translations

Table view > Fix the pagination issue

Steps to replicate

Go to Table view
Navigate to pages at the end (>100)
Apply a filter

Expected Behavior

No pagination issue

Actual Behavior

Pagination issue was encountered

Update README.md

Map view > Need count for All Ongoing Alerts

Steps to replicate

Go to Map view of alerts

Expected Behavior

Count is displayed beside the title 'All Ongoing Alerts'

Actual Behavior

No count was displayed

Map sidebar > Need a step by step Back button

Steps to replicate

Go to Map view of Alerts
Click on any Country
Click on any Alert displayed

Expected Behavior

Clicking on Back button will go one step back and display the list of alerts

Actual Behavior

'Back to Countries' button directly redirected to the list of Countries instead of List of Alerts

Add source detail

Fix the behavior of the filter

Steps to replicate

Select an option from 'Certainty' filter
Click on 'All Countries' filter
Select a Country

Expected Behavior

Only the countries that satisfy both the filters are displayed

Actual Behavior

Countries not satisfying the first filter were displayed in the 'All countries' filter

Fix filter Label

Make Select Urgency type to Urgency, Select Severity type to Severity and Select Certainty type to Certainty.

Add Nav Bar in Home Page

Add these menus as shown in the image

Language Option
About
Resources
Login
Home
My subscription

Table view > Need count for All Alerts

Steps to replicate

Go to Home
Go to the Table view of alerts

Expected Behaviors

Count is displayed beside the title "All alerts"

Actual Behavior

No count was displayed

Fix the admin1 list

Add the admin1 list here too (same as you did in alert info detail page)

Add back button in Alert Aside

Add tabs for Map and Table

Add Tabs for Map and Table

Add filter table in alert ongoing

Add following filters in the table

Urgency
Severity
Certainty

Clicking on the 'Home' button should display the map view by default

Steps to replicate:

Navigate to Homepage
Go to Table view
Click on 'Home'

Expected Behavior

Map view is displayed by default

Actual Behavior

Table view remained unchanged when 'Home' was clicked on

.env is hardcore. Update it according to server

Add About Page

Add About page: https://web-ifrc-alert-hub.dev.datafriendlyspace.org/about

Add sort only in sent date in alert Table

We are not doing filter in alert event for now.

Preserve History Filter

When I click on "view details" of an alert, could you open it in a new page or provide a way to navigate back to the exact country and alert I was on previously?

Alert Detail Page > Add detail in alert ongoing > info

Add info details in view detail section

Project set up frontend

Add pop up in alert ongoing map

Highlight all the countries where there are ongoing alerts.
Add pop up in highlighted ongoing alerts.

Add filters in remaining section

Fix Pagination issue

Fix Pagination issue in all the pagination.

Make table column sortable

Add table count value
Verify which columns are sort-able and make the same column sortable in table.

Add description and instructions in side pane

Paola emphasized that descriptions and instructions are crucial and should be prioritized, but they do not appear in the map view. Is it possible to include them on the initial view of the alert

Add description and instructions

Fix the name of the Filters

Expected Behavior

The name of the filter differs from the placeholder

Actual Behavior

The name of the filter and the placeholder are the same

Add Resource Page

https://web-ifrc-alert-hub.dev.datafriendlyspace.org/resources

Add this page to Resource Route

Add table in alert ongoing

Add columns event, event category, region, country, admin and view details in the table.
Add filters on Date and event category.
Expand the row of a alert to view its details.
Make Event and country sort-able.
Make view detail a link for each alert

Table > Add detail in alert ongoing > Parameter

Add parameter detail in table detail section.

Add filters in map

Add following filters in Map

Urgency
Severity
Certainty

Fix the admin names displayed on the View Details page of an alert

Add Footer

Alert Detail Page > Add country Map and alert Info in alert ongoing

Open to the view alert details in a new tab.
List all the information and details of alert.
Add a country map in table details page.

Add time in table column

Add time in sent column after date.

Add alert ongoing map in home page

Add Ongoing map title
Add all ongoing alerts map.

Add Link in all the value which includes url

Add fix routes link

Map> Add specific location on map on a country click

It was expected that clicking on a country would lead to jumping to that specific location on the map. Currently, we only have the list available on the side. Is this functionality not supported in this map view?
In the user stories, it mentions the ability to select a particular admin1 on the map to view its alerts. Has this functionality been completely removed with the list view, or could it be added back?
The new system does not highlight the admin1 chosen on the map while the old does. Is it possible to incorporate this functionality back in?

Fix the back button issue in Alert side pane

Set up docker for client

Migrate docker-compose from backend to frontend and setup accordingly
https://github.com/IFRCGo/alert-hub-backend/blob/develop/docker-compose.yml

Fix filters ? issue

Table view > Need a filter for Event Category

On table view, I think we need a filter for Event Categories

Alert Detail Page > Add detail in alert ongoing > Area

Add area detail in table detail section

Recommend Projects

React

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

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

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

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
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.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

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

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.