Compare commits
No commits in common. "51eb9c0cac1cce6199c02464eff8c1397f9f3d34" and "75a3d67402c88e11851f357911456847bd484986" have entirely different histories.
51eb9c0cac
...
75a3d67402
28 changed files with 146 additions and 831 deletions
|
|
@ -14,5 +14,5 @@ steps:
|
|||
image: golangci/golangci-lint:latest
|
||||
commands:
|
||||
- go mod download
|
||||
- golangci-lint run --timeout 5m
|
||||
- golangci-lint run -v --timeout 2m
|
||||
- go test -v ./src/...
|
||||
|
|
|
|||
2
.vscode/launch.json
vendored
2
.vscode/launch.json
vendored
|
|
@ -2,7 +2,7 @@
|
|||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "SEBRAUC server",
|
||||
"name": "Launch SEBRAUC server",
|
||||
"type": "go",
|
||||
"request": "launch",
|
||||
"mode": "auto",
|
||||
|
|
|
|||
1
go.mod
1
go.mod
|
|
@ -3,6 +3,7 @@ module code.thetadev.de/TSGRain/SEBRAUC
|
|||
go 1.16
|
||||
|
||||
require (
|
||||
code.thetadev.de/ThetaDev/gotry v0.3.2
|
||||
github.com/davecgh/go-spew v1.1.1 // indirect
|
||||
github.com/gofiber/fiber/v2 v2.21.0
|
||||
github.com/gofiber/websocket/v2 v2.0.12
|
||||
|
|
|
|||
2
go.sum
2
go.sum
|
|
@ -1,3 +1,5 @@
|
|||
code.thetadev.de/ThetaDev/gotry v0.3.2 h1:x5JOBszLbCo4FDe9V8ynHsV6EfvALV7wUqnJ/5vtjbw=
|
||||
code.thetadev.de/ThetaDev/gotry v0.3.2/go.mod h1:lKo6abOTMy5uO25ifG7JsGG3DYZd0XZd0xqa6y41BoU=
|
||||
github.com/andybalholm/brotli v1.0.2 h1:JKnhI/XQ75uFBTiuzXpzFrUriDPiZjlOSzh6wXogP0E=
|
||||
github.com/andybalholm/brotli v1.0.2/go.mod h1:loMXtMfwqflxFJPmdbJO0a3KNoPuLBgiu3qAvBg8x/Y=
|
||||
github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
|
||||
|
|
|
|||
16
openapi.yml
16
openapi.yml
|
|
@ -45,22 +45,6 @@ paths:
|
|||
schema:
|
||||
$ref: "#/components/schemas/StatusMessage"
|
||||
|
||||
/reboot:
|
||||
post:
|
||||
responses:
|
||||
"200":
|
||||
description: "OK"
|
||||
content:
|
||||
"application/json":
|
||||
schema:
|
||||
$ref: "#/components/schemas/StatusMessage"
|
||||
default:
|
||||
description: "Server error"
|
||||
content:
|
||||
"application/json":
|
||||
schema:
|
||||
$ref: "#/components/schemas/StatusMessage"
|
||||
|
||||
components:
|
||||
schemas:
|
||||
RaucStatus:
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@ package fixtures
|
|||
import (
|
||||
"os"
|
||||
"path/filepath"
|
||||
|
||||
"code.thetadev.de/ThetaDev/gotry/try"
|
||||
)
|
||||
|
||||
func doesFileExist(filepath string) bool {
|
||||
|
|
@ -11,10 +13,7 @@ func doesFileExist(filepath string) bool {
|
|||
}
|
||||
|
||||
func getProjectRoot() string {
|
||||
p, err := os.Getwd()
|
||||
if err != nil {
|
||||
panic(err)
|
||||
}
|
||||
p := try.String(os.Getwd())
|
||||
|
||||
for i := 0; i < 10; i++ {
|
||||
if doesFileExist(filepath.Join(p, "go.mod")) {
|
||||
|
|
@ -28,10 +27,7 @@ func getProjectRoot() string {
|
|||
|
||||
func CdProjectRoot() {
|
||||
root := getProjectRoot()
|
||||
err := os.Chdir(root)
|
||||
if err != nil {
|
||||
panic(err)
|
||||
}
|
||||
try.Check(os.Chdir(root))
|
||||
}
|
||||
|
||||
func GetTestfilesDir() string {
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import (
|
|||
"path/filepath"
|
||||
"testing"
|
||||
|
||||
"code.thetadev.de/ThetaDev/gotry/try"
|
||||
"github.com/stretchr/testify/assert"
|
||||
)
|
||||
|
||||
|
|
@ -16,10 +17,7 @@ func TestGetProjectRoot(t *testing.T) {
|
|||
|
||||
t.Run("subdir", func(t *testing.T) {
|
||||
root1 := getProjectRoot()
|
||||
err := os.Chdir(filepath.Join(root1, "src/rauc"))
|
||||
if err != nil {
|
||||
panic(err)
|
||||
}
|
||||
try.Check(os.Chdir(filepath.Join(root1, "src/rauc")))
|
||||
|
||||
root := getProjectRoot()
|
||||
assert.True(t, doesFileExist(filepath.Join(root, "go.sum")))
|
||||
|
|
@ -28,10 +26,7 @@ func TestGetProjectRoot(t *testing.T) {
|
|||
|
||||
func TestCdProjectRoot(t *testing.T) {
|
||||
CdProjectRoot()
|
||||
err := os.Chdir("src/rauc")
|
||||
if err != nil {
|
||||
panic(err)
|
||||
}
|
||||
try.Check(os.Chdir("src/rauc"))
|
||||
CdProjectRoot()
|
||||
assert.True(t, doesFileExist("go.sum"))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import (
|
|||
"bufio"
|
||||
"encoding/json"
|
||||
"fmt"
|
||||
"os"
|
||||
"os/exec"
|
||||
"regexp"
|
||||
"strconv"
|
||||
|
|
@ -34,11 +33,9 @@ type RaucStatus struct {
|
|||
Log string `json:"log"`
|
||||
}
|
||||
|
||||
func (r *Rauc) completed(updateFile string) {
|
||||
func (r *Rauc) completed() {
|
||||
r.status.Installing = false
|
||||
r.Broadcast <- r.GetStatusJson()
|
||||
|
||||
_ = os.Remove(updateFile)
|
||||
}
|
||||
|
||||
func (r *Rauc) RunRauc(updateFile string) error {
|
||||
|
|
@ -101,7 +98,7 @@ func (r *Rauc) RunRauc(updateFile string) error {
|
|||
|
||||
err := cmd.Start()
|
||||
if err != nil {
|
||||
r.completed(updateFile)
|
||||
r.completed()
|
||||
return err
|
||||
}
|
||||
|
||||
|
|
@ -110,7 +107,7 @@ func (r *Rauc) RunRauc(updateFile string) error {
|
|||
if err != nil {
|
||||
fmt.Printf("RAUC failed with %s\n", err)
|
||||
}
|
||||
r.completed(updateFile)
|
||||
r.completed()
|
||||
}()
|
||||
|
||||
return nil
|
||||
|
|
|
|||
|
|
@ -2,10 +2,8 @@ package server
|
|||
|
||||
import (
|
||||
"errors"
|
||||
"fmt"
|
||||
"net/http"
|
||||
"strings"
|
||||
"time"
|
||||
|
||||
"code.thetadev.de/TSGRain/SEBRAUC/src/rauc"
|
||||
"code.thetadev.de/TSGRain/SEBRAUC/src/util"
|
||||
|
|
@ -21,8 +19,6 @@ type SEBRAUCServer struct {
|
|||
address string
|
||||
raucUpdater *rauc.Rauc
|
||||
hub *MessageHub
|
||||
tmpdir string
|
||||
currentId int
|
||||
}
|
||||
|
||||
type statusMessage struct {
|
||||
|
|
@ -37,21 +33,15 @@ func NewServer(address string) *SEBRAUCServer {
|
|||
Command: "go",
|
||||
Args: []string{
|
||||
"run",
|
||||
"code.thetadev.de/TSGRain/SEBRAUC/src/fixtures/rauc_mock",
|
||||
"code.thetadev.de/TSGRain/SEBRAUC/src/fixtures/rauc_mock", "fail",
|
||||
},
|
||||
Broadcast: hub.Broadcast,
|
||||
}
|
||||
|
||||
tmpdir, err := util.NewTmpdir()
|
||||
if err != nil {
|
||||
panic(err)
|
||||
}
|
||||
|
||||
return &SEBRAUCServer{
|
||||
address: address,
|
||||
raucUpdater: raucUpdater,
|
||||
hub: hub,
|
||||
tmpdir: tmpdir,
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -60,7 +50,6 @@ func (srv *SEBRAUCServer) Run() error {
|
|||
AppName: "SEBRAUC",
|
||||
BodyLimit: 1024 * 1024 * 1024,
|
||||
ErrorHandler: errorHandler,
|
||||
DisableStartupMessage: true,
|
||||
})
|
||||
|
||||
app.Use(logger.New())
|
||||
|
|
@ -86,9 +75,9 @@ func (srv *SEBRAUCServer) Run() error {
|
|||
|
||||
// ROUTES
|
||||
app.Get("/api/ws", websocket.New(srv.hub.Handler))
|
||||
app.Get("/api/test", srv.controllerTest)
|
||||
app.Post("/api/update", srv.controllerUpdate)
|
||||
app.Get("/api/status", srv.controllerStatus)
|
||||
app.Post("/api/reboot", srv.controllerReboot)
|
||||
|
||||
// Start messaging hub
|
||||
go srv.hub.Run()
|
||||
|
|
@ -101,16 +90,12 @@ func (srv *SEBRAUCServer) controllerUpdate(c *fiber.Ctx) error {
|
|||
if err != nil {
|
||||
return err
|
||||
}
|
||||
|
||||
srv.currentId++
|
||||
updateFile := fmt.Sprintf("%s/update_%d.raucb", srv.tmpdir, srv.currentId)
|
||||
|
||||
err = c.SaveFile(file, updateFile)
|
||||
err = c.SaveFile(file, "./update.raucb")
|
||||
if err != nil {
|
||||
return err
|
||||
}
|
||||
|
||||
err = srv.raucUpdater.RunRauc(updateFile)
|
||||
err = srv.raucUpdater.RunRauc("./update.raucb")
|
||||
if err == nil {
|
||||
writeStatus(c, true, "Update started")
|
||||
} else if errors.Is(err, util.ErrAlreadyRunning) {
|
||||
|
|
@ -127,10 +112,15 @@ func (srv *SEBRAUCServer) controllerStatus(c *fiber.Ctx) error {
|
|||
return nil
|
||||
}
|
||||
|
||||
func (srv *SEBRAUCServer) controllerReboot(c *fiber.Ctx) error {
|
||||
go util.Reboot(5 * time.Second)
|
||||
|
||||
writeStatus(c, true, "System is rebooting")
|
||||
func (srv *SEBRAUCServer) controllerTest(c *fiber.Ctx) error {
|
||||
err := srv.raucUpdater.RunRauc("./update.raucb")
|
||||
if err == nil {
|
||||
writeStatus(c, true, "Update started")
|
||||
} else if errors.Is(err, util.ErrAlreadyRunning) {
|
||||
return fiber.NewError(fiber.StatusConflict, "already running")
|
||||
} else {
|
||||
return err
|
||||
}
|
||||
return nil
|
||||
}
|
||||
|
||||
|
|
@ -138,6 +128,7 @@ func errorHandler(c *fiber.Ctx, err error) error {
|
|||
// API error handling
|
||||
if strings.HasPrefix(c.Path(), "/api") {
|
||||
writeStatus(c, false, err.Error())
|
||||
return nil
|
||||
}
|
||||
return err
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,70 +1,8 @@
|
|||
package util
|
||||
|
||||
import (
|
||||
"crypto/rand"
|
||||
"fmt"
|
||||
"os"
|
||||
"os/exec"
|
||||
"path/filepath"
|
||||
"strings"
|
||||
"time"
|
||||
)
|
||||
|
||||
const tmpdirPrefix = "sebrauc"
|
||||
import "os"
|
||||
|
||||
func DoesFileExist(filepath string) bool {
|
||||
_, err := os.Stat(filepath)
|
||||
return !os.IsNotExist(err)
|
||||
}
|
||||
|
||||
func CreateDirIfNotExists(dirpath string) error {
|
||||
if _, err := os.Stat(dirpath); os.IsNotExist(err) {
|
||||
createErr := os.MkdirAll(dirpath, 0o777)
|
||||
if createErr != nil {
|
||||
return createErr
|
||||
}
|
||||
}
|
||||
return nil
|
||||
}
|
||||
|
||||
func NewTmpdir() (tmpdir string, err error) {
|
||||
for {
|
||||
bts := make([]byte, 16)
|
||||
_, err = rand.Read(bts)
|
||||
if err != nil {
|
||||
return "", err
|
||||
}
|
||||
|
||||
tmpdir = filepath.Join(os.TempDir(), fmt.Sprintf("%s_%x", tmpdirPrefix, bts))
|
||||
|
||||
if !DoesFileExist(tmpdir) {
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
err = CreateDirIfNotExists(tmpdir)
|
||||
return
|
||||
}
|
||||
|
||||
func PurgeTmpdirs() (count int) {
|
||||
dirs, _ := os.ReadDir(os.TempDir())
|
||||
|
||||
for _, de := range dirs {
|
||||
if !de.IsDir() {
|
||||
continue
|
||||
}
|
||||
if strings.HasPrefix(de.Name(), tmpdirPrefix+"_") {
|
||||
err := os.RemoveAll(filepath.Join(os.TempDir(), de.Name()))
|
||||
if err == nil {
|
||||
count++
|
||||
}
|
||||
}
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
func Reboot(t time.Duration) {
|
||||
time.Sleep(t)
|
||||
cmd := exec.Command("shutdown", "-r", "0")
|
||||
_ = cmd.Run()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,9 @@
|
|||
package util
|
||||
|
||||
import (
|
||||
"os"
|
||||
"path/filepath"
|
||||
"testing"
|
||||
|
||||
"code.thetadev.de/TSGRain/SEBRAUC/src/fixtures"
|
||||
"github.com/stretchr/testify/assert"
|
||||
)
|
||||
|
||||
func TestDoesFileExist(t *testing.T) {
|
||||
|
|
@ -39,30 +36,3 @@ func TestDoesFileExist(t *testing.T) {
|
|||
})
|
||||
}
|
||||
}
|
||||
|
||||
func TestTmpdir(t *testing.T) {
|
||||
td, err := NewTmpdir()
|
||||
if err != nil {
|
||||
panic(err)
|
||||
}
|
||||
|
||||
tfile := filepath.Join(td, "test.txt")
|
||||
f, err := os.Create(tfile)
|
||||
if err != nil {
|
||||
panic(err)
|
||||
}
|
||||
|
||||
_, err = f.WriteString("Hello")
|
||||
if err != nil {
|
||||
panic(err)
|
||||
}
|
||||
err = f.Close()
|
||||
if err != nil {
|
||||
panic(err)
|
||||
}
|
||||
|
||||
assert.FileExists(t, tfile)
|
||||
|
||||
assert.Equal(t, 1, PurgeTmpdirs())
|
||||
assert.NoFileExists(t, tfile)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
VITE_API_HOST=127.0.0.1:8080
|
||||
|
|
@ -7,8 +7,6 @@
|
|||
"serve": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@mdi/js": "^6.5.95",
|
||||
"axios": "^0.24.0",
|
||||
"preact": "^10.5.15"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
lockfileVersion: 5.3
|
||||
|
||||
specifiers:
|
||||
"@mdi/js": ^6.5.95
|
||||
"@preact/preset-vite": ^2.1.5
|
||||
axios: ^0.24.0
|
||||
preact: ^10.5.15
|
||||
prettier: ^2.4.1
|
||||
sass: ^1.43.4
|
||||
|
|
@ -11,8 +9,6 @@ specifiers:
|
|||
vite: ^2.6.14
|
||||
|
||||
dependencies:
|
||||
"@mdi/js": 6.5.95
|
||||
axios: 0.24.0
|
||||
preact: 10.5.15
|
||||
|
||||
devDependencies:
|
||||
|
|
@ -351,13 +347,6 @@ packages:
|
|||
to-fast-properties: 2.0.0
|
||||
dev: true
|
||||
|
||||
/@mdi/js/6.5.95:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-x/bwEoAGP+Mo10Dfk5audNIPi7Yz8ZBrILcbXLW3ShOI/njpgodzpgpC2WYK3D2ZSC392peRRemIFb/JsyzzYQ==,
|
||||
}
|
||||
dev: false
|
||||
|
||||
/@preact/preset-vite/2.1.5_preact@10.5.15+vite@2.6.14:
|
||||
resolution:
|
||||
{
|
||||
|
|
@ -456,17 +445,6 @@ packages:
|
|||
picomatch: 2.3.0
|
||||
dev: true
|
||||
|
||||
/axios/0.24.0:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==,
|
||||
}
|
||||
dependencies:
|
||||
follow-redirects: 1.14.5
|
||||
transitivePeerDependencies:
|
||||
- debug
|
||||
dev: false
|
||||
|
||||
/babel-plugin-transform-hook-names/1.0.2:
|
||||
resolution:
|
||||
{
|
||||
|
|
@ -834,19 +812,6 @@ packages:
|
|||
to-regex-range: 5.0.1
|
||||
dev: true
|
||||
|
||||
/follow-redirects/1.14.5:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-wtphSXy7d4/OR+MvIFbCVBDzZ5520qV8XfPklSN5QtxuMUJZ+b0Wnst1e1lCDocfzuCkHqj8k0FpZqO+UIaKNA==,
|
||||
}
|
||||
engines: {node: ">=4.0"}
|
||||
peerDependencies:
|
||||
debug: "*"
|
||||
peerDependenciesMeta:
|
||||
debug:
|
||||
optional: true
|
||||
dev: false
|
||||
|
||||
/fsevents/2.3.2:
|
||||
resolution:
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
.dropzone {
|
||||
&.highlight {
|
||||
filter: brightness(0.5);
|
||||
}
|
||||
|
||||
.fileholder {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,119 +0,0 @@
|
|||
import {Component, createRef, JSX, ComponentChild, ComponentChildren} from "preact"
|
||||
import "./Dropzone.scss"
|
||||
|
||||
type Props = {
|
||||
disabled: boolean
|
||||
clickable: boolean
|
||||
multiple: boolean
|
||||
accept?: string
|
||||
onFilesAdded?: (files: File[]) => void
|
||||
|
||||
children?: ComponentChild | ComponentChildren
|
||||
}
|
||||
|
||||
type State = {
|
||||
highlight: boolean
|
||||
}
|
||||
|
||||
export default class Dropzone extends Component<Props, State> {
|
||||
static defaultProps = {
|
||||
disabled: false,
|
||||
clickable: false,
|
||||
multiple: false,
|
||||
}
|
||||
|
||||
private fileInputRef = createRef<HTMLInputElement>()
|
||||
|
||||
openFileDialog() {
|
||||
this.fileInputRef.current?.click()
|
||||
}
|
||||
|
||||
reset() {
|
||||
const input = this.fileInputRef.current
|
||||
if (input === null) return
|
||||
input.value = ""
|
||||
}
|
||||
|
||||
private onClick = () => {
|
||||
if (this.props.disabled || !this.props.clickable) return
|
||||
this.openFileDialog()
|
||||
}
|
||||
|
||||
private onFilesAdded = (evt: JSX.TargetedEvent) => {
|
||||
if (this.props.disabled || evt.target === null) return
|
||||
|
||||
const input = evt.target as HTMLInputElement
|
||||
const files = input.files
|
||||
|
||||
if (this.props.onFilesAdded) {
|
||||
const array = this.fileListToArray(files)
|
||||
this.props.onFilesAdded(array)
|
||||
}
|
||||
}
|
||||
|
||||
private onDragOver = (evt: DragEvent) => {
|
||||
evt.preventDefault()
|
||||
|
||||
if (this.props.disabled) return
|
||||
|
||||
this.setState({highlight: true})
|
||||
}
|
||||
|
||||
private onDragLeave = () => {
|
||||
this.setState({highlight: false})
|
||||
}
|
||||
|
||||
private onDrop = (evt: DragEvent) => {
|
||||
evt.preventDefault()
|
||||
this.setState({highlight: false})
|
||||
|
||||
if (this.props.disabled || evt.dataTransfer === null) return
|
||||
|
||||
const files = evt.dataTransfer.files
|
||||
|
||||
if (!this.props.multiple && files.length > 1) return
|
||||
|
||||
if (this.props.onFilesAdded) {
|
||||
const array = this.fileListToArray(files)
|
||||
this.props.onFilesAdded(array)
|
||||
}
|
||||
}
|
||||
|
||||
private fileListToArray(list: FileList | null): File[] {
|
||||
const array: File[] = []
|
||||
if (list === null) return array
|
||||
|
||||
for (var i = 0; i < list.length; i++) {
|
||||
array.push(list.item(i)!)
|
||||
}
|
||||
return array
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div
|
||||
class={`dropzone ${this.state.highlight ? "highlight" : ""}`}
|
||||
onDragOver={this.onDragOver}
|
||||
onDragLeave={this.onDragLeave}
|
||||
onDrop={this.onDrop}
|
||||
onClick={this.onClick}
|
||||
style={{
|
||||
cursor:
|
||||
!this.props.disabled && this.props.clickable
|
||||
? "pointer"
|
||||
: "default",
|
||||
}}
|
||||
>
|
||||
<input
|
||||
ref={this.fileInputRef}
|
||||
class="fileholder"
|
||||
type="file"
|
||||
multiple={this.props.multiple}
|
||||
accept={this.props.accept}
|
||||
onInput={this.onFilesAdded}
|
||||
/>
|
||||
{this.props.children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
.icon {
|
||||
vertical-align: sub;
|
||||
|
||||
> svg {
|
||||
color: inherit;
|
||||
fill: currentColor;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
import {Component} from "preact"
|
||||
import "./Icon.scss"
|
||||
|
||||
type Props = {
|
||||
icon: string
|
||||
size: number
|
||||
color?: string
|
||||
}
|
||||
|
||||
export default class Icon extends Component<Props> {
|
||||
static defaultProps = {
|
||||
size: 24,
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<span class="icon" style={{color: this.props.color}}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
style={`height: ${this.props.size}px; width: ${this.props.size}px;`}
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d={this.props.icon} />
|
||||
</svg>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
}
|
||||
7
ui/src/components/LoadingText.tsx
Normal file
7
ui/src/components/LoadingText.tsx
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
interface Props {
|
||||
isLoading: boolean
|
||||
}
|
||||
|
||||
export default function LoadingText(props: Props) {
|
||||
return <div>{props.isLoading ? <p>Loading...</p> : <h2>Fertig geladen</h2>}</div>
|
||||
}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
.progress-box {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
position: relative;
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
.progress-path {
|
||||
transition: stroke-dasharray 0.5s;
|
||||
}
|
||||
|
||||
circle {
|
||||
transition: fill 0.5s;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
height: 64px;
|
||||
width: 64px;
|
||||
|
||||
color: white;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
|
||||
&:hover {
|
||||
background-color: #444;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
import {Component, ComponentChild, ComponentChildren} from "preact"
|
||||
import "./ProgressCircle.scss"
|
||||
|
||||
type Props = {
|
||||
ready: boolean
|
||||
progress: number
|
||||
color: string
|
||||
|
||||
children?: ComponentChild | ComponentChildren
|
||||
}
|
||||
|
||||
export default class ProgressCircle extends Component<Props> {
|
||||
static defaultProps = {
|
||||
ready: false,
|
||||
progress: 0,
|
||||
color: "#FDB900",
|
||||
}
|
||||
|
||||
render() {
|
||||
const percentage = this.props.ready ? 0 : this.props.progress
|
||||
const visible = !this.props.ready && this.props.progress > 0
|
||||
|
||||
return (
|
||||
<div class="progress-box">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||
<circle cx="50" cy="50" r="45" fill={this.props.color} />
|
||||
|
||||
{visible ? (
|
||||
<path
|
||||
class="progress-path"
|
||||
stroke-linecap="round"
|
||||
stroke-width="5"
|
||||
stroke="#fff"
|
||||
fill="none"
|
||||
d="M50 10
|
||||
a 40 40 0 0 1 0 80
|
||||
a 40 40 0 0 1 0 -80"
|
||||
stroke-dasharray={`${percentage * 2.512}, 251.2`}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{visible ? (
|
||||
<text
|
||||
id="count"
|
||||
x="50"
|
||||
y="50"
|
||||
text-anchor="middle"
|
||||
dy="7"
|
||||
font-size="20"
|
||||
fill="#fff"
|
||||
>
|
||||
{percentage}%
|
||||
</text>
|
||||
) : null}
|
||||
</svg>
|
||||
{visible ? null : this.props.children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
import {Component} from "preact"
|
||||
import {mdiCheckCircleOutline, mdiTriangleOutline} from "@mdi/js"
|
||||
import Icon from "../Icon/Icon"
|
||||
|
||||
type Props = {
|
||||
type: string
|
||||
source?: string
|
||||
message: string
|
||||
onClick?: () => void
|
||||
}
|
||||
|
||||
export default class Alert extends Component<Props> {
|
||||
static defaultProps = {
|
||||
type: "error",
|
||||
}
|
||||
|
||||
private stripMessage(message: string): string {
|
||||
return message.replace(/^error:/i, "").trim()
|
||||
}
|
||||
|
||||
render() {
|
||||
let msg = ""
|
||||
if (this.props.source !== undefined) msg += `${this.props.source} error: `
|
||||
msg += this.stripMessage(this.props.message)
|
||||
|
||||
return (
|
||||
<p
|
||||
class={`alert ${this.props.onClick !== undefined ? "clickable" : ""}`}
|
||||
onClick={this.props.onClick}
|
||||
>
|
||||
{(() => {
|
||||
switch (this.props.type) {
|
||||
case "success":
|
||||
return <Icon icon={mdiCheckCircleOutline} color="#148420" />
|
||||
default:
|
||||
return <Icon icon={mdiTriangleOutline} color="#FF0039" />
|
||||
}
|
||||
})()}
|
||||
|
||||
{msg}
|
||||
</p>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
.uploader {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
margin: 0 auto;
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
|
||||
> * {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
padding: 15px 8px;
|
||||
|
||||
text-align: center;
|
||||
|
||||
border: 3px solid #fff;
|
||||
border-radius: 16px;
|
||||
|
||||
.top {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.alert {
|
||||
margin: 0.6em 0;
|
||||
// border: 2px solid transparent;
|
||||
border-radius: 16px;
|
||||
|
||||
.icon {
|
||||
margin-right: 0.4em;
|
||||
}
|
||||
|
||||
&.clickable:hover {
|
||||
cursor: pointer;
|
||||
background: #ffffff66;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,267 +0,0 @@
|
|||
import {Component, createRef} from "preact"
|
||||
import {mdiUpload} from "@mdi/js"
|
||||
import Dropzone from "../Dropzone/Dropzone"
|
||||
import ProgressCircle from "../ProgressCircle/ProgressCircle"
|
||||
import Icon from "../Icon/Icon"
|
||||
import "./Upload.scss"
|
||||
import axios from "axios"
|
||||
import Alert from "./Alert"
|
||||
|
||||
class UploadStatus {
|
||||
uploading = false
|
||||
total = 0
|
||||
loaded = 0
|
||||
lastError = ""
|
||||
|
||||
constructor(uploading: boolean, total = 0, loaded = 0, lastError = "") {
|
||||
this.uploading = uploading
|
||||
this.total = total
|
||||
this.loaded = loaded
|
||||
this.lastError = lastError
|
||||
}
|
||||
|
||||
static fromProgressEvent(progressEvent: {
|
||||
loaded: number
|
||||
total: number
|
||||
}): UploadStatus {
|
||||
return new UploadStatus(true, progressEvent.total, progressEvent.loaded)
|
||||
}
|
||||
}
|
||||
|
||||
class RaucStatus {
|
||||
installing = false
|
||||
percent = 0
|
||||
message = ""
|
||||
last_error = ""
|
||||
log = ""
|
||||
}
|
||||
|
||||
type Props = {}
|
||||
|
||||
type State = {
|
||||
uploadStatus: UploadStatus
|
||||
uploadFilename: string
|
||||
raucStatus: RaucStatus
|
||||
wsConnected: boolean
|
||||
}
|
||||
|
||||
export default class Upload extends Component<Props, State> {
|
||||
private apiUrl: string
|
||||
private wsUrl: string
|
||||
|
||||
private dropzoneRef = createRef<Dropzone>()
|
||||
private conn: WebSocket | undefined
|
||||
|
||||
constructor(props?: Props | undefined, context?: any) {
|
||||
super(props, context)
|
||||
|
||||
// Get API urls
|
||||
let apiHost = document.location.host
|
||||
const httpProto = document.location.protocol
|
||||
const wsProto = httpProto === "https:" ? "wss:" : "ws:"
|
||||
|
||||
if (import.meta.env.VITE_API_HOST !== undefined) {
|
||||
apiHost = import.meta.env.VITE_API_HOST as string
|
||||
}
|
||||
|
||||
this.apiUrl = `${httpProto}//${apiHost}/api`
|
||||
this.wsUrl = `${wsProto}//${apiHost}/api/ws`
|
||||
|
||||
this.state = {
|
||||
uploadStatus: new UploadStatus(false),
|
||||
uploadFilename: "",
|
||||
raucStatus: new RaucStatus(),
|
||||
wsConnected: false,
|
||||
}
|
||||
|
||||
this.connectWebsocket()
|
||||
}
|
||||
|
||||
private buttonClick = () => {
|
||||
if (!this.acceptUploads()) return
|
||||
|
||||
this.dropzoneRef.current?.openFileDialog()
|
||||
}
|
||||
|
||||
private onFilesAdded = (files: File[]) => {
|
||||
if (files.length === 0) return
|
||||
const newFile = files[0]
|
||||
|
||||
const formData = new FormData()
|
||||
formData.append("updateFile", newFile)
|
||||
|
||||
this.setState({
|
||||
uploadStatus: new UploadStatus(true, newFile.size, 0),
|
||||
uploadFilename: newFile.name,
|
||||
})
|
||||
|
||||
axios
|
||||
.post(this.apiUrl + "/update", formData, {
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
onUploadProgress: (progressEvent: {loaded: number; total: number}) => {
|
||||
this.setState({
|
||||
uploadStatus: UploadStatus.fromProgressEvent(progressEvent),
|
||||
})
|
||||
},
|
||||
})
|
||||
.then(() => {
|
||||
this.resetUpload()
|
||||
})
|
||||
.catch((reason: any) => {
|
||||
this.resetUpload(String(reason))
|
||||
})
|
||||
}
|
||||
|
||||
private resetUpload = (lastError = "") => {
|
||||
this.setState({
|
||||
uploadStatus: new UploadStatus(false, 0, 0, lastError),
|
||||
})
|
||||
this.dropzoneRef.current?.reset()
|
||||
}
|
||||
|
||||
private connectWebsocket = () => {
|
||||
if (window.WebSocket) {
|
||||
this.conn = new WebSocket(this.wsUrl)
|
||||
this.conn.onopen = () => {
|
||||
this.setState({wsConnected: true})
|
||||
console.log("WS connected")
|
||||
}
|
||||
this.conn.onclose = () => {
|
||||
this.setState({wsConnected: false})
|
||||
console.log("WS connection closed")
|
||||
window.setTimeout(this.connectWebsocket, 3000)
|
||||
}
|
||||
this.conn.onmessage = (evt) => {
|
||||
var messages = evt.data.split("\n")
|
||||
for (var i = 0; i < messages.length; i++) {
|
||||
this.setState({
|
||||
raucStatus: Object.assign(
|
||||
new RaucStatus(),
|
||||
JSON.parse(messages[i])
|
||||
),
|
||||
})
|
||||
|
||||
console.log(this.state.raucStatus)
|
||||
}
|
||||
}
|
||||
} else {
|
||||
console.log("Your browser does not support WebSockets")
|
||||
}
|
||||
}
|
||||
|
||||
private triggerReboot = () => {
|
||||
const res = confirm("Reboot the system?")
|
||||
if (!res) return
|
||||
|
||||
axios
|
||||
.post(this.apiUrl + "/reboot")
|
||||
.then(() => {
|
||||
alert("System is rebooting")
|
||||
})
|
||||
.catch((reason: any) => {
|
||||
alert(String(reason))
|
||||
})
|
||||
}
|
||||
|
||||
private acceptUploads(): boolean {
|
||||
return !this.state.uploadStatus.uploading && !this.state.raucStatus.installing
|
||||
}
|
||||
|
||||
private uploadPercentage(): number {
|
||||
if (this.state.uploadStatus.uploading && this.state.uploadStatus.total > 0) {
|
||||
return Math.round(
|
||||
(this.state.uploadStatus.loaded / this.state.uploadStatus.total) * 100
|
||||
)
|
||||
}
|
||||
return 0
|
||||
}
|
||||
|
||||
private circleColor(): string {
|
||||
if (this.state.raucStatus.installing) return "#FF0039"
|
||||
if (this.state.uploadStatus.uploading) return "#148420"
|
||||
return "#1f85de"
|
||||
}
|
||||
|
||||
private circlePercentage(): number {
|
||||
if (this.acceptUploads()) return 0
|
||||
if (this.state.raucStatus.installing) return this.state.raucStatus.percent
|
||||
if (this.state.uploadStatus.uploading) return this.uploadPercentage()
|
||||
return 0
|
||||
}
|
||||
|
||||
render() {
|
||||
const acceptUploads = this.acceptUploads()
|
||||
const circleColor = this.circleColor()
|
||||
const circlePercentage = this.circlePercentage()
|
||||
|
||||
let topText = ""
|
||||
let bottomText = ""
|
||||
|
||||
if (this.state.uploadStatus.uploading) {
|
||||
topText = "Uploading"
|
||||
bottomText = `${this.state.uploadFilename} ${this.state.uploadStatus.loaded} / ${this.state.uploadStatus.total} bytes`
|
||||
} else if (this.state.raucStatus.installing) {
|
||||
topText = "Upadating firmware"
|
||||
bottomText = this.state.raucStatus.message
|
||||
} else {
|
||||
topText = "Upload firmware package"
|
||||
}
|
||||
|
||||
return (
|
||||
<div class="uploader">
|
||||
<div class="card">
|
||||
<div>
|
||||
<span class="top">{topText}</span>
|
||||
</div>
|
||||
<Dropzone
|
||||
ref={this.dropzoneRef}
|
||||
onFilesAdded={this.onFilesAdded}
|
||||
disabled={!acceptUploads}
|
||||
accept=".raucb"
|
||||
>
|
||||
<ProgressCircle
|
||||
ready={acceptUploads}
|
||||
progress={circlePercentage}
|
||||
color={circleColor}
|
||||
>
|
||||
<button onClick={this.buttonClick}>
|
||||
<Icon icon={mdiUpload} size={50} />
|
||||
</button>
|
||||
</ProgressCircle>
|
||||
</Dropzone>
|
||||
<div>
|
||||
<span>{bottomText}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
{this.state.wsConnected ? null : <Alert message="No connection" />}
|
||||
|
||||
{!this.state.raucStatus.installing &&
|
||||
this.state.raucStatus.percent === 100 &&
|
||||
this.state.raucStatus.last_error === "" ? (
|
||||
<Alert
|
||||
type="success"
|
||||
message="Update completed. Click to reboot."
|
||||
onClick={this.triggerReboot}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{this.state.uploadStatus.lastError ? (
|
||||
<Alert
|
||||
source="Upload"
|
||||
message={this.state.uploadStatus.lastError}
|
||||
/>
|
||||
) : null}
|
||||
{this.state.raucStatus.last_error ? (
|
||||
<Alert
|
||||
source="Update"
|
||||
message={this.state.raucStatus.last_error}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +1,53 @@
|
|||
import {Component} from "preact"
|
||||
import Upload from "./Upload/Upload"
|
||||
import LoadingText from "./LoadingText"
|
||||
import {useState} from "preact/hooks"
|
||||
|
||||
export default class App extends Component {
|
||||
render() {
|
||||
type ImageDataT = {
|
||||
id: string
|
||||
author: string
|
||||
width: number
|
||||
height: number
|
||||
url: string
|
||||
download_url: string
|
||||
}
|
||||
|
||||
type ImageProps = {
|
||||
image?: ImageDataT
|
||||
}
|
||||
|
||||
function Image(props: ImageProps) {
|
||||
if (props.image === undefined) {
|
||||
return (
|
||||
<div>
|
||||
<Upload />
|
||||
<div class="Image">
|
||||
<LoadingText isLoading={true} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<div class="Image">
|
||||
<img alt="dog" src={props.image.download_url} width={350} />
|
||||
<p>Fotograf: {props.image.author}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
const [imageData, setImageData] = useState<ImageDataT | undefined>(undefined)
|
||||
|
||||
const fetchImageData = async () => {
|
||||
const response = await fetch("https://picsum.photos/id/237/info")
|
||||
const data = await response.json()
|
||||
|
||||
setImageData(data)
|
||||
|
||||
console.log({data})
|
||||
}
|
||||
|
||||
return (
|
||||
<div class="App">
|
||||
<h1>React Tutorial</h1>
|
||||
<h2>Time now: {new Date().toISOString()}</h2>
|
||||
<Image image={imageData} />
|
||||
<button onClick={fetchImageData}>Hier klicken</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
47
ui/src/components/logo.tsx
Normal file
47
ui/src/components/logo.tsx
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
export const Logo = () => (
|
||||
<svg
|
||||
class="logo"
|
||||
height="180px"
|
||||
viewBox="-256 -256 1800 512"
|
||||
title="Preact"
|
||||
style="
|
||||
display: inline-block;
|
||||
margin: -0.25em 0px 0px;
|
||||
vertical-align: middle;
|
||||
"
|
||||
>
|
||||
<path
|
||||
d="M0,-256 221.7025033688164,-128 221.7025033688164,128 0,256 -221.7025033688164,128 -221.7025033688164,-128z"
|
||||
fill="white"
|
||||
/>
|
||||
<ellipse
|
||||
cx="0"
|
||||
cy="0"
|
||||
rx="75px"
|
||||
ry="196px"
|
||||
stroke-width="16px"
|
||||
stroke-dasharray="365.2604060943886 81.7395939056114"
|
||||
stroke-dashoffset="1131.9689975248618"
|
||||
fill="none"
|
||||
stroke="#673ab8"
|
||||
transform="rotate(52)"
|
||||
/>
|
||||
<ellipse
|
||||
cx="0"
|
||||
cy="0"
|
||||
rx="75px"
|
||||
ry="196px"
|
||||
stroke-width="16px"
|
||||
stroke-dasharray="403.1225208830963 43.87747911690373"
|
||||
stroke-dashoffset="-963.0079812482553"
|
||||
fill="none"
|
||||
stroke="#673ab8"
|
||||
transform="rotate(-52)"
|
||||
/>
|
||||
<circle cx="0" cy="0" r="34" fill="#673ab8" />
|
||||
<path
|
||||
fill="white"
|
||||
d="M289.85 25.25L289.85 125L272 125L272-122.63L335.88-122.63Q379.45-122.63 401.59-103.55Q423.73-84.48 423.73-49.13Q423.73-32.85 417.69-19.20Q411.65-5.55 400.27 4.34Q388.90 14.22 372.63 19.74Q356.35 25.25 335.88 25.25L289.85 25.25M289.85 10.90L335.88 10.90Q352.33 10.90 365.27 6.35Q378.23 1.80 387.24-6.25Q396.25-14.30 401.06-25.24Q405.88-36.18 405.88-49.13Q405.88-77.65 388.29-93.05Q370.70-108.45 335.88-108.45L289.85-108.45L289.85 10.90ZM497.58 13.00L497.58 125L479.73 125L479.73-122.63L542.90-122.63Q585.78-122.63 606.95-106.09Q628.13-89.55 628.13-57.53Q628.13-43.35 623.23-31.63Q618.33-19.90 609.14-11.06Q599.95-2.23 587 3.46Q574.05 9.15 557.78 10.90Q561.98 13.52 565.30 17.90L650.53 125L634.95 125Q632.15 125 630.14 123.95Q628.13 122.90 626.20 120.45L546.93 20.00Q543.95 16.15 540.54 14.57Q537.13 13.00 529.95 13.00L497.58 13.00M497.58-0.30L540.63-0.30Q557.08-0.30 570.11-4.24Q583.15-8.18 592.16-15.53Q601.18-22.88 605.90-33.20Q610.63-43.53 610.63-56.48Q610.63-82.90 593.30-95.68Q575.98-108.45 542.90-108.45L497.58-108.45L497.58-0.30ZM843.73-122.63L843.73-107.75L713.35-107.75L713.35-7.65L821.85-7.65L821.85 6.87L713.35 6.87L713.35 110.13L843.73 110.13L843.73 125L695.33 125L695.33-122.63L843.73-122.63ZM1088.55 125L1074.73 125Q1072.28 125 1070.70 123.69Q1069.13 122.38 1068.25 120.28L1039.03 48.35L917.40 48.35L888.35 120.28Q887.65 122.20 885.90 123.60Q884.15 125 881.70 125L868.05 125L969.38-122.63L987.23-122.63L1088.55 125M922.83 35.05L1033.78 35.05L983.20-90.08Q981.98-93.05 980.75-96.81Q979.53-100.58 978.30-104.78Q977.08-100.58 975.85-96.81Q974.63-93.05 973.40-89.90L922.83 35.05ZM1302.40 83.35Q1304.15 83.35 1305.38 84.57L1312.38 92.10Q1304.67 100.33 1295.58 106.89Q1286.47 113.45 1275.71 118.09Q1264.95 122.72 1252.09 125.26Q1239.22 127.80 1223.83 127.80Q1198.10 127.80 1176.66 118.79Q1155.22 109.78 1139.91 93.24Q1124.60 76.70 1116.03 53.25Q1107.45 29.80 1107.45 1.10Q1107.45-27.08 1116.29-50.35Q1125.13-73.63 1141.14-90.34Q1157.15-107.05 1179.46-116.24Q1201.78-125.43 1228.72-125.43Q1242.20-125.43 1253.40-123.41Q1264.60-121.40 1274.31-117.64Q1284.03-113.88 1292.60-108.28Q1301.17-102.68 1309.40-95.33L1303.97-87.45Q1302.58-85.35 1299.60-85.35Q1298.03-85.35 1295.58-87.19Q1293.13-89.03 1289.36-91.74Q1285.60-94.45 1280.26-97.69Q1274.92-100.93 1267.58-103.64Q1260.22-106.35 1250.60-108.19Q1240.97-110.03 1228.72-110.03Q1206.15-110.03 1187.25-102.24Q1168.35-94.45 1154.70-80.01Q1141.05-65.58 1133.44-45.01Q1125.83-24.45 1125.83 1.10Q1125.83 27.35 1133.35 48.00Q1140.88 68.65 1154.17 82.91Q1167.47 97.17 1185.59 104.79Q1203.70 112.40 1224.88 112.40Q1238.17 112.40 1248.59 110.65Q1259 108.90 1267.75 105.40Q1276.50 101.90 1284.03 96.82Q1291.55 91.75 1298.90 84.92Q1299.78 84.22 1300.56 83.79Q1301.35 83.35 1302.40 83.35ZM1530.42-122.63L1530.42-107.40L1443.45-107.40L1443.45 125L1425.60 125L1425.60-107.40L1338.10-107.40L1338.10-122.63L1530.42-122.63Z"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
1
ui/src/preact.d.ts
vendored
1
ui/src/preact.d.ts
vendored
|
|
@ -1 +1,2 @@
|
|||
// eslint-disable-next-line
|
||||
import JSX = preact.JSX
|
||||
|
|
|
|||
|
|
@ -12,11 +12,19 @@ body {
|
|||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#app {
|
||||
height: 100%;
|
||||
padding-top: 100px;
|
||||
|
||||
text-align: center;
|
||||
background-color: #673ab8;
|
||||
color: #fff;
|
||||
font-size: 1.2em;
|
||||
font-size: 1.5em;
|
||||
padding-top: 100px;
|
||||
|
||||
.link {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue