problematy / goodmap Goto Github PK

View Code? Open in Web Editor NEW

2.0 2.0 8.0 501 KB

License: MIT License

HTML 17.86% Python 66.23% CSS 9.45% JavaScript 5.64% Makefile 0.82%

goodmap's Introduction

Good Map

Map engine to serve all the people ;)

Setup

Use python 3.10, install poetry: pip install poetry and then install dependencies: poetry install

Running App locally

TL;DR

If you don't want to go through all the configuration, e.g. you just simply want to test if everything works, you can simply run app with test dataset provided in tests/e2e_tests directory:

poetry run flask --app 'goodmap.goodmap:create_app(config_path="./tests/e2e_tests/e2e_test_config.yml")' run

Configuration

If you want to serve app with your configuration rename config-template.yml to config.yml and change its contents according to your needs. Values descriptions you can find inside config-template.yml.

Afterwards run it with:

poetry run flask --app 'goodmap.goodmap:create_app(config_path="/PATH/TO/YOUR/CONFIG")' --debug run

Database

Database consists of three sections:

categories - which informs on what categories data of points is divided
visible_data - list of categories which will be visible by application users
data - actual data split into categories

`categories`

Fully configurable map where key is name of category and value is list of allowed types. E.g.

"car_elements": ["mirror", "wheel", "steering wheel"]
"color": ["red", "blue", "green"]

`data`

Data consists of two parts:

obligatory and constant
- name - name of the object
- position - coordinates of object
category dependent - depending on your categories setup it varies. See example of config below.

`custom data`

You can define your own, more complex data types as dictionary.

obligatory fields in dictionary:
- type - type of data
- value - value of data
optional fields in dictionary:
- displayValue - value to display instead of value

Examples

You can find examples of working configuration and database in tests/e2e_tests named:

e2e_test_config.yml
e2e_test_data.json

goodmap's People

Contributors

Stargazers

Watchers

Forkers

tamaroth trotter-wiz-kiwanis raven-wing agafra oskarrrrrrr kacper-cyra platzky shaidyk

goodmap's Issues

The side menu is a valid list of <li> elements, while the top menu is implemented with <ul>

Website: https://www.rzutberetem.eco/

Description:

The top menu is implemented differently than the side menu.
The side menu is a valid list of <li> elements, while the top menu is implemented with <ul>.
Inconsistent use of lists on the site may cause assistive technologies to malfunction.

As a consequence: In the mobile version (Talk Back Android), the top menu items „Wesprzyj nas” i „polityka prywatności” are omitted.

As another consequence: Incorrectly implemented list for changing the language to Polish/English.

The <a> element cannot be part of a <ul> list

`From line 2, column 2180; to line 2, column 2247
Oraz From line 2, column 2286; to line 2, column 2353
oraz From line 2, column 2391; to line 2, column 2458
es-menu"> <i cl'

Expected result:
From an accessibility point of view, using <li> as a list is much better. This minimizes the number of subsequent errors that occur due to using <ul>.

If a web page can be navigated sequentially, and the order of navigation affects the understanding or functionality of the page, the components take focus in an order that maintains the meaning and functionality of the content.
Elements on the page should be available according to the order in the menu, Focus should not jump between elements.

Attachment:

Create adhoc environment on pull request

CI could automatically create environment. On creating pull request it could create environment accessible from addres .staging... e.g. 12.staging.rzutberetem.eco

Elements, such as: `role=”dialog” i role=”alerdialog” ` do not have accessible ARIA labels

Website: https://www.rzutberetem.eco/

Description:

Elements, such as: role=”dialog” i role=”alerdialog” do not have accessible ARIA labels.
Example:
<div id="left-panel" class="left-panel offcanvas-lg offcanvas-start" aria-modal="true" role="dialog">
The reader sees it as one sentence: typ ubrania buty pościel pluszaki bielizna ręczniki płeć męskie damskie dziecię…

Expected result:
ARIA dialog elements without available names may prevent screen reader users from recognizing the purpose of the elements.
Example solution: https://chromewebstore.google.com/detail/aria-devtools/dneemiigcbbgbdjlcdjjnianlikimpck

Attachment:

Create more meaningful e2e test

It's starting ip/port should also be set in configuration of cypress.

/api/data returns everything

It's problematic for bigger data sets.
Endpoint should not return all available data for multiple reasons:

performance (load of server)
speed of receiving data

Possible solutions:

Filters - data is served only from specific 'rectangle'
Request for all data should not be possible (pagination also will be probably needed)
Making endpoint private.

Split configuration into config.yml and database part.

Now all configuration is config.yml based. It means that we can't e.g. turn off plugin or change configuration without restarting application.

Translations not working

After introducing unified frontend translations stopped working. Fix it. Also provide tests.

null values in non-obligatory fields

In non-obligatory field when a value is null, the application doesn't work properly (if a category is included in visible_data): it renders only points to the first non-null point, and there is no possibility to click on a pin.

Possible solutions:

handle null values by not displaying the category with null value
handle null values by displaying e.g. "no data"
define the requirements for data to not contain null values

Add TODO checker

Pipeline of PR should check if there are no TODOs without issue number. If there is none - this pull request should not be able to merge.

Access to the website in landscape orientation on a mobile device is difficult.

Website: https://www.rzutberetem.eco/

Description:

Access to the website in landscape orientation on a mobile device is difficult. The logo and the top menu take up a large part of the screen and attempts to navigate and scroll the screen result in the map moving only.

Expected result:

The Top panel should not cover most of the screen.
There should be a mechanism to block the map from moving (e.g. use two fingers to move) or the map area should be limited so that there is a margin allowing additional navigation on the page.

Attachment:

Create caching mechanism

Data is downloaded everytime page is refreshed. It could be cached to load faster.

DoD: data loads faster.

Handle 'report an issue'

Get '/api/issue' and send its payload to 'admins email'.

To do it:

add ADMIN_EMAIL to configuration
setup email sending
parse and send payload

Customization of filters panel

At this point, neither the font size nor the panel width can be set. This makes selecting a filter with longer words/descriptions confusing.

Move language selection to the right

The language selection on the Map page should be on the right - as in the Partners and About Us pages.

Allow locations with different set of attributes

Now, when you add different set of attributes to points filtering does not work.

There should be two solutions for that:

Restriction to make it impossible to create different set points
Allow this behavoiur.

Probably that should be somewhere in config or DB

Add support for collecting statistics

As plugin google analytics should be added (can be plugin for google tag manager).

Element '<title>' must not be empty

Website: https://www.rzutberetem.eco/ and sub pages

Description:
rzutberetem.eco and sub pages don't have '<title>'
From line 1, column 1953; to line 1, column 1960s"><title></title><meta

Expected result:
Element '<title>' must not be empty
The title could be for example "Rzut beretem or Project Rzut beretem

Add possibility to display logo

User should be able to get all categories with it's subcategories with one request

As for now frontend app must make request to backend for all categories and then make separate requests to get subcategories of each category.

Acceptance criteria:
API has an endpoint categories/subcategories that return all categories with subcategories

App not displaying data if visible data is null

Create contributing guidelines

Add possibility to handle empty name

As for now, name is an obligatory field. There may be cases when this data is not provided. So it would be good to handle situations when name filed is null.

More information about the project is needed.

Hi,

Seems like this might be an interesting project to join, but is it possible to add more details? in main README.md?
How to use it?, Why to use it?
What are its features?
One-liner does not provide much information.

Many thanks
Cheers WK

The language of the main page and subpages is not defined

Website: https://www.rzutberetem.eco/

Description:

The language of the main page and subpages is not defined
<html lang="">
This causes the reader to get lost in each language version and the Polish text is not read in Polish,

Expected result:
Polish should be defined as the website language in the following format:

lang="pl-PL"

Wrong refreshing after changing filter

How to reproduce:

Zoom out to have two places 'clustered' (see screen) - those places have to have some different types (e.g. gender - one is man, second is woman)
Filter one of those types (e.g. only men)
Both will disappear.

api/categories and api/category/XXX are returning translations

This probably should not be done in such way (it only complicates flow in frontend).

Translations delivery should be reconsidered.

Incorrect iframe attributes

Website: https://www.rzutberetem.eco/

Description:

The following iframes have incorrect attributes:

https://www.googletagmanager.com/ns.html?id=GTM-WZP3LH7 `height= for attribute src on element iframe:

Tab, new line or carriage return found.'

'From line 1, column 2715; to line 2, column 74
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WZP3LH73 height=" 0" width="0" style="display:none;visibility:hidden"></`

`From line 1, column 2715; to line 2, column 74

Expected result:

possible attributes for iframes.
Global attributes
src — Address of the resource
srcdoc — A document to render in the iframe
name — Name of content navigable
sandbox — Security rules for nested content
allow — Permissions policy to be applied to the iframe's contents
allowfullscreen — Whether to allow the iframe's contents to use requestFullscreen()
width — Horizontal dimension
height — Vertical dimension
referrerpolicy — Referrer policy for fetches initiated by the element
loading — Used when determining loading deferral

Wrong command to run project in README.md

Afterwards run it with:

poetry run flask --app 'goodmap.goodmap' --debug run

This should call create_app function as few lines above

Lowercase letters in config-template.yml

# -- Basic app configuration
app_name: My awesome goodmap application

## -- Flask's SECRET_KEY. In production environment you should set it and keep secret.
## -- Ref: https://flask.palletsprojects.com/en/2.1.x/config/
# flask_secretkey: YOU SHOULD CHANGE IT!!!

## -- Languages supported by application
## -- First language would be used as default
languages:
  - en
#  - pl

# -- Database configuration

## -- DB stored in simple json file
db:
  type: json_file
  data_file_path: data.json

## -- DB stored in google cloud storage as json.
# db:
#   type: google_hosted_json_file
#   bucket_name: good-map
#   source_blob_name: data.json

## -- List of overwrites for routes. Useful in frontend development.
route_overwrites:
  /static/map.js: https://cdn.jsdelivr.net/npm/@problematy/[email protected]

Keys in this file should be uppercase as it's in e2e_test_config.yml file

Create more meaningful config error

For now it's plain python error. It should be more human friendly.

File "/home/wicu/Git/goodmap/goodmap/goodmap.py", line 10, in load_config
   with open(config_path, 'r') as file:
FileNotFoundError: [Errno 2] No such file or directory: './config.yml'

pages which aren't map are displayed differently

Clear pyright ignores from code

Do not ask for permission to use the location when a user accesses the site

When a user enters to the website is asked to allow to use one's location. Where user knows nothing about the website and if is going to use the map. Let's ask for location when user clicks on the target symbol on the map.

Replace with a better way to wait for the page to load

goodmap/tests/e2e_tests/cypress/e2e/basic-test/navigation-test.cy.js

Line 5 in ae7d919

cy.wait(100); // TODO - replace with a better way to wait for the page to load

  const viewports = ['iphone-6', 'ipad-2', 'samsung-s10']
  beforeEach(() => {
    cy.visit('http://localhost:5000');
    cy.wait(100);  // TODO - replace with a better way to wait for the page to load
  });

  viewports.forEach((viewport) => {
    it(`Hamburger menu is vertically centered with the logo on ${viewport}`, () => {
      cy.viewport(viewport);

      cy.get('.navbar-brand').then((logo) => {
        const logoPosition = logo.position();
        const logoHeight = logo.outerHeight();
        const logoCenter = logoPosition.top + logoHeight / 2;
        cy.log('Logo Center:', logoCenter);

        cy.get('.navbar-toggler').each(($hamburger, index) => {
          const hamburgerPosition = $hamburger.position();
          const hamburgerHeight = $hamburger.outerHeight();
          const hamburgerCenter = hamburgerPosition.top + hamburgerHeight / 2;
          cy.log(`Hamburger Center ${index + 1}:`, hamburgerCenter);

          expect(hamburgerCenter).to.be.closeTo(logoCenter, 3)
        });
      });
    });

    it(`Left menu is visible after clicking left hamburger on ${viewport}`, () => {
      cy.viewport(viewport);
      cy.get('#left-panel').should('be.not.visible');
      cy.get('.navbar-toggler').first().click();
      cy.get('#left-panel').should('be.visible');

      cy.get('#filter-form').should('be.visible').then((filterForm) => {
        const filterFormRect = filterForm[0].getBoundingClientRect();
        const filterFormTop = filterFormRect.top;

        cy.log('Filter Form Top:', filterFormTop);

        cy.get('.navbar').then(($navbar) => {
          const navbarPosition = $navbar.position();
          const navbarHeight = $navbar.outerHeight();
          const navbarBottom = navbarPosition.top + navbarHeight;
          cy.log('Navbar Bottom:', navbarBottom);

          expect(filterFormTop).to.be.greaterThan(navbarBottom);
        });
      });
    });
  });
});

Failed to run app following TL;DR: Error: Error: Could not import 'goodmap.goodmap.goodmap'.

Just following 1. TL;DR or 2. configuration part from README.md ends with error:

poetry run flask --app 'goodmap.goodmap:create_app(config_path="./tests/e2e_tests/e2e_test_config.yml")' run                                                                                  2022ms
Usage: flask run [OPTIONS]
Try 'flask run --help' for help.

Error: Could not import 'goodmap.goodmap.goodmap'.

poetry run flask --app 'goodmap.goodmap(config_path="")' --debug run
Usage: flask run [OPTIONS]
Try 'flask run --help' for help.

Error: Could not import 'goodmap.goodmap.goodmap(config_path="")'.

Poetry install:

poetry install
Creating virtualenv goodmap-4_ciEilf-py3.10 in /home/***/.cache/pypoetry/virtualenvs
Installing dependencies from lock file

Package operations: 62 installs, 1 update, 0 removals

  • Installing pyasn1 (0.4.8)
  • Installing cachetools (5.2.0)
  • Installing certifi (2022.9.24)
  • Installing charset-normalizer (2.1.1)
  • Installing idna (3.4)
  • Installing protobuf (4.21.9)
  • Installing pyasn1-modules (0.2.8)
  • Installing rsa (4.9)
  • Installing six (1.16.0)
  • Installing urllib3 (1.26.12)
  • Installing google-auth (2.13.0)
  • Installing googleapis-common-protos (1.56.4)
  • Installing markupsafe (2.1.1)
  • Installing requests (2.28.1)
  • Installing click (8.1.3)
  • Installing frozenlist (1.3.1)
  • Installing google-api-core (2.10.2)
  • Installing google-crc32c (1.5.0)
  • Installing itsdangerous (2.1.2)
  • Installing jinja2 (3.1.2)
  • Installing multidict (6.0.2)
  • Installing ply (3.11)
  • Installing pytz (2022.5)
  • Installing werkzeug (2.2.2)
  • Installing aiosignal (1.2.0)
  • Installing async-timeout (4.0.2)
  • Installing attrs (22.1.0)
  • Installing babel (2.10.3): Downloading... 0%
  • Installing backoff (2.2.1)
  • Installing babel (2.10.3)
  • Installing backoff (2.2.1)
  • Installing flask (2.2.2)
  • Installing google-cloud-core (2.3.2)
  • Installing google-resumable-media (2.4.0)
  • Installing graphql-core (3.2.3)
  • Installing htmlmin (0.1.12)
  • Installing jsmin (3.0.1)
  • Installing lesscpy (0.15.1)
  • Installing markdown (3.4.1)
  • Installing pyparsing (3.0.9)
  • Installing rcssmin (1.1.1)
  • Installing wtforms (3.0.1)
  • Installing xxhash (3.1.0)
  • Installing yarl (1.8.1)
  • Installing aiohttp (3.8.3)
  • Installing coverage (6.5.0)
  • Installing docopt (0.6.2)
  • Installing exceptiongroup (1.0.0rc9)
  • Installing flask-babel (2.0.0)
  • Installing flask-markdown (0.3)
  • Installing flask-minify (0.39)
  • Installing flask-wtf (1.0.1)
  • Installing google-cloud-storage (2.5.0)
  • Installing gql (3.4.0)
  • Installing humanize (4.4.0)
  • Installing iniconfig (1.1.1)
  • Installing packaging (21.3)
  • Installing pluggy (1.0.0)
  • Installing pyyaml (6.0)
  • Updating setuptools (67.4.0 -> 65.5.0)
  • Installing tomli (2.0.1)
  • Installing coveralls (3.3.1)
  • Installing gunicorn (20.1.0)
  • Installing platzky (0.1.13)
  • Installing pytest (7.2.0)

Installing the current project: goodmap (0.1.7)

System:

uname -srvoip
Linux 5.19.0-35-generic #36~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Fri Feb 17 15:17:25 UTC 2 x86_64 x86_64 GNU/Linux

Python / Poetry / asdf (asdf-vm -- https://asdf-vm.com/):

python --version                                                                                                                                                                                5.8s
Python 3.10.10

asdf list python
  3.10.10

asdf list poetry
  1.4.1

Create test which checks reporting issue

This test should check:

if there is a way to report issue (it should be part of frontend)
if the issue was really reported (this is backend stuff)

The first one is usual case, the second one will be different as it needs either smtp setup or some stubs.

Connected with #25 and github-frontend/5

Show goodmap versions on /api/version

On /api/version there could be information of backend and frontend versions. It could be sth like this:

{
    backend: 1.2.3,
    frontend: 3.2.1
}

UserWarnings when running app

There are 3 warnings visible in debug:

UserWarning: The setup method 'add_url_rule' can no longer be called on the blueprint 'api'. It has already been registered at least once, any changes will not be applied consistently.
Make sure all imports, decorators, functions, etc. needed to set up the blueprint are done before registering it.

flask_restx team already noticed this bug.
python-restx/flask-restx#502

This issue is created to apply fix when it will be released by flask_restx.

problematy / goodmap Goto Github PK

goodmap's Introduction

Good Map

Setup

Running App locally

TL;DR

Configuration

Database

categories

data

custom data

Examples

goodmap's People

Contributors

Stargazers

Watchers

Forkers

goodmap's Issues

Recommend Projects

Recommend Topics

Recommend Org

`categories`

`data`

`custom data`