Adds a section to the bottom of the page which houses links to ASU's
issues page and the github repository for the firmware wizard.
Signed-off-by: Sudhanshu Gautam <me@sudhanshug.com>
Add the instructions for development environment setup and
for deploying to server.
Also add relevant information.
Signed-off-by: Sudhanshu Gautam <me@sudhanshug.com>
Now, upon load, the app fetched versions from the server and then
the devices for that particular version.
Then the user can search for their device and download an image
accordingly.
Signed-off-by: Sudhanshu Gautam <me@sudhanshug.com>
The UI is now responsive for all devices (almost). The inputs are made
full-width for mobile devices.
Only relevant images are shown as download links. Previously all the
images returned by ASU server were shown which is fixed now.
Signed-off-by: Sudhanshu Gautam <sudhanshu@clever.coffee>
ESLint is used with the standard react plugin. It detects all kinds of
issues ranging from misspells, indentation, variable-naming, etc.
A pre-commit hook is added to git. Prior commiting, ESlint will run
to validate that everything is OK and the user will have the option
to fix it.
Signed-off-by: Sudhanshu Gautam <me@sudhanshug.com>
Now users can build their images using the Build button and it works
fine for the most part.
There is still some issue with the file download as there are a lot
of them and will be imporved in the future.
Using axios now for cross browser support issue of `fetch`
Signed-off-by: Sudhanshu Gautam <me@sudhanshug.com>
On considerations, the checkboxes were found to be limited as the
customization was limited by that interface. Now a "chip" styled
interface has been introduced alongside a text input field to add
custom packages.
An array separated by commas or newline can be feeded into the input
for bigger lists.
Signed-off-by: Sudhanshu Gautam <me@sudhanshug.com>
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
