Commit 8eaca0e2 authored by Max Reeves's avatar Max Reeves
Browse files

dont stretch me broooo

parent 261196a8
......@@ -11,7 +11,9 @@ import (
"path"
"path/filepath"
"regexp"
"strconv"
"strings"
"unicode/utf8"
"github.com/go-chi/chi"
)
......@@ -21,6 +23,8 @@ type Dashboard struct {
Title string `json:"title"`
Slug string `json:"slug"`
Background string `json:"background"`
Width string `json:"width"`
Height string `json:"height"`
Tags []string `json:"tags"`
Elements []Element `json:"elements"`
}
......@@ -32,6 +36,32 @@ type Element struct {
Type string `json:"type"`
Title string `json:"title"`
Rect Rect `json:"rect"`
Options Option `json:"options"`
}
//Option contains element options
type Option struct {
CheckID string `json:"checkId"`
NameFontSize int `json:"nameFontSize"`
StatusFontSize int `json:"statusFontSize"`
RightArrow bool `json:"rightArrow"`
LeftArrow bool `json:"leftArrow"`
StrokeWidth int `json:"strokeWidth"`
Image string `json:"image"`
OKSvg string `json:"checkSquare"`
OKStrokeColor string `json:"okStrokeColor"`
WarningStrokeColor string `json:"warningStrokeColor"`
WarningSvg string `json:"warningSvg"`
UnknownStrokeColor string `json:"unknownStrokeColor"`
UnknownSvg string `json:"unknownSvg"`
CriticalStrokeColor string `json:"criticalStrokeColor"`
CriticalSvg string `json:"criticalSvg"`
CriticalImage string `json:"criticalImage"`
OkImage string `json:"okImage"`
UnknownImage string `json:"unknownImage"`
WarningImage string `json:"warningImage"`
Svg string `json:"svg"`
StrokeColor string `json:"strokeColor"`
}
//Rect helper struct for positions
......@@ -177,6 +207,11 @@ func handleCreateDashboard(w http.ResponseWriter, r *http.Request) {
enc.Encode(SlugResponse{Slug: slug})
}
func trimFirstRune(s string) string {
_, i := utf8.DecodeRuneInString(s)
return s[i:]
}
func handleUpdateDashboard(w http.ResponseWriter, r *http.Request) {
slug := chi.URLParam(r, "slug")
......@@ -186,6 +221,12 @@ func handleUpdateDashboard(w http.ResponseWriter, r *http.Request) {
var dashboard Dashboard
err := json.Unmarshal(buf.Bytes(), &dashboard)
width, height := getImageDimension(trimFirstRune(dashboard.Background))
dashboard.Height = strconv.Itoa(height)
dashboard.Width = strconv.Itoa(width)
// fmt.Println(width, height)
if err != nil {
http.Error(w, "Error decoding json body: "+err.Error(), http.StatusBadRequest)
return
......@@ -204,8 +245,10 @@ func handleUpdateDashboard(w http.ResponseWriter, r *http.Request) {
return
}
dashboardJSON, err := json.Marshal(dashboard)
// fmt.Println(dashboardJSON, err)
//Write updated file
err = ioutil.WriteFile(path.Join("dashboards", slugNew+".json"), buf.Bytes(), 0655)
err = ioutil.WriteFile(path.Join("dashboards", slugNew+".json"), dashboardJSON, 0655)
if err != nil {
http.Error(w, "Error writing file: "+err.Error(), http.StatusInternalServerError)
return
......
import { h, Fragment } from 'preact';
import { route } from 'preact-router';
import { useEffect, useReducer, useState } from 'preact/hooks';
import { useEffect, useReducer, useState, useRef, useLayoutEffect } from 'preact/hooks';
import * as meerkat from './meerkat'
import { routeParam, removeParam, TagEditor } from './util';
......@@ -48,6 +48,10 @@ const dashboardReducer = (state, action) => {
console.log('Deleting element')
case 'duplicateElement':
console.log('Duplicating element')
case 'getDimensions' :
console.log('Getting Dimensions')
console.log({height: action.height, width: action.width })
return {...state, height: action.height, width: action.width};
case 'updateElement':
console.log('Updating element')
const newState = {...state};
......@@ -298,13 +302,15 @@ function DashboardElements({dashboardDispatch, selectedElementId, elements, high
}
//The actual dashboard being rendered
function DashboardView({dashboard, dashboardDispatch, selectedElementId, highlightedElementId}) {
const backgroundImage = dashboard.background ? `url(${dashboard.background})` : 'none';
export function DashboardView({dashboard, dashboardDispatch, selectedElementId, highlightedElementId}) {
const backgroundImage = dashboard.background ? dashboard.background : 'none';
return <div class="dashboard-wrap">
<div class="dashboard" style={{backgroundImage: backgroundImage}}>
return <div class="dashboard-wrap" style={{Height: dashboard.height, Width: dashboard.width}}>
<div class="dashboard" >
<img src={backgroundImage} style="height: 100%; width: 100%" id="dashboard-dimensions"/>
<DashboardElements elements={dashboard.elements} selectedElementId={selectedElementId}
dashboardDispatch={dashboardDispatch} highlightedElementId={highlightedElementId}/>
{console.log(dashboard.height)}
</div>
</div>
}
......@@ -409,12 +415,9 @@ function SidePanelElements({dashboard, dashboardDispatch, setHighlightedElementI
<div class="element-item" draggable={true} id={index} onDragStart={handleDragStart}>
<div onClick={ e => routeParam('selectedElementId', index.toString()) }>
<div class="element-title">{element.title}</div>
<span>
<button class="rounded btn-dark btn-sml m-1 medium" onClick={e => duplicateElement(e,index)}>Duplicate</button>
<button class="rounded btn-danger btn-sml m-1 medium" onClick={e => deleteElement(e,index)}>Delete</button>
</span>
</div>
<button class="rounded btn-dark btn-sml m-0 mr-1 mt-1 medium" onClick={e => duplicateElement(e,index)}>Duplicate</button>
<button class="rounded btn-danger btn-sml m-0 mr-1 mt-1 medium" onClick={e => deleteElement(e,index)}>Delete</button>
<div class="drop-zone" onDrop={handleDrop} id={index}
onDragEnter={e => {e.preventDefault(); e.currentTarget.classList.add('active')}}
onDragOver={e => e.preventDefault()}
......
import { h } from 'preact';
import { route } from 'preact-router';
import { useState, useEffect } from 'preact/hooks';
import { useState, useEffect, useRef } from 'preact/hooks';
import * as meerkat from './meerkat';
import { CheckCard } from './elements/card';
......@@ -15,7 +15,7 @@ import { StaticSVG } from './statics/svg';
import { StaticImage } from './statics/image';
//Read only page
export function Viewer({slug}) {
export function Viewer({slug, dashboardReducer}) {
const [dashboard, setDashboard] = useState(null);
useEffect(() => {
......@@ -30,8 +30,8 @@ export function Viewer({slug}) {
const left = `${element.rect.x}%`;
const top = `${element.rect.y}%`;
const width = `${element.rect.w}%`;
const height = `${element.rect.h}%`;
const height = `${(element.rect.h / dashboard.height) + 11}%`;
console.log(height)
const rotation = element.rotation ? `rotate(${element.rotation}rad)` : `rotate(0rad)`;
let ele = null;
......@@ -50,9 +50,11 @@ export function Viewer({slug}) {
</div>
});
const backgroundImage = dashboard.background ? `url(${dashboard.background})` : 'none';
return <div class="dashboard view-only" style={{backgroundImage: backgroundImage}}>
// style={{Height: height, Width: width}}
const backgroundImage = dashboard.background ? dashboard.background : 'none';
return <div class="dashboard view-only">
<img src={backgroundImage} id="dashboard-dimensions" style="height: 100%; width: 100%;"/>
{elements}
{/* <button class="view-only-button" onClick={e => route('/')}>Home</button> */}
</div>
}
\ No newline at end of file
......@@ -443,9 +443,6 @@ div.dashboard-wrap {
}
.dashboard-wrap .dashboard {
background-size: contain;
background-position: center;
background-repeat: no-repeat;
border: 1.5px solid rgba(0, 0, 0, 0.2);;
flex-grow: 1;
border-radius: 4px;
......@@ -453,11 +450,17 @@ div.dashboard-wrap {
}
.dashboard.view-only {
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
position: relative;
flex-grow: 1;
min-height: calc(100vh - 40px);
}
#dashboard-dimensions {
object-fit: contain;
/* min-height: calc(100vh - 40px); */
}
.dashboard.view-only .check {
......
......@@ -5,8 +5,13 @@ import (
"crypto/sha256"
"encoding/json"
"fmt"
"image"
_ "image/jpeg"
_ "image/png"
"io/ioutil"
"log"
"net/http"
"os"
"path"
"path/filepath"
)
......@@ -17,6 +22,19 @@ type ResponseURL struct {
URL string `json:"url"`
}
func getImageDimension(imagePath string) (int, int) {
file, err := os.Open(imagePath)
if err != nil {
log.Println(err)
}
image, _, err := image.DecodeConfig(file)
if err != nil {
log.Println(imagePath, err)
}
return image.Width, image.Height
}
func handleUpload(w http.ResponseWriter, r *http.Request) {
extension := filepath.Ext(r.Header.Get("filename"))
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment