my shit
This commit is contained in:
@@ -1 +1,89 @@
|
|||||||
package api
|
package api
|
||||||
|
|
||||||
|
import (
|
||||||
|
"git.aiterp.net/lucifer/new-server/app/config"
|
||||||
|
"git.aiterp.net/lucifer/new-server/models"
|
||||||
|
"github.com/gin-gonic/gin"
|
||||||
|
"log"
|
||||||
|
)
|
||||||
|
|
||||||
|
func Bridges(r gin.IRoutes) {
|
||||||
|
r.GET("", handler(func(c *gin.Context) (interface{}, error) {
|
||||||
|
return config.BridgeRepository().FetchAll(ctxOf(c))
|
||||||
|
}))
|
||||||
|
|
||||||
|
r.POST("", handler(func(c *gin.Context) (interface{}, error) {
|
||||||
|
var body struct {
|
||||||
|
Driver models.DriverKind `json:"driver"`
|
||||||
|
Address string `json:"address"`
|
||||||
|
DryRun bool `json:"dryRun"`
|
||||||
|
}
|
||||||
|
err := parseBody(c, &body)
|
||||||
|
if err != nil {
|
||||||
|
return nil, err
|
||||||
|
}
|
||||||
|
|
||||||
|
driver, err := config.DriverProvider().Provide(body.Driver)
|
||||||
|
if err != nil {
|
||||||
|
return nil, err
|
||||||
|
}
|
||||||
|
|
||||||
|
bridges, err := driver.SearchBridge(ctxOf(c), body.Address, body.DryRun)
|
||||||
|
if err != nil {
|
||||||
|
return nil, err
|
||||||
|
}
|
||||||
|
|
||||||
|
if !body.DryRun {
|
||||||
|
for _, bridge := range bridges {
|
||||||
|
err := config.BridgeRepository().Save(ctxOf(c), &bridge)
|
||||||
|
if err != nil {
|
||||||
|
return nil, err
|
||||||
|
}
|
||||||
|
|
||||||
|
log.Printf("Saved new bridge: %s (%s)", bridge.Name, bridge.Address)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return bridges, nil
|
||||||
|
}))
|
||||||
|
|
||||||
|
r.PUT("/:id", handler(func(c *gin.Context) (interface{}, error) {
|
||||||
|
var body struct {
|
||||||
|
Name *string `json:"name"`
|
||||||
|
}
|
||||||
|
err := parseBody(c, &body)
|
||||||
|
if err != nil {
|
||||||
|
return nil, err
|
||||||
|
}
|
||||||
|
|
||||||
|
bridge, err := config.BridgeRepository().Find(ctxOf(c), intParam(c, "id"))
|
||||||
|
if err != nil {
|
||||||
|
return nil, err
|
||||||
|
}
|
||||||
|
|
||||||
|
if body.Name != nil {
|
||||||
|
bridge.Name = *body.Name
|
||||||
|
}
|
||||||
|
|
||||||
|
err = config.BridgeRepository().Save(ctxOf(c), &bridge)
|
||||||
|
if err != nil {
|
||||||
|
return nil, err
|
||||||
|
}
|
||||||
|
|
||||||
|
return bridge, nil
|
||||||
|
}))
|
||||||
|
|
||||||
|
r.DELETE("/:id", handler(func(c *gin.Context) (interface{}, error) {
|
||||||
|
bridge, err := config.BridgeRepository().Find(ctxOf(c), intParam(c, "id"))
|
||||||
|
if err != nil {
|
||||||
|
return nil, err
|
||||||
|
}
|
||||||
|
|
||||||
|
err = config.BridgeRepository().Delete(ctxOf(c), &bridge)
|
||||||
|
if err != nil {
|
||||||
|
return nil, err
|
||||||
|
}
|
||||||
|
|
||||||
|
return bridge, nil
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|||||||
+27
-3
@@ -1,13 +1,20 @@
|
|||||||
package api
|
package api
|
||||||
|
|
||||||
import (
|
import (
|
||||||
|
"context"
|
||||||
"encoding/json"
|
"encoding/json"
|
||||||
"git.aiterp.net/lucifer/new-server/models"
|
"git.aiterp.net/lucifer/new-server/models"
|
||||||
"github.com/gin-gonic/gin"
|
"github.com/gin-gonic/gin"
|
||||||
|
"strconv"
|
||||||
)
|
)
|
||||||
|
|
||||||
var errorMap = map[error]int{
|
var errorMap = map[error]int{
|
||||||
models.ErrInvalidName: 400,
|
models.ErrNotFound: 404,
|
||||||
|
models.ErrInvalidName: 400,
|
||||||
|
models.ErrBadInput: 400,
|
||||||
|
models.ErrBadColor: 400,
|
||||||
|
models.ErrInternal: 500,
|
||||||
|
models.ErrUnknownColorFormat: 400,
|
||||||
}
|
}
|
||||||
|
|
||||||
type response struct {
|
type response struct {
|
||||||
@@ -26,16 +33,29 @@ func handler(fun func(c *gin.Context) (interface{}, error)) gin.HandlerFunc {
|
|||||||
}
|
}
|
||||||
|
|
||||||
c.JSON(errCode, response{
|
c.JSON(errCode, response{
|
||||||
Code: errCode,
|
Code: errCode,
|
||||||
Message: err.Error(),
|
Message: err.Error(),
|
||||||
})
|
})
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
c.JSON(200, val)
|
c.JSON(200, response{
|
||||||
|
Code: 200,
|
||||||
|
Message: "success",
|
||||||
|
Data: val,
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
func intParam(c *gin.Context, key string) int {
|
||||||
|
i, err := strconv.Atoi(c.Param(key))
|
||||||
|
if err != nil {
|
||||||
|
return 0
|
||||||
|
}
|
||||||
|
|
||||||
|
return i
|
||||||
|
}
|
||||||
|
|
||||||
func parseBody(c *gin.Context, target interface{}) error {
|
func parseBody(c *gin.Context, target interface{}) error {
|
||||||
err := json.NewDecoder(c.Request.Body).Decode(target)
|
err := json.NewDecoder(c.Request.Body).Decode(target)
|
||||||
if err != nil {
|
if err != nil {
|
||||||
@@ -44,3 +64,7 @@ func parseBody(c *gin.Context, target interface{}) error {
|
|||||||
|
|
||||||
return nil
|
return nil
|
||||||
}
|
}
|
||||||
|
|
||||||
|
func ctxOf(c *gin.Context) context.Context {
|
||||||
|
return c.Request.Context()
|
||||||
|
}
|
||||||
|
|||||||
@@ -5,3 +5,5 @@ import "git.aiterp.net/lucifer/new-server/models"
|
|||||||
var EventChannel = make(chan models.Event, 8)
|
var EventChannel = make(chan models.Event, 8)
|
||||||
|
|
||||||
var ChangeChannel = make(chan string, 16)
|
var ChangeChannel = make(chan string, 16)
|
||||||
|
|
||||||
|
var PublishChannel = make(chan []models.Device, 32)
|
||||||
|
|||||||
+13
-1
@@ -1,12 +1,24 @@
|
|||||||
package config
|
package config
|
||||||
|
|
||||||
import "git.aiterp.net/lucifer/new-server/models"
|
import (
|
||||||
|
"git.aiterp.net/lucifer/new-server/internal/mysql"
|
||||||
|
"git.aiterp.net/lucifer/new-server/models"
|
||||||
|
)
|
||||||
|
|
||||||
var (
|
var (
|
||||||
|
bRepo models.BridgeRepository
|
||||||
dRepo models.DeviceRepository
|
dRepo models.DeviceRepository
|
||||||
ehRepo models.EventHandlerRepository
|
ehRepo models.EventHandlerRepository
|
||||||
)
|
)
|
||||||
|
|
||||||
|
func BridgeRepository() models.BridgeRepository {
|
||||||
|
if bRepo == nil {
|
||||||
|
bRepo = &mysql.BridgeRepo{DBX: DBX()}
|
||||||
|
}
|
||||||
|
|
||||||
|
return bRepo
|
||||||
|
}
|
||||||
|
|
||||||
func DeviceRepository() models.DeviceRepository {
|
func DeviceRepository() models.DeviceRepository {
|
||||||
if dRepo == nil {
|
if dRepo == nil {
|
||||||
panic("panik")
|
panic("panik")
|
||||||
|
|||||||
+2
-1
@@ -16,8 +16,9 @@ func StartServer() {
|
|||||||
ginny := gin.New()
|
ginny := gin.New()
|
||||||
|
|
||||||
apiGin := ginny.Group("/api")
|
apiGin := ginny.Group("/api")
|
||||||
|
api.Bridges(apiGin.Group("/bridges"))
|
||||||
api.DriverKinds(apiGin.Group("/driver-kinds"))
|
api.DriverKinds(apiGin.Group("/driver-kinds"))
|
||||||
api.Events(apiGin.Group("/events"))
|
api.Events(apiGin.Group("/events"))
|
||||||
|
|
||||||
log.Fatal(ginny.Run(fmt.Sprintf("0.0.0.0:%d", config.ServerPort)))
|
log.Fatal(ginny.Run(fmt.Sprintf("0.0.0.0:%d", config.ServerPort())))
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -41,6 +41,7 @@ func handleEvent(event models.Event) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if !X {
|
if !X {
|
||||||
|
log.Println("Unhandled event: " + event.Name)
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -62,6 +63,4 @@ func handleEvent(event models.Event) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
log.Println("Unhandled event: " + event.Name)
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1 +1,47 @@
|
|||||||
package services
|
package services
|
||||||
|
|
||||||
|
import (
|
||||||
|
"context"
|
||||||
|
"git.aiterp.net/lucifer/new-server/app/config"
|
||||||
|
"git.aiterp.net/lucifer/new-server/models"
|
||||||
|
"log"
|
||||||
|
)
|
||||||
|
|
||||||
|
func StartPublisher() {
|
||||||
|
ctx := context.Background()
|
||||||
|
|
||||||
|
go func() {
|
||||||
|
for devices := range config.PublishChannel {
|
||||||
|
if len(devices) == 0 {
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
|
||||||
|
// Emergency solution! Please avoid!
|
||||||
|
// Send devices not belonging to the first channel separately
|
||||||
|
bridgeID := devices[0].BridgeID
|
||||||
|
for _, device := range devices {
|
||||||
|
if device.BridgeID != bridgeID {
|
||||||
|
config.PublishChannel<-[]models.Device{device}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
bridge, err := config.BridgeRepository().Find(ctx, devices[0].BridgeID)
|
||||||
|
if err != nil {
|
||||||
|
log.Println("Publishing error (1): " + err.Error())
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
|
||||||
|
driver, err := config.DriverProvider().Provide(bridge.Driver)
|
||||||
|
if err != nil {
|
||||||
|
log.Println("Publishing error (2): " + err.Error())
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
|
||||||
|
err = driver.Publish(ctx, bridge, devices)
|
||||||
|
if err != nil {
|
||||||
|
log.Println("Publishing error (3): " + err.Error())
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}()
|
||||||
|
}
|
||||||
|
|||||||
+2
-2
@@ -9,8 +9,8 @@ import (
|
|||||||
func main() {
|
func main() {
|
||||||
db := config.DBX().DB
|
db := config.DBX().DB
|
||||||
|
|
||||||
log.Println("Host: " + config.MySqlHost())
|
log.Printf("Database: %s:%d/%s", config.MySqlHost(), config.MySqlPort(), config.MySqlSchema())
|
||||||
log.Println("Schema: " + config.MySqlUsername())
|
log.Printf("Authenticating as: %s", config.MySqlUsername())
|
||||||
|
|
||||||
err := goose.SetDialect("mysql")
|
err := goose.SetDialect("mysql")
|
||||||
if err != nil {
|
if err != nil {
|
||||||
|
|||||||
@@ -1 +1,79 @@
|
|||||||
package mysql
|
package mysql
|
||||||
|
|
||||||
|
import (
|
||||||
|
"context"
|
||||||
|
"git.aiterp.net/lucifer/new-server/models"
|
||||||
|
"github.com/jmoiron/sqlx"
|
||||||
|
)
|
||||||
|
|
||||||
|
type BridgeRepo struct {
|
||||||
|
DBX *sqlx.DB
|
||||||
|
}
|
||||||
|
|
||||||
|
func (b *BridgeRepo) Find(ctx context.Context, id int) (models.Bridge, error) {
|
||||||
|
var bridge models.Bridge
|
||||||
|
err := b.DBX.GetContext(ctx, &bridge, "SELECT * FROM bridge WHERE id = ?", id)
|
||||||
|
if err != nil {
|
||||||
|
return models.Bridge{}, dbErr(err)
|
||||||
|
}
|
||||||
|
|
||||||
|
return bridge, nil
|
||||||
|
}
|
||||||
|
|
||||||
|
func (b *BridgeRepo) FetchAll(ctx context.Context) ([]models.Bridge, error) {
|
||||||
|
bridges := make([]models.Bridge, 0, 8)
|
||||||
|
err := b.DBX.GetContext(ctx, bridges, "SELECT * FROM bridge")
|
||||||
|
if err != nil {
|
||||||
|
return nil, dbErr(err)
|
||||||
|
}
|
||||||
|
|
||||||
|
return bridges, nil
|
||||||
|
}
|
||||||
|
|
||||||
|
func (b *BridgeRepo) Save(ctx context.Context, bridge *models.Bridge) error {
|
||||||
|
if bridge.ID > 0 {
|
||||||
|
_, err := b.DBX.ExecContext(
|
||||||
|
ctx,
|
||||||
|
"UPDATE bridge SET name = ?, address = ?, token = ? WHERE id = ?",
|
||||||
|
bridge.Name, bridge.Address, bridge.Token, bridge.ID,
|
||||||
|
)
|
||||||
|
|
||||||
|
if err != nil {
|
||||||
|
return dbErr(err)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
rs, err := b.DBX.ExecContext(
|
||||||
|
ctx,
|
||||||
|
"INSERT INTO bridge (name, driver, address, token) VALUES (?, ?, ?, ?)",
|
||||||
|
bridge.Name, bridge.Driver, bridge.Address, bridge.Token,
|
||||||
|
)
|
||||||
|
|
||||||
|
if err != nil {
|
||||||
|
return dbErr(err)
|
||||||
|
}
|
||||||
|
|
||||||
|
id, err := rs.LastInsertId()
|
||||||
|
if err != nil {
|
||||||
|
return dbErr(err)
|
||||||
|
}
|
||||||
|
|
||||||
|
bridge.ID = int(id)
|
||||||
|
}
|
||||||
|
|
||||||
|
return nil
|
||||||
|
}
|
||||||
|
|
||||||
|
func (b *BridgeRepo) Delete(ctx context.Context, bridge *models.Bridge) error {
|
||||||
|
_, err := b.DBX.ExecContext(ctx, "DELETE FROM bridge WHERE id = ?", bridge.ID)
|
||||||
|
if err != nil {
|
||||||
|
return dbErr(err)
|
||||||
|
}
|
||||||
|
|
||||||
|
_, err = b.DBX.ExecContext(ctx, "DELETE FROM device WHERE bridge_id = ?", bridge.ID)
|
||||||
|
if err != nil {
|
||||||
|
return dbErr(err)
|
||||||
|
}
|
||||||
|
|
||||||
|
bridge.ID = 0
|
||||||
|
return nil
|
||||||
|
}
|
||||||
|
|||||||
@@ -1 +1,18 @@
|
|||||||
package mysql
|
package mysql
|
||||||
|
|
||||||
|
import (
|
||||||
|
"database/sql"
|
||||||
|
"git.aiterp.net/lucifer/new-server/models"
|
||||||
|
"log"
|
||||||
|
)
|
||||||
|
|
||||||
|
func dbErr(err error) error {
|
||||||
|
if err == sql.ErrNoRows {
|
||||||
|
return models.ErrNotFound
|
||||||
|
} else if err != nil {
|
||||||
|
log.Printf("Internal error: %s", err.Error())
|
||||||
|
return models.ErrInternal
|
||||||
|
}
|
||||||
|
|
||||||
|
return nil
|
||||||
|
}
|
||||||
|
|||||||
+14
-5
@@ -1,11 +1,20 @@
|
|||||||
package models
|
package models
|
||||||
|
|
||||||
|
import "context"
|
||||||
|
|
||||||
type Bridge struct {
|
type Bridge struct {
|
||||||
ID int `json:"id"`
|
ID int `json:"id" db:"id"`
|
||||||
Name string `json:"name"`
|
Name string `json:"name" db:"name"`
|
||||||
Driver DriverKind `json:"driver"`
|
Driver DriverKind `json:"driver" db:"driver"`
|
||||||
Address string `json:"address"`
|
Address string `json:"address" db:"address"`
|
||||||
Token string `json:"token"`
|
Token string `json:"-" db:"token"`
|
||||||
|
}
|
||||||
|
|
||||||
|
type BridgeRepository interface {
|
||||||
|
Find(ctx context.Context, id int) (Bridge, error)
|
||||||
|
FetchAll(ctx context.Context) ([]Bridge, error)
|
||||||
|
Save(ctx context.Context, bridge *Bridge) error
|
||||||
|
Delete(ctx context.Context, bridge *Bridge) error
|
||||||
}
|
}
|
||||||
|
|
||||||
type DriverKind string
|
type DriverKind string
|
||||||
|
|||||||
@@ -2,7 +2,9 @@ package models
|
|||||||
|
|
||||||
import "errors"
|
import "errors"
|
||||||
|
|
||||||
|
var ErrNotFound = errors.New("not found")
|
||||||
var ErrInvalidName = errors.New("invalid name")
|
var ErrInvalidName = errors.New("invalid name")
|
||||||
var ErrBadInput = errors.New("bad input")
|
var ErrBadInput = errors.New("bad input")
|
||||||
var ErrBadColor = errors.New("bad color")
|
var ErrBadColor = errors.New("bad color")
|
||||||
|
var ErrInternal = errors.New("internal")
|
||||||
var ErrUnknownColorFormat = errors.New("unknown color format")
|
var ErrUnknownColorFormat = errors.New("unknown color format")
|
||||||
|
|||||||
@@ -1,5 +1,7 @@
|
|||||||
package models
|
package models
|
||||||
|
|
||||||
|
import "strconv"
|
||||||
|
|
||||||
type Event struct {
|
type Event struct {
|
||||||
Name string `json:"name"`
|
Name string `json:"name"`
|
||||||
Payload map[string]string `json:"payload,omitempty"`
|
Payload map[string]string `json:"payload,omitempty"`
|
||||||
@@ -16,3 +18,10 @@ func (e *Event) AddPayload(key, value string) {
|
|||||||
func (e *Event) HasPayload(key string) bool {
|
func (e *Event) HasPayload(key string) bool {
|
||||||
return e.Payload != nil && e.Payload[key] != ""
|
return e.Payload != nil && e.Payload[key] != ""
|
||||||
}
|
}
|
||||||
|
|
||||||
|
func BridgeConnectedEvent(bridge Bridge) Event {
|
||||||
|
e := Event{Name: "BridgeConnected"}
|
||||||
|
e.AddPayload("id", strconv.Itoa(bridge.ID))
|
||||||
|
|
||||||
|
return e
|
||||||
|
}
|
||||||
|
|||||||
@@ -0,0 +1,20 @@
|
|||||||
|
-- +goose Up
|
||||||
|
-- +goose StatementBegin
|
||||||
|
CREATE TABLE device
|
||||||
|
(
|
||||||
|
id INT NOT NULL AUTO_INCREMENT,
|
||||||
|
bridge_id INT NOT NULL,
|
||||||
|
internal_id VARCHAR(255) NOT NULL,
|
||||||
|
icon CHAR NOT NULL,
|
||||||
|
name VARCHAR(255) NOT NULL,
|
||||||
|
capabilities VARCHAR(255) NOT NULL,
|
||||||
|
button_names VARCHAR(255) NOT NULL,
|
||||||
|
|
||||||
|
PRIMARY KEY (id)
|
||||||
|
);
|
||||||
|
-- +goose StatementEnd
|
||||||
|
|
||||||
|
-- +goose Down
|
||||||
|
-- +goose StatementBegin
|
||||||
|
DROP TABLE device;
|
||||||
|
-- +goose StatementEnd
|
||||||
|
|||||||
@@ -0,0 +1,17 @@
|
|||||||
|
-- +goose Up
|
||||||
|
-- +goose StatementBegin
|
||||||
|
CREATE TABLE device_property
|
||||||
|
(
|
||||||
|
device_id INT NOT NULL,
|
||||||
|
prop_key VARCHAR(255) NOT NULL,
|
||||||
|
prop_value VARCHAR(255) NOT NULL,
|
||||||
|
is_user TINYINT NOT NULL DEFAULT 0,
|
||||||
|
|
||||||
|
PRIMARY KEY (device_id, prop_key)
|
||||||
|
);
|
||||||
|
-- +goose StatementEnd
|
||||||
|
|
||||||
|
-- +goose Down
|
||||||
|
-- +goose StatementBegin
|
||||||
|
DROP TABLE device_property;
|
||||||
|
-- +goose StatementEnd
|
||||||
|
|||||||
@@ -0,0 +1,20 @@
|
|||||||
|
-- +goose Up
|
||||||
|
-- +goose StatementBegin
|
||||||
|
CREATE TABLE device_state
|
||||||
|
(
|
||||||
|
device_id INT NOT NULL,
|
||||||
|
hue DOUBLE NOT NULL,
|
||||||
|
saturation DOUBLE NOT NULL,
|
||||||
|
kelvin INT NOT NULL,
|
||||||
|
power TINYINT NOT NULL,
|
||||||
|
intensity INT NOT NULL,
|
||||||
|
|
||||||
|
PRIMARY KEY (device_id)
|
||||||
|
);
|
||||||
|
|
||||||
|
-- +goose StatementEnd
|
||||||
|
|
||||||
|
-- +goose Down
|
||||||
|
-- +goose StatementBegin
|
||||||
|
DROP TABLE device_state;
|
||||||
|
-- +goose StatementEnd
|
||||||
|
|||||||
+48
-43
@@ -1,43 +1,48 @@
|
|||||||
{
|
{
|
||||||
"name": "webui",
|
"name": "webui",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@testing-library/jest-dom": "^5.11.4",
|
"@testing-library/jest-dom": "^5.11.4",
|
||||||
"@testing-library/react": "^11.1.0",
|
"@testing-library/react": "^11.1.0",
|
||||||
"@testing-library/user-event": "^12.1.10",
|
"@testing-library/user-event": "^12.1.10",
|
||||||
"@types/jest": "^26.0.15",
|
"@types/jest": "^26.0.15",
|
||||||
"@types/node": "^12.0.0",
|
"@types/node": "^12.0.0",
|
||||||
"@types/react": "^17.0.0",
|
"@types/react": "^17.0.0",
|
||||||
"@types/react-dom": "^17.0.0",
|
"@types/react-dom": "^17.0.0",
|
||||||
"react": "^17.0.2",
|
"hookrouter": "^1.2.5",
|
||||||
"react-dom": "^17.0.2",
|
"node-sass": "4.14.1",
|
||||||
"react-scripts": "4.0.3",
|
"react": "^17.0.2",
|
||||||
"typescript": "^4.1.2",
|
"react-dom": "^17.0.2",
|
||||||
"web-vitals": "^1.0.1"
|
"react-scripts": "4.0.3",
|
||||||
},
|
"typescript": "^4.1.2",
|
||||||
"scripts": {
|
"web-vitals": "^1.0.1"
|
||||||
"start": "react-scripts start",
|
},
|
||||||
"build": "react-scripts build",
|
"scripts": {
|
||||||
"test": "react-scripts test",
|
"start": "react-scripts start",
|
||||||
"eject": "react-scripts eject"
|
"build": "react-scripts build",
|
||||||
},
|
"test": "react-scripts test",
|
||||||
"eslintConfig": {
|
"eject": "react-scripts eject"
|
||||||
"extends": [
|
},
|
||||||
"react-app",
|
"eslintConfig": {
|
||||||
"react-app/jest"
|
"extends": [
|
||||||
]
|
"react-app",
|
||||||
},
|
"react-app/jest"
|
||||||
"browserslist": {
|
]
|
||||||
"production": [
|
},
|
||||||
">0.2%",
|
"browserslist": {
|
||||||
"not dead",
|
"production": [
|
||||||
"not op_mini all"
|
">0.2%",
|
||||||
],
|
"not dead",
|
||||||
"development": [
|
"not op_mini all"
|
||||||
"last 1 chrome version",
|
],
|
||||||
"last 1 firefox version",
|
"development": [
|
||||||
"last 1 safari version"
|
"last 1 chrome version",
|
||||||
]
|
"last 1 firefox version",
|
||||||
}
|
"last 1 safari version"
|
||||||
}
|
]
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/hookrouter": "^2.2.5"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
+31
-26
@@ -1,26 +1,31 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import logo from './logo.svg';
|
import {HookRouter, navigate, usePath, useRoutes} from "hookrouter";
|
||||||
import './App.css';
|
import {Tabs} from "./primitives/Layout";
|
||||||
|
|
||||||
function App() {
|
const routeObj: HookRouter.RouteObject = {
|
||||||
return (
|
"/": () => <div>1</div>,
|
||||||
<div className="App">
|
"/devices": () => <div>2</div>,
|
||||||
<header className="App-header">
|
"/settings": () => <div>3</div>,
|
||||||
<img src={logo} className="App-logo" alt="logo" />
|
}
|
||||||
<p>
|
|
||||||
Edit <code>src/App.tsx</code> and save to reload.
|
const routeList = ["/", "/devices", "/settings"];
|
||||||
</p>
|
|
||||||
<a
|
const tabNames = ["Lucifer", "Enheter", "Oppsett"];
|
||||||
className="App-link"
|
|
||||||
href="https://reactjs.org"
|
function App() {
|
||||||
target="_blank"
|
const route = useRoutes(routeObj);
|
||||||
rel="noopener noreferrer"
|
const path = usePath();
|
||||||
>
|
|
||||||
Learn React
|
return (
|
||||||
</a>
|
<div className="App">
|
||||||
</header>
|
<Tabs tabNames={tabNames}
|
||||||
</div>
|
index={routeList.indexOf(path)}
|
||||||
);
|
onChange={i => navigate(routeList[i])}
|
||||||
}
|
boldIndex={0}
|
||||||
|
/>
|
||||||
export default App;
|
{route || <div>B</div>}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
|
|||||||
+7
-13
@@ -1,13 +1,7 @@
|
|||||||
body {
|
body, html {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
font-family: sans-serif;
|
||||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
-webkit-font-smoothing: antialiased;
|
||||||
sans-serif;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
-webkit-font-smoothing: antialiased;
|
padding: 0;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
|
||||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
|
||||||
monospace;
|
|
||||||
}
|
|
||||||
|
|||||||
+17
-17
@@ -1,17 +1,17 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
import './index.css';
|
import './index.css';
|
||||||
import App from './App';
|
import App from './App';
|
||||||
import reportWebVitals from './reportWebVitals';
|
import reportWebVitals from "./reportWebVitals";
|
||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<React.StrictMode>
|
<React.StrictMode>
|
||||||
<App />
|
<App />
|
||||||
</React.StrictMode>,
|
</React.StrictMode>,
|
||||||
document.getElementById('root')
|
document.getElementById('root')
|
||||||
);
|
);
|
||||||
|
|
||||||
// If you want to start measuring performance in your app, pass a function
|
// If you want to start measuring performance in your app, pass a function
|
||||||
// to log results (for example: reportWebVitals(console.log))
|
// to log results (for example: reportWebVitals(console.log))
|
||||||
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
|
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
|
||||||
reportWebVitals();
|
reportWebVitals();
|
||||||
|
|||||||
@@ -0,0 +1,17 @@
|
|||||||
|
@import "../res/colors"
|
||||||
|
|
||||||
|
.Tabs-container
|
||||||
|
background-color: $color-foreground-dark
|
||||||
|
|
||||||
|
.Tabs-element
|
||||||
|
display: inline-block
|
||||||
|
padding: 0.25em 0.7ch
|
||||||
|
cursor: pointer
|
||||||
|
user-select: none
|
||||||
|
|
||||||
|
.Tabs-active
|
||||||
|
border-bottom: 1px solid $color-foreground
|
||||||
|
|
||||||
|
.Tabs-bold
|
||||||
|
font-family: 'Bitstream Vera Serif', 'Lucida Fax', serif
|
||||||
|
font-weight: 600
|
||||||
@@ -0,0 +1,45 @@
|
|||||||
|
import React, {useCallback, useEffect, useMemo} from "react";
|
||||||
|
import "./Layout.sass";
|
||||||
|
|
||||||
|
interface TabsProps {
|
||||||
|
tabNames: string[]
|
||||||
|
index: number
|
||||||
|
onChange: (newIndex: number) => void
|
||||||
|
boldIndex?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Tabs({tabNames, index, onChange, boldIndex}: TabsProps) {
|
||||||
|
useEffect(() => {
|
||||||
|
if (index < 0) {
|
||||||
|
onChange(0);
|
||||||
|
} else if (tabNames.length > 0 && index >= tabNames.length) {
|
||||||
|
onChange(tabNames.length - 1);
|
||||||
|
}
|
||||||
|
}, [tabNames, index, onChange]);
|
||||||
|
|
||||||
|
const tabClass = useCallback((i: number) => {
|
||||||
|
const classes = ['Tabs-element'];
|
||||||
|
|
||||||
|
if (i === index) {
|
||||||
|
classes.push("Tabs-active");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (i === boldIndex) {
|
||||||
|
classes.push("Tabs-bold");
|
||||||
|
}
|
||||||
|
|
||||||
|
return classes.join(" ");
|
||||||
|
}, [index, boldIndex])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="Tabs-container">
|
||||||
|
{tabNames.map((name, i) => (
|
||||||
|
<div className={tabClass(i)}
|
||||||
|
onClick={() => onChange(i)}
|
||||||
|
>
|
||||||
|
{name}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|||||||
@@ -0,0 +1,7 @@
|
|||||||
|
$color-background: #111
|
||||||
|
$color-foreground: rgb(238, 238, 238)
|
||||||
|
$color-foreground-dark: rgba(238, 238, 238, 0.05)
|
||||||
|
|
||||||
|
body, html
|
||||||
|
background-color: $color-background
|
||||||
|
color: $color-foreground
|
||||||
|
|||||||
+11959
File diff suppressed because it is too large
Load Diff
+11965
-11447
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user