vexelon-dot-net / e-additives.web Goto Github PK
View Code? Open in Web Editor NEWFood additives web app
Home Page: https://e-additives.vexelon.net
License: GNU Affero General Public License v3.0
Food additives web app
Home Page: https://e-additives.vexelon.net
License: GNU Affero General Public License v3.0
Configuration:
Steps to reproduce:
Expected result:
Actual result:
Configuration:
Steps to reproduce:
Expected result:
Actual result:
Attachments:
Requirements
This is the first default page to open. It displays a big search box with the E-additives logo on top.
Configuration:
Steps to reproduce:
Expected result:
Actual result:
Reason:
A list of additives must be displayed when users clicks on Explore -> Additives.
Additives must be displayed in a responsive table. We should use the [Footable]- (https://github.com/bradvin/FooTable) implementation for this. Demos.
Each additive must be selectable -> checkbox
A select all checkbox must be available. All items must be selected/de-selected using this checkbox.
Additive code, name and last updated datetime must be shown in the table.
last updated - time must be shown in the timezone of the user.
Clicking on the code of the additive sends the user to additive info page (Issue #4)
Show 25 items per page by default
...More in comments :)
The webapp must read the supported browser language/locale settings, i.e., en-US
or bg-BG
. The webapp language must by default be set according to the browser language.
Only when users explicitly changes the language via the Language option, the webapp will save the user language into the browser's localStorage. When users open the webapp again the localStorage saved language must be used.
Page header. Contains project name and menu items positioned from Left to Right.
1 Must contain project Logo icon. The logo is clickable. If the user clicks it she must be redirected to the Index/Main page.
2 Must contain Menu items. Items are positioned after the Project Name
2.1 Explore
2.1.1 Additives
2.1.2 Categories
2.2. Language
2.2.1 EN
2.2.2 BG
Configuration:
Steps to reproduce:
Expected result:
Actual result:
A build.sh
script must be created that copies only the required files and scripts to the build
folder. The contents of this folder will be the ready-to-be-deployed project.
index.html
file.Styles and HTML seem to be loaded but nothing else. Probably a javascript error that must be checked.
Add Breadcrumbs to enable easier navigation between pages.
When users go to #additives page it takes a looooooooong time until the additives are displayed. This is caused mainly by the footable
plugin that prepare and formats the data as responsive table.
Solution would b e not to display all additives but separate them in categories. By default E100-199 range will be shown and the rest of the ranges would be selectable via Tab UI component.
Add the following non-interactive pages and respective links to them:
Configuration:
Steps to reproduce:
Expected result:
Actual result:
Page footer. Contains copyright info, terms of use and links. Must look like the footer of last.fm
Here is a draft of what the footer should contain.
Find out more | Goodies ... |
---|---|
Contact us | Apps |
Contribute | |
Blog | Developer API |
[Icon] English Bulgarian
[Vexelon Logo] © 2013 Vexelon.NET Services. All rights reserved. | [Terms of Use], [Privacy Policy]
A list of additives categories must be displayed when users clicks on Explore -> Categories
Users should be able to comment on additives and categories. Instead of forging our own comments functionality we can use what Disqus provides.
This change should be rolled out in a 0.9.x release.
On /#additive
page. Adapt the css style of the search input control as per bootstrap look & feel.
Check the examples.
Ajax wait animation must be displayed when switching between pages.
This is needed because each page is a separate template that is dynamically loaded by the web ui client from the partials
folder.
This page displays all information about single additive found/selected.
Show tabular type of formatted data with additive infos:
Code | 101a |
---|---|
Name | Riboflavin-5'-Phosphate |
Function | food coloring (yellow-orange) |
Warnings | No data |
Status | No data |
Safe for vegetarians | No data |
Foods | Found in many foods for babies and young children as well as jams, milk products and ... |
Details | Consists mainly of the monosodium salt of the 5'-monophosphate ester of ribofla ... |
The Foods and Details texts may be quite large. Thus, it is better to put them in separate sections.
No data - must be displayed when we get no result for that additive property from the server.
At the moment we can only (somehow) test IE10 and occasionally IE9. Anything less than that would currently be considered not supported. The webapp must detect if user's browser is something less than IE9 and hit him with a warning message. :)
Configuration:
Steps to reproduce:
Expected result:
or Get a message on the home page that this item does not exist.
Actual result:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.