mirror of
https://git.netzspielplatz.de/docker-multiarch/openwrt-firmware-selector.git
synced 2025-11-08 22:19:24 +00:00
Fix header, custom image download links and add std outputs
This commit is contained in:
Sudhanshu Gautam
parent
5b9d821082
commit
b7cac199b3
6 changed files with 100 additions and 63 deletions
14
src/App.scss
14
src/App.scss
|
|
@ -45,6 +45,20 @@
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.std-accordian {
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.MuiAccordionSummary-root {
|
||||||
|
background-color: #f3f3f3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.std-textarea {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
.logo {
|
.logo {
|
||||||
height: 40px;
|
height: 40px;
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@ import Footer from './components/Footer';
|
||||||
const theme = createMuiTheme({
|
const theme = createMuiTheme({
|
||||||
palette: {
|
palette: {
|
||||||
primary: {
|
primary: {
|
||||||
main: '#00B5E2',
|
main: '#00a3e1',
|
||||||
contrastText: '#ffffff',
|
contrastText: '#ffffff',
|
||||||
},
|
},
|
||||||
secondary: {
|
secondary: {
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,10 @@
|
||||||
import React, { FunctionComponent, useRef } from 'react';
|
import React, { FunctionComponent, useRef } from 'react';
|
||||||
import TranslateIcon from '@material-ui/icons/Translate';
|
import TranslateIcon from '@material-ui/icons/Translate';
|
||||||
import {
|
import { AppBar, Box, Button, Menu, MenuItem, Checkbox, Toolbar } from '@material-ui/core';
|
||||||
AppBar,
|
|
||||||
Box,
|
|
||||||
Button,
|
|
||||||
Menu,
|
|
||||||
MenuItem,
|
|
||||||
Checkbox,
|
|
||||||
Toolbar,
|
|
||||||
Typography,
|
|
||||||
} from '@material-ui/core';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { ReactSVG } from 'react-svg';
|
import { ReactSVG } from 'react-svg';
|
||||||
|
|
||||||
import logo from '../../images/logo-white.svg';
|
import logo from '../../images/logo.svg';
|
||||||
import locales from '../../locales';
|
import locales from '../../locales';
|
||||||
import '../../App.scss';
|
import '../../App.scss';
|
||||||
|
|
||||||
|
|
@ -35,9 +26,6 @@ const Header: FunctionComponent = () => {
|
||||||
<AppBar position="sticky" className="header">
|
<AppBar position="sticky" className="header">
|
||||||
<Toolbar>
|
<Toolbar>
|
||||||
<ReactSVG src={logo} className="logo" />
|
<ReactSVG src={logo} className="logo" />
|
||||||
<Typography variant="h5" component="div">
|
|
||||||
{t('tr-title')}
|
|
||||||
</Typography>
|
|
||||||
<div style={{ flexGrow: 1 }} />
|
<div style={{ flexGrow: 1 }} />
|
||||||
<Box position="relative">
|
<Box position="relative">
|
||||||
<Button
|
<Button
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,8 @@
|
||||||
import React, { FunctionComponent, ReactNode, useCallback, useEffect, useState } from 'react';
|
import React, { FunctionComponent, ReactNode, useCallback, useEffect, useState } from 'react';
|
||||||
import {
|
import {
|
||||||
|
Accordion,
|
||||||
|
AccordionDetails,
|
||||||
|
AccordionSummary,
|
||||||
Box,
|
Box,
|
||||||
Button,
|
Button,
|
||||||
Chip,
|
Chip,
|
||||||
|
|
@ -20,7 +23,7 @@ import {
|
||||||
TableRow,
|
TableRow,
|
||||||
Typography,
|
Typography,
|
||||||
} from '@material-ui/core';
|
} from '@material-ui/core';
|
||||||
import { Launch, CloudDownload, Add } from '@material-ui/icons';
|
import { Launch, CloudDownload, Add, ExpandMore } from '@material-ui/icons';
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import { isEqual } from 'lodash';
|
import { isEqual } from 'lodash';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
@ -170,6 +173,7 @@ const ProfileDetails: FunctionComponent<Props> = ({ selectedVersion, selectedPro
|
||||||
);
|
);
|
||||||
const hasAbilityToBuildCustomPackages = Object.keys(config).includes('asu_url');
|
const hasAbilityToBuildCustomPackages = Object.keys(config).includes('asu_url');
|
||||||
const canBuild = !isEqual(Array.from(customPackages.values()), preExistingPackages());
|
const canBuild = !isEqual(Array.from(customPackages.values()), preExistingPackages());
|
||||||
|
const isBuilding = typeof buildStatus === 'string';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
|
@ -314,24 +318,21 @@ const ProfileDetails: FunctionComponent<Props> = ({ selectedVersion, selectedPro
|
||||||
</Typography>
|
</Typography>
|
||||||
<br />
|
<br />
|
||||||
{Array.from(customPackages.values()).map((p) => {
|
{Array.from(customPackages.values()).map((p) => {
|
||||||
const isDefaultPackage = profile.default_packages?.includes(p);
|
|
||||||
return (
|
return (
|
||||||
<Box key={p} pr={1} pb={1} display="inline-block">
|
<Box key={p} pr={1} pb={1} display="inline-block">
|
||||||
<Chip
|
<Chip
|
||||||
size="small"
|
size="small"
|
||||||
label={p}
|
label={p}
|
||||||
color={isDefaultPackage ? 'default' : 'primary'}
|
color={isBuilding ? 'default' : 'primary'}
|
||||||
className={classes.chip}
|
className={classes.chip}
|
||||||
onDelete={
|
onDelete={() => {
|
||||||
isDefaultPackage
|
if (!isBuilding)
|
||||||
? undefined
|
|
||||||
: () =>
|
|
||||||
setCustomPackages((prev) => {
|
setCustomPackages((prev) => {
|
||||||
const newSet = new Set(Array.from(prev.values()));
|
const newSet = new Set(Array.from(prev.values()));
|
||||||
newSet.delete(p);
|
newSet.delete(p);
|
||||||
return newSet;
|
return newSet;
|
||||||
})
|
});
|
||||||
}
|
}}
|
||||||
/>
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
|
|
@ -341,6 +342,7 @@ const ProfileDetails: FunctionComponent<Props> = ({ selectedVersion, selectedPro
|
||||||
<InputLabel style={{ fontSize: '0.9em' }}>Custom Package Name</InputLabel>
|
<InputLabel style={{ fontSize: '0.9em' }}>Custom Package Name</InputLabel>
|
||||||
<Input
|
<Input
|
||||||
value={customPackagesInputValue}
|
value={customPackagesInputValue}
|
||||||
|
disabled={isBuilding}
|
||||||
onChange={(e) => e && setCustomPackagesInputValue(e.currentTarget.value)}
|
onChange={(e) => e && setCustomPackagesInputValue(e.currentTarget.value)}
|
||||||
onKeyUp={appendAddPackageInput}
|
onKeyUp={appendAddPackageInput}
|
||||||
endAdornment={
|
endAdornment={
|
||||||
|
|
@ -379,7 +381,7 @@ const ProfileDetails: FunctionComponent<Props> = ({ selectedVersion, selectedPro
|
||||||
alignItems="center"
|
alignItems="center"
|
||||||
spacing={2}
|
spacing={2}
|
||||||
>
|
>
|
||||||
{typeof buildStatus === 'string' && (
|
{isBuilding && (
|
||||||
<Grid item>
|
<Grid item>
|
||||||
<CircularProgress />
|
<CircularProgress />
|
||||||
</Grid>
|
</Grid>
|
||||||
|
|
@ -414,6 +416,7 @@ const ProfileDetails: FunctionComponent<Props> = ({ selectedVersion, selectedPro
|
||||||
</Table>
|
</Table>
|
||||||
<br />
|
<br />
|
||||||
<br />
|
<br />
|
||||||
|
<TableContainer>
|
||||||
<Table>
|
<Table>
|
||||||
<TableHead>
|
<TableHead>
|
||||||
<TableRow>
|
<TableRow>
|
||||||
|
|
@ -423,14 +426,17 @@ const ProfileDetails: FunctionComponent<Props> = ({ selectedVersion, selectedPro
|
||||||
</TableHead>
|
</TableHead>
|
||||||
<TableBody>
|
<TableBody>
|
||||||
{buildResponse.images?.map((i) => {
|
{buildResponse.images?.map((i) => {
|
||||||
const downloadURL = `${config.image_url
|
// eslint-disable-next-line max-len
|
||||||
.replace('{target}', profile.target)
|
const downloadURL = `${config.asu_url}/store/${buildResponse.bin_dir}/${i.name}`;
|
||||||
.replace('{version}', profile.version_number)}/${i.name}`;
|
|
||||||
return (
|
return (
|
||||||
<TableRow key={downloadURL + i.type}>
|
<TableRow key={downloadURL + i.type}>
|
||||||
<TableCell>
|
<TableCell>
|
||||||
<Link href={downloadURL} target="_blank" data-testid="download_link">
|
<Link href={downloadURL} target="_blank" data-testid="download_link">
|
||||||
<Button endIcon={<CloudDownload />} variant="contained" color="primary">
|
<Button
|
||||||
|
endIcon={<CloudDownload />}
|
||||||
|
variant="contained"
|
||||||
|
color="primary"
|
||||||
|
>
|
||||||
{i.type}
|
{i.type}
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
@ -446,6 +452,27 @@ const ProfileDetails: FunctionComponent<Props> = ({ selectedVersion, selectedPro
|
||||||
})}
|
})}
|
||||||
</TableBody>
|
</TableBody>
|
||||||
</Table>
|
</Table>
|
||||||
|
</TableContainer>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<div>
|
||||||
|
<Accordion className="std-accordian">
|
||||||
|
<AccordionSummary expandIcon={<ExpandMore />}>Stderr</AccordionSummary>
|
||||||
|
<AccordionDetails>
|
||||||
|
<textarea rows={15} disabled className="std-textarea">
|
||||||
|
{buildResponse.stderr}
|
||||||
|
</textarea>
|
||||||
|
</AccordionDetails>
|
||||||
|
</Accordion>
|
||||||
|
<Accordion className="std-accordian">
|
||||||
|
<AccordionSummary expandIcon={<ExpandMore />}>Stdout</AccordionSummary>
|
||||||
|
<AccordionDetails>
|
||||||
|
<textarea rows={15} disabled className="std-textarea">
|
||||||
|
{buildResponse.stdout}
|
||||||
|
</textarea>
|
||||||
|
</AccordionDetails>
|
||||||
|
</Accordion>
|
||||||
|
</div>
|
||||||
</Box>
|
</Box>
|
||||||
)}
|
)}
|
||||||
</Box>
|
</Box>
|
||||||
|
|
|
||||||
|
|
@ -28,14 +28,14 @@ const Home: FunctionComponent = () => {
|
||||||
</Typography>
|
</Typography>
|
||||||
</Box>
|
</Box>
|
||||||
<Grid container spacing={2}>
|
<Grid container spacing={2}>
|
||||||
<Grid item xs>
|
<Grid item xs={12} md>
|
||||||
<ProfileSearch
|
<ProfileSearch
|
||||||
selectedVersion={selectedVersion}
|
selectedVersion={selectedVersion}
|
||||||
onProfileChange={setSelectedProfile}
|
onProfileChange={setSelectedProfile}
|
||||||
data-testid="profile-search"
|
data-testid="profile-search"
|
||||||
/>
|
/>
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid item xs={3}>
|
<Grid item xs={12} md={3}>
|
||||||
<VersionSelector
|
<VersionSelector
|
||||||
data-testid="version-selector"
|
data-testid="version-selector"
|
||||||
selectedVersion={selectedVersion}
|
selectedVersion={selectedVersion}
|
||||||
|
|
|
||||||
8
src/images/logo.svg
Normal file
8
src/images/logo.svg
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61.565 16.231">
|
||||||
|
<path d="M28.055 16.198h-.396l-.25-.928-.254.928h-.394l-.428-1.501h.378l.262.945.258-.945h.352l.258.945.261-.945h.381zM29.075 14.697h.37v1.5h-.37zM31.082 16.198l-.452-.516h-.108v.516h-.37v-1.501h.76c.163 0 .293.045.392.135.098.09.148.21.148.355a.47.47 0 01-.106.31.503.503 0 01-.289.168l.47.533zm-.21-.825a.24.24 0 00.158-.049.165.165 0 00.059-.132.162.162 0 00-.06-.13.24.24 0 00-.157-.05h-.35v.361zM33.29 16.198h-1.168v-1.501h1.162v.318h-.793v.282h.728v.3h-.728v.283h.8zM35.079 16.198h-1.11v-1.501h.37v1.178h.74zM36.902 16.198h-1.169v-1.501h1.162v.318h-.793v.282h.729v.3h-.729v.283h.8zM38.582 14.778c.11.077.18.184.208.32l-.362.073a.244.244 0 00-.094-.155.271.271 0 00-.168-.055.231.231 0 00-.146.044.134.134 0 00-.056.109c0 .065.04.107.12.125l.312.07c.275.06.412.206.412.436a.417.417 0 01-.176.358.736.736 0 01-.442.128.792.792 0 01-.444-.12.458.458 0 01-.212-.335l.38-.073c.036.148.135.221.296.221a.272.272 0 00.163-.042.13.13 0 00.06-.112.117.117 0 00-.031-.085c-.02-.021-.056-.037-.109-.048l-.313-.067c-.269-.06-.403-.206-.403-.434 0-.145.054-.26.163-.345a.68.68 0 01.43-.128c.164 0 .302.039.412.115M40.442 14.778c.11.077.18.184.208.32l-.363.073a.245.245 0 00-.094-.155.272.272 0 00-.168-.055.231.231 0 00-.146.044.133.133 0 00-.055.109c0 .065.04.107.12.125l.312.07c.274.06.412.206.412.436a.417.417 0 01-.177.358.736.736 0 01-.441.128.792.792 0 01-.445-.12.457.457 0 01-.212-.335l.381-.073c.036.148.135.221.296.221a.272.272 0 00.162-.042.13.13 0 00.06-.112.117.117 0 00-.03-.085c-.02-.021-.057-.037-.11-.048l-.313-.067c-.269-.06-.403-.206-.403-.434 0-.145.055-.26.163-.345a.68.68 0 01.43-.128c.165 0 .302.039.413.115M42.673 15.337h.704v.323h-.704v.537h-.37v-1.5h1.16v.325h-.79zM45.02 16.198l-.452-.516h-.107v.516h-.37v-1.501h.76c.162 0 .293.045.391.135.1.09.148.21.148.355a.47.47 0 01-.105.31.503.503 0 01-.289.168l.47.533zm-.21-.825a.24.24 0 00.158-.049.164.164 0 00.06-.132.16.16 0 00-.06-.13.24.24 0 00-.158-.05h-.349v.361zM47.23 16.198h-1.17v-1.501h1.163v.318h-.793v.282h.728v.3h-.728v.283h.8zM49.078 16.198h-1.17v-1.501h1.163v.318h-.793v.282h.728v.3h-.728v.283h.8zM50.35 14.697c.247 0 .445.069.596.207a.7.7 0 01.226.543.7.7 0 01-.226.544c-.15.137-.35.207-.596.207h-.593v-1.501zm-.013 1.18c.14 0 .253-.039.337-.117a.407.407 0 00.127-.313.407.407 0 00-.127-.312.475.475 0 00-.337-.118h-.21v.86zM53.145 14.892a.754.754 0 01.232.557.748.748 0 01-.232.555.78.78 0 01-.568.227.781.781 0 01-.568-.227.748.748 0 01-.231-.555c0-.22.077-.405.231-.557a.78.78 0 01.568-.229c.224 0 .414.077.568.229m-.26.875a.437.437 0 00.122-.318.444.444 0 00-.123-.32.41.41 0 00-.307-.128.409.409 0 00-.307.128.442.442 0 00-.123.32c0 .127.041.233.123.318a.41.41 0 00.307.126.411.411 0 00.307-.126M55.765 16.198h-.359v-.749l-.391.749h-.23l-.393-.753v.753h-.359v-1.501h.363l.504.93.504-.93h.36z" fill="#072342"/>
|
||||||
|
<path d="M6.442 8.063c-.58 0-1.051.472-1.051 1.05 0 .58.471 1.051 1.05 1.051a1.051 1.051 0 000-2.1M0 2.672l1.092 1.092a7.546 7.546 0 015.35-2.22c2.086 0 3.979.85 5.35 2.22l1.091-1.092A9.086 9.086 0 006.442 0 9.086 9.086 0 000 2.672" fill="#fff"/>
|
||||||
|
<path d="M1.965 4.637L3.057 5.73a4.773 4.773 0 013.385-1.404c1.32 0 2.517.537 3.384 1.404l1.092-1.092A6.313 6.313 0 006.442 2.78c-1.747 0-3.33.71-4.477 1.857" fill="#fff"/>
|
||||||
|
<path d="M3.93 6.603l1.092 1.092a2.001 2.001 0 012.838 0l1.093-1.092A3.541 3.541 0 006.442 5.56c-.98 0-1.868.398-2.511 1.042" fill="#fff"/>
|
||||||
|
<path d="M10.31 6.296a4.76 4.76 0 01.92 2.818 4.794 4.794 0 01-4.788 4.788 4.794 4.794 0 01-4.79-4.788c0-1.053.343-2.027.921-2.818L1.472 5.194a6.301 6.301 0 00-1.364 3.92 6.34 6.34 0 006.334 6.333 6.34 6.34 0 006.333-6.333c0-1.48-.511-2.84-1.364-3.92z" fill="#072342"/>
|
||||||
|
<path d="M21.344 7.734c.702.699 1.053 1.552 1.053 2.56 0 1-.35 1.847-1.053 2.542-.702.696-1.56 1.043-2.574 1.043-1.014 0-1.872-.347-2.574-1.043-.702-.695-1.053-1.543-1.053-2.543 0-1.007.351-1.86 1.053-2.559.702-.699 1.56-1.048 2.574-1.048 1.014 0 1.872.35 2.574 1.048m-.997 4.183c.429-.432.643-.973.643-1.624 0-.65-.214-1.195-.643-1.634a2.119 2.119 0 00-1.577-.658c-.623 0-1.15.22-1.577.658-.428.439-.642.983-.642 1.634 0 .65.214 1.192.642 1.624.428.431.954.647 1.577.647.624 0 1.15-.216 1.577-.647M28.342 9.22c.503.516.755 1.165.755 1.946 0 .781-.25 1.429-.75 1.942-.5.514-1.09.771-1.768.771-.67 0-1.236-.185-1.695-.555v2.148h-1.356V8.598h1.356v.41c.452-.376 1.017-.565 1.695-.565.672 0 1.26.259 1.763.776m-.966 3.063c.27-.278.406-.65.406-1.116 0-.465-.135-.839-.406-1.12-.27-.28-.615-.42-1.033-.42-.383 0-.723.143-1.017.43-.295.288-.442.658-.442 1.11 0 .452.147.82.442 1.105.294.284.634.426 1.017.426.418 0 .762-.138 1.033-.415M34.964 11.526H31.06c.068.363.22.653.457.868.236.216.512.324.827.324.582 0 1.007-.226 1.274-.678l1.213.257c-.22.52-.545.914-.976 1.181-.432.268-.936.401-1.511.401-.74 0-1.363-.253-1.87-.76-.507-.507-.76-1.158-.76-1.952 0-.795.254-1.448.765-1.958.51-.51 1.139-.766 1.885-.766.7 0 1.3.245 1.804.735.503.49.769 1.118.796 1.886zm-3.386-1.654a1.147 1.147 0 00-.478.698h2.477c-.082-.315-.233-.551-.452-.709a1.269 1.269 0 00-.76-.236c-.281 0-.543.082-.787.247M40.451 9.044c.377.401.566.92.566 1.557v3.124H39.66V10.89c0-.363-.094-.654-.282-.873-.189-.22-.44-.33-.756-.33-.85 0-1.274.59-1.274 1.768v2.271h-1.356V8.597h1.356v.463c.411-.411.949-.617 1.613-.617.617 0 1.114.2 1.49.601M49.381 13.725h-1.5l-1.336-4.644-1.346 4.644h-1.49L41.704 6.84h1.459l1.315 4.748 1.388-4.748h1.346l1.387 4.748 1.316-4.748h1.469zM55.608 8.567l-.072 1.305h-.298c-1.22 0-1.83.733-1.83 2.199v1.654h-1.356V8.597h1.357v.936c.465-.672 1.079-1.008 1.84-1.008.157 0 .276.014.359.042M60.293 13.5c-.472.253-.918.38-1.336.38-.63 0-1.123-.17-1.48-.51-.356-.339-.534-.85-.534-1.536V9.707h-1.1v-1.11h1.1V7.045H58.3v1.552h1.675v1.11H58.3v2.025c0 .589.25.883.75.883.26 0 .544-.082.853-.246zM61.565 6.688a.712.712 0 01-.709.705.71.71 0 01-.65-.982.709.709 0 011.303 0 .693.693 0 01.056.277m-.114 0a.587.587 0 00-.174-.421.592.592 0 00-.652-.127.6.6 0 00-.317.317.587.587 0 00-.046.23.587.587 0 00.363.55.587.587 0 00.462 0 .593.593 0 00.364-.55m-.458.292v-.166c0-.032-.007-.054-.02-.068-.014-.013-.04-.02-.08-.02h-.144v.254h-.133v-.646h.329c.061 0 .11.018.146.054.035.036.053.08.053.135a.168.168 0 01-.024.09.138.138 0 01-.072.057c.03.01.05.025.061.043.011.018.017.046.017.083v.184zm-.244-.535v.174h.17c.035 0 .06-.008.075-.024a.082.082 0 00.025-.061.092.092 0 00-.022-.065c-.015-.016-.04-.024-.074-.024z" fill="#fff"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 6.3 KiB |
Loading…
Add table
Add a link
Reference in a new issue