An interface tagged Basic and Advanced is introduced. Basic section
shows the default openwrt images with download links. Advanced
section show the options to choose which packages to use and an
option to build the images is introduced.
Reformatting of the code is also done according to standard code
styling.
Signed-off-by: Sudhanshu Gautam <me@sudhanshug.com>
Basic device information is added to be displayed along with the
download buttons. Additionally, a warning432 message will be
displayed if the size of the image is less than 4000k.
New interface for customized image building with a custom selection
of packages.
Signed-off-by: Sudhanshu Gautam <me@sudhanshug.com>
instead of locally stored data, now the application can get the
data from json sources over the internet.
Signed-off-by: Sudhanshu Gautam <me@sudhanshug.com>
Previously they were stored according to the format
'src/locales/{{lng}}/translation.json'
and after review, they are stored according to the following:
'src/locales/{{lng}}.json'
Also, the english strings are used as the keys/identifier in
translation files to make it easy to understand and implement.
Signed-off-by: Sudhanshu Gautam <me@sudhanshug.com>
Previously, the search resutls were displayed only when the search
input was in focus and were hidden when it went out of focus. In
order to make the options in the list work, the focus out event
was delayed by 300ms.
Now, to get rid of the delay, an onClick event is added to the outer-
most container of the component which checks if the clicked element
(target of the event) is an descendant of the 'search-container'
class housing the search input. If it is an descendant and the
search query is not empty, then the result list is displayed otherwise
it is hidden.
Signed-off-by: Sudhanshu Gautam <me@sudhanshug.com>
The process of finding image for a specific device by select inputs
was a tidious one.
Search bar functionality was introduced to make the process easier
and convenient.
The search uses fuzzyset.js to find possible suggestions for the user
in realtime.
Signed-off-by: Sudhanshu Gautam <me@sudhanshug.com>
Uses react-i18next library to provide APIs for translational
purposes.
Translation data is loaded from `src/locales/{{lng}}/translation.json`
and is accessed by dot notation.
The data can be translated in two ways:
1. In functional components, a method `t` can be instantiated using the
`useTranslation` method from rect-18next.
2. In class components, a method `t` can be accessed via props while
exporting the component with `withTranslation` method from react-i18next
library.
The syntax will look like `t('data.data')` or `this.props.t('data.data')`
Signed-off-by: Sudhanshu Gautam <me@sudhanshug.com>
PWA based on ReactJs. Showcases the basic functionalities required
for the Firmware Selector.
Proof of Concept for the wizard with selection for vendor, model
and variants.
Signed-off-by: Sudhanshu Gautam <me@sudhanshug.com>
Initial commit from Create React App
