projektkuro / kuro-web

web project for project kuro

kuro-web

Web Frontend Entwicklung für Projekt Kuro, entwickelt mit Vue.js.

Aktueller Stand von kuro-web

Folgende Screenshots zeigen den aktuellsten Stand (Stand: 14.04.2020) von kuro-web.

Produkte Seite

Supermärkte Seite

Ansicht von kuro bei Benutzung des Web-Clients.

Project setup

yarn install

Compiles and hot-reloads for development

yarn run serve

Compiles and minifies for production

yarn run build

Run your tests

yarn run test

Lints and fixes files

yarn run lint

Customize configuration

See Configuration Reference.

kuro-web's Issues

Update the distance selection component

rearrange the distance selection box that it is not displayed next to the Map.

Maybe the styles (for the selection comp) could be updated with this, too

Fix alignment of footer links

Describe the bug
The labels below the logos should be aligned on the same height.

Create Crud-operations service for the api

Create a basic crud service for the api, that implements the methods create,read,update,delete.

add turkish language template

Is your feature request related to a problem? Please describe.
We need a turkish language template in order to have this app available in turkish-speaking countries.

Describe the solution you'd like
A turkish language template.

Describe alternatives you've considered
none.

Additional context
none.

create a service for products

Create a small service that communicates our product-related data with the api.

Create Products class/interface

In order to have a valid representation of a product, create a typed class or interface to represent the product with given properties. This class should extend the resource class. #17

add italian language template

Is your feature request related to a problem? Please describe.

This feature will deliver an italian version of kuro.

Necessary steps:

• add italian language template (locales/it.json)
• add svg image with italian flag (should be like the other .svgs)
• add italian to LocaleChanger.vue and its logic

Describe the solution you'd like
A italian language template.

Describe alternatives you've considered

Additional context

Update Product.vue

Update Product.vue component in a way that it contains the Details component and renders it, depending on the Store value of a selected Product.

create a service for Shop-retrieval

Create a small service that communicates our shop-related data with the api.

Wire up websockets to inform users of updates

Websockets could be used to inform users of updates instantaneously.

Add translations

All strings should be translated

Create Product details subcomponent

Product details should be displayed when the user 'clicks' on one product.

When viewing a product in the App the user could see the state of this product for the supermarkets in the vicinity.

The Product Details component should thus display the title and description (possibly cathegories) of the product and a map view of local supermarkets where this product could be bought.

Create prototype pages

Create *.vue components for every page that we want to display in the app.

• Supermarket producs
• supermarket products (core data and status manipulation)

add spanish language template

Is your feature request related to a problem? Please describe.
We need a spanish language template in order to have this app available in spain-speaking countries/

Describe the solution you'd like
A spanish language template.

Describe alternatives you've considered
none.

Additional context
none.

Create Market model class/interface

In order to have a valid representation of a market, create a typed class or interface to represent the market with given properties. This class should extend the resource class. #17

create product view

Is your feature request related to a problem? Please describe.
Create a Product View, meaning a own site that opens when clicking on a product on the kuro product-page.

Describe the solution you'd like
A product view component that can be used by the product site, as well as the shop internal product site.

Describe alternatives you've considered

Additional context
Keep components abstract and reusable.

Create Supermarket-Product update component

When displaying the current state/availability of supermarkets the user must be able to update this state by selecting the amount of one product that he/she sees. This could either be 'none', 'few', 'much' or a numeric value (guessed or counted by the user).

Updates must then be send to the server and processed to inform other users.

Change the css to match the design of the app

Create generic Resource class

Create a superclass for models. This could look something like, but not limited to, this:

export class Resource {
    id: string;
    createdAt: Date;
    updatedAt: Date;

    constructor (json: any) {
        this.id = json?.id;
        this.createdAt = new Date(json?.createdAt || null);
        this.updatedAt = new Date(json?.updatedAt || null);
    }
}

Add french language template.

Is your feature request related to a problem? Please describe.
We need a french language template in order to have this app available in french-speaking countries/

Describe the solution you'd like
A french language template.

Describe alternatives you've considered
none.

Additional context
none.

Fix Styling for ProductView.

Create Styles for Products View, in a way that viewing the page on mobile dive renders 2 columns where a card expands over 100% of the screen width, tablet (and larger screen) will render 4 columns where a card on click expands to 50-60% screen width.

Create a location service

Create location service, that retrieves and stores the user location in its corresponding shop

Add map view to Markets view

Maps could helt orientate users

LocaleChanger: close with second click on Icon

The Language-Icon in the LocalChanger should close with a second click on the Icon (in the mobile Version).

create product store

Create a vuex-simple store for our products. It should store data that the application needs for our products (e.g. selected Product, all available products etc.).

Create map markers

In order to show the own location and the location of shops, create map markers that ca be used in the map-view component.

These assets (png or svg) are needed:

• Own location marker. Possibly a single dot
• Radius of accuracy. Semitransparent circle to show the accuracy from the geolocation-API
• Location marker for the shops. Pin with shop icon

Ensure theming according to the overall kuro-web design.

Implement search functionality for products and markets

The search functionality should find Products/Markets when the user enters a search string.

The serach is a good way to filter markets, that the user desires to visit.

Implement passing QueryParameters to Market page

The backend supports paginated results like (page and perPage parameters) and the passing of a distance for the localized search. These parameters must be passed from the client.

create a service for locations

Create a small service that communicates our location-related data with the api and move the code from where it is now to that service.

create product availability feature for other shops

Create a feature where a user can easily see the status of the currently selected product in other stores.

create input field for address-input

Create an input field somewhere, so that the user can manually enter an Address and gets all the shops. Regarding the fact, that some users just do not want to turn on their location services, this leaves it up to the end user and values their privacy.

create snackbar component

create a Snackbar/Toaster component that shows and informs the user about errors or ongoing requests (case of long loading times (maybe)).

create possibility to change search radius

implement a function or Component that lets the user change its default search radius (which currently is 2000m)

create address model

Create Supermarket details subcomponent

Supermarket details should be displayed when the user 'clicks' on one supermarket.

When viewing a supermarket in the App the user could see the state of all products for the supermarket selected.

The Supermarket Details component should thus display the name and full address of the supermarket, as well as a list of all the products and the current state/availability of the corresponding product.

create vuex-store

create a vuex-store to make state-management possible in the application

create dynamic routes

Create dynamic router components that render the corresponding compont for shops and products.

When visiting kuro.tld/products/:productId we expect the product details component to render with the information for the given productId. Same goes for shops and kuro.tld/shops/:shopId.