From 8f3d365c076462c56c8bf9f9ffc5a0a5d7460c28 Mon Sep 17 00:00:00 2001 From: MiraGeowerktstatt Date: Fri, 19 Aug 2022 09:26:57 +0200 Subject: [PATCH 1/4] Add embed dialog --- src/ClientApp/src/components/EmbedDialog.js | 99 +++++++++++++++++++ src/ClientApp/src/components/Layout.js | 17 +++- src/ClientApp/src/translations/de/common.json | 9 +- src/ClientApp/src/translations/fr/common.json | 9 +- src/ClientApp/src/translations/it/common.json | 9 +- 5 files changed, 138 insertions(+), 5 deletions(-) create mode 100644 src/ClientApp/src/components/EmbedDialog.js diff --git a/src/ClientApp/src/components/EmbedDialog.js b/src/ClientApp/src/components/EmbedDialog.js new file mode 100644 index 0000000..96567c5 --- /dev/null +++ b/src/ClientApp/src/components/EmbedDialog.js @@ -0,0 +1,99 @@ +import React, { useState } from "react"; +import { + Button, + Dialog, + DialogTitle, + DialogActions, + DialogContent, + DialogContentText, + IconButton, + Stack, + Switch, + TextField, + Tooltip, +} from "@mui/material"; +import FormGroup from "@mui/material/FormGroup"; +import FormControlLabel from "@mui/material/FormControlLabel"; +import ContentCopyIcon from "@mui/icons-material/ContentCopy"; +import { useTranslation } from "react-i18next"; +import InputAdornment from "@mui/material/InputAdornment"; + +export function EmbedDialog(props) { + const { open, setOpen } = props; + const [width, setWidth] = useState(900); + const [height, setHeight] = useState(750); + const [border, setBorder] = useState(true); + const { t } = useTranslation("common"); + + const handleClose = () => { + setOpen(false); + }; + + return ( + + {t("generate-embed-tag")} + + {t("generate-embed-tag-instructions")} + + setWidth(e.target.value)} + InputProps={{ + endAdornment: px, + }} + value={width} + label={t("width")} + sx={{ marginRight: 5 }} + type="number" + variant="standard" + /> + setHeight(e.target.value)} + InputProps={{ + endAdornment: px, + }} + value={height} + label={t("height")} + sx={{ marginRight: 5 }} + type="number" + variant="standard" + /> + + setBorder(e.target.checked)} />} + label={t("border")} + /> + + + + `} + sx={{ bgcolor: "action.hover", marginTop: 5 }} + type="text" + fullWidth + variant="outlined" + /> + + { + navigator.clipboard.writeText( + `` + ); + }} + > + + + + + + + + + + ); +} diff --git a/src/ClientApp/src/components/Layout.js b/src/ClientApp/src/components/Layout.js index bb242a0..6056222 100644 --- a/src/ClientApp/src/components/Layout.js +++ b/src/ClientApp/src/components/Layout.js @@ -1,9 +1,18 @@ import React, { useEffect, useState } from "react"; -import { AppBar, Container, Toolbar, Typography } from "@mui/material"; -import { Box } from "@mui/system"; +import CodeIcon from "@mui/icons-material/Code"; +import { AppBar, Box, Container, Toolbar, Tooltip, Typography } from "@mui/material"; +import { EmbedDialog } from "./EmbedDialog"; +import { useTranslation } from "react-i18next"; export function Layout(props) { const [version, setVersion] = useState(); + const [open, setOpen] = useState(false); + const { t } = useTranslation("common"); + + const handleClickOpen = () => { + setOpen(true); + }; + useEffect(() => { async function fetchData() { const response = await fetch("/version"); @@ -19,6 +28,9 @@ export function Layout(props) { INTERLIS Model Repo Browser + + + Version: {version} @@ -26,6 +38,7 @@ export function Layout(props) { {props.children} + ); } diff --git a/src/ClientApp/src/translations/de/common.json b/src/ClientApp/src/translations/de/common.json index 1e0dffb..cccaed6 100644 --- a/src/ClientApp/src/translations/de/common.json +++ b/src/ClientApp/src/translations/de/common.json @@ -25,5 +25,12 @@ "model-preview": "Modellvorschau", "invalid-model-url": "Ungültige Modell-URL", "no-model-preview": "Keine Modellvorschau verfügbar", - "model-uri": "Modell-URI" + "model-uri": "Modell-URI", + "width": "Breite", + "height": "Höhe", + "generate-embed-tag": "IFrame zum Einbetten in externe Website generieren", + "generate-embed-tag-instructions": "Für ein optimales Ergebnis empfehlen wir eine minimale Breite von 900px und eine minimale Höhe von 750px.", + "border": "Rahmen", + "copy-to-clipboard": "In die Zwischenablage kopieren", + "close": "Schliessen" } diff --git a/src/ClientApp/src/translations/fr/common.json b/src/ClientApp/src/translations/fr/common.json index 33a2d40..374cad4 100644 --- a/src/ClientApp/src/translations/fr/common.json +++ b/src/ClientApp/src/translations/fr/common.json @@ -25,5 +25,12 @@ "model-preview": "Aperçu du modèle", "invalid-model-url": "URL de modèle non valide", "no-model-preview": "Aucun aperçu du modèle disponible", - "model-uri": "URI du modèle" + "model-uri": "URI du modèle", + "width": "Largeur", + "height": "Hauteur", + "generate-embed-tag": "Générer IFrame pour l'intégration dans un site Web externe", + "generate-embed-tag-instructions": "Pour un résultat optimal, nous recommandons une largeur minimale de 900px et une hauteur minimale de 750px.", + "border": "Encadrement", + "copy-to-clipboard": "Copier dans le Presse-papiers", + "close": "Fermer" } diff --git a/src/ClientApp/src/translations/it/common.json b/src/ClientApp/src/translations/it/common.json index a035662..40acfbc 100644 --- a/src/ClientApp/src/translations/it/common.json +++ b/src/ClientApp/src/translations/it/common.json @@ -25,5 +25,12 @@ "model-preview": "Anteprima del modello", "invalid-model-url": "URL del modello non valido", "no-model-preview": "Nessuna anteprima del modello disponibile", - "model-uri": "URI del modello" + "model-uri": "URI del modello", + "width": "Larghezza", + "height": "Altezza", + "generate-embed-tag": "Genera IFrame da incorporare in un sito Web esterno", + "generate-embed-tag-instructions": "Per ottenere i migliori risultati, consigliamo una larghezza minima di 900px e un'altezza minima di 750px.", + "border": "Telaio", + "copy-to-clipboard": "Copia negli appunti", + "close": "Chiudere" } From ca37cd5d18aae1ef9c0e45d9c4b249d4545e23b1 Mon Sep 17 00:00:00 2001 From: MiraGeowerktstatt Date: Fri, 19 Aug 2022 11:54:15 +0200 Subject: [PATCH 2/4] Hide filter with query parameters --- src/ClientApp/src/components/Detail.js | 3 ++- src/ClientApp/src/components/EmbedDialog.js | 17 ++++++++++++++--- src/ClientApp/src/components/Home.js | 14 +++++++++++++- src/ClientApp/src/components/Results.js | 14 ++++++++------ src/ClientApp/src/translations/de/common.json | 3 ++- src/ClientApp/src/translations/fr/common.json | 3 ++- src/ClientApp/src/translations/it/common.json | 3 ++- 7 files changed, 43 insertions(+), 14 deletions(-) diff --git a/src/ClientApp/src/components/Detail.js b/src/ClientApp/src/components/Detail.js index cb7b447..f9b115a 100644 --- a/src/ClientApp/src/components/Detail.js +++ b/src/ClientApp/src/components/Detail.js @@ -24,7 +24,8 @@ export function Detail() { const navigate = useNavigate(); const { md5, name } = useParams(); - const backToSearch = () => navigate(`/?query=${location.state.query}`, { replace: true }); + const backToSearch = () => + navigate(`/?query=${location.state.query}&hideFilter=${location.state.hideFilter}`, { replace: true }); const toHome = () => navigate("/"); useEffect(() => { diff --git a/src/ClientApp/src/components/EmbedDialog.js b/src/ClientApp/src/components/EmbedDialog.js index 96567c5..e8c17ef 100644 --- a/src/ClientApp/src/components/EmbedDialog.js +++ b/src/ClientApp/src/components/EmbedDialog.js @@ -23,6 +23,7 @@ export function EmbedDialog(props) { const [width, setWidth] = useState(900); const [height, setHeight] = useState(750); const [border, setBorder] = useState(true); + const [hideFilter, setHideFilter] = useState(false); const { t } = useTranslation("common"); const handleClose = () => { @@ -30,7 +31,7 @@ export function EmbedDialog(props) { }; return ( - + {t("generate-embed-tag")} {t("generate-embed-tag-instructions")} @@ -65,10 +66,18 @@ export function EmbedDialog(props) { label={t("border")} /> + + setHideFilter(e.target.checked)} />} + label={t("hide-filter")} + /> + `} sx={{ bgcolor: "action.hover", marginTop: 5 }} @@ -80,7 +89,9 @@ export function EmbedDialog(props) { { navigator.clipboard.writeText( - `` ); diff --git a/src/ClientApp/src/components/Home.js b/src/ClientApp/src/components/Home.js index 33a9dad..3730d03 100644 --- a/src/ClientApp/src/components/Home.js +++ b/src/ClientApp/src/components/Home.js @@ -12,6 +12,7 @@ export function Home() { const [searchParams, setSearchParams] = useSearchParams(); const [models, setModels] = useState(null); const [inputValue, setInputValue] = useState(searchParams.get("query") || ""); + const [hideFilter, setHideFilter] = useState(false); const [repositoryTree, setRepositoryTree] = useState(); const [searchOptions, setSearchOptions] = useState([]); const [loading, setLoading] = useState(); @@ -19,6 +20,10 @@ export function Home() { const { t } = useTranslation("common"); async function search(searchString) { + // Use hideFilter state for query if it was not explicitly set in url. + if (searchParams.get("hideFilter") === undefined) { + searchString += "&hideFilter=" + !!hideFilter; + } setSearchParams( { query: searchString, @@ -77,7 +82,9 @@ export function Home() { }; // If component is first loaded with search params present in URL the search should immediately be executed. + // On first load the hideFilter state should be set for all following requests. useEffect(() => { + setHideFilter(searchParams.get("hideFilter")); if (inputValue !== "") { search(inputValue); } @@ -148,7 +155,12 @@ export function Home() { )} {models !== null && ( - + )} ); diff --git a/src/ClientApp/src/components/Results.js b/src/ClientApp/src/components/Results.js index e0c8e23..1bda733 100644 --- a/src/ClientApp/src/components/Results.js +++ b/src/ClientApp/src/components/Results.js @@ -13,7 +13,7 @@ import { useTranslation } from "react-i18next"; import { Filter } from "./Filter"; export function Results(props) { - const { models, repositoryTree, searchParams } = props; + const { models, repositoryTree, searchParams, hideFilter } = props; const { t } = useTranslation("common"); const [page, setPage] = useState(1); const [showFilter, setShowFilter] = useState(false); @@ -41,11 +41,13 @@ export function Results(props) { {filteredModels.length + " " + t("models-found", { count: filteredModels.length })} - + {!hideFilter && ( + + )} - {showFilter && ( + {showFilter && !hideFilter && ( {model.name} diff --git a/src/ClientApp/src/translations/de/common.json b/src/ClientApp/src/translations/de/common.json index cccaed6..dffc2d4 100644 --- a/src/ClientApp/src/translations/de/common.json +++ b/src/ClientApp/src/translations/de/common.json @@ -32,5 +32,6 @@ "generate-embed-tag-instructions": "Für ein optimales Ergebnis empfehlen wir eine minimale Breite von 900px und eine minimale Höhe von 750px.", "border": "Rahmen", "copy-to-clipboard": "In die Zwischenablage kopieren", - "close": "Schliessen" + "close": "Schliessen", + "hide-filter": "Filterbereich ausblenden" } diff --git a/src/ClientApp/src/translations/fr/common.json b/src/ClientApp/src/translations/fr/common.json index 374cad4..2c2cbd0 100644 --- a/src/ClientApp/src/translations/fr/common.json +++ b/src/ClientApp/src/translations/fr/common.json @@ -32,5 +32,6 @@ "generate-embed-tag-instructions": "Pour un résultat optimal, nous recommandons une largeur minimale de 900px et une hauteur minimale de 750px.", "border": "Encadrement", "copy-to-clipboard": "Copier dans le Presse-papiers", - "close": "Fermer" + "close": "Fermer", + "hide-filter": "Masquer le panneau de filtre" } diff --git a/src/ClientApp/src/translations/it/common.json b/src/ClientApp/src/translations/it/common.json index 40acfbc..1558ac9 100644 --- a/src/ClientApp/src/translations/it/common.json +++ b/src/ClientApp/src/translations/it/common.json @@ -32,5 +32,6 @@ "generate-embed-tag-instructions": "Per ottenere i migliori risultati, consigliamo una larghezza minima di 900px e un'altezza minima di 750px.", "border": "Telaio", "copy-to-clipboard": "Copia negli appunti", - "close": "Chiudere" + "close": "Chiudere", + "hide-filter": "Nascondi pannello filtro" } From 777563dea7379a16600853d9616d0a4dc8e2e767 Mon Sep 17 00:00:00 2001 From: MiraGeowerktstatt Date: Mon, 22 Aug 2022 15:56:49 +0200 Subject: [PATCH 3/4] Add embed tag --- src/ClientApp/src/components/EmbedDialog.js | 26 +++++++++++++++++++ src/ClientApp/src/translations/de/common.json | 2 +- src/ClientApp/src/translations/fr/common.json | 2 +- src/ClientApp/src/translations/it/common.json | 2 +- 4 files changed, 29 insertions(+), 3 deletions(-) diff --git a/src/ClientApp/src/components/EmbedDialog.js b/src/ClientApp/src/components/EmbedDialog.js index e8c17ef..9534b98 100644 --- a/src/ClientApp/src/components/EmbedDialog.js +++ b/src/ClientApp/src/components/EmbedDialog.js @@ -101,6 +101,32 @@ export function EmbedDialog(props) { + + `} + sx={{ bgcolor: "action.hover", marginTop: 5 }} + type="text" + fullWidth + variant="outlined" + /> + + { + navigator.clipboard.writeText( + `` + ); + }} + > + + + + diff --git a/src/ClientApp/src/translations/de/common.json b/src/ClientApp/src/translations/de/common.json index dffc2d4..54cc60c 100644 --- a/src/ClientApp/src/translations/de/common.json +++ b/src/ClientApp/src/translations/de/common.json @@ -28,7 +28,7 @@ "model-uri": "Modell-URI", "width": "Breite", "height": "Höhe", - "generate-embed-tag": "IFrame zum Einbetten in externe Website generieren", + "generate-embed-tag": "iFrame oder Embed-Tag zum Einbetten in externe Webseite generieren", "generate-embed-tag-instructions": "Für ein optimales Ergebnis empfehlen wir eine minimale Breite von 900px und eine minimale Höhe von 750px.", "border": "Rahmen", "copy-to-clipboard": "In die Zwischenablage kopieren", diff --git a/src/ClientApp/src/translations/fr/common.json b/src/ClientApp/src/translations/fr/common.json index 2c2cbd0..b436189 100644 --- a/src/ClientApp/src/translations/fr/common.json +++ b/src/ClientApp/src/translations/fr/common.json @@ -28,7 +28,7 @@ "model-uri": "URI du modèle", "width": "Largeur", "height": "Hauteur", - "generate-embed-tag": "Générer IFrame pour l'intégration dans un site Web externe", + "generate-embed-tag": "Générer iFrame ou embed-tag pour l'intégration dans un site web externe", "generate-embed-tag-instructions": "Pour un résultat optimal, nous recommandons une largeur minimale de 900px et une hauteur minimale de 750px.", "border": "Encadrement", "copy-to-clipboard": "Copier dans le Presse-papiers", diff --git a/src/ClientApp/src/translations/it/common.json b/src/ClientApp/src/translations/it/common.json index 1558ac9..53da444 100644 --- a/src/ClientApp/src/translations/it/common.json +++ b/src/ClientApp/src/translations/it/common.json @@ -28,7 +28,7 @@ "model-uri": "URI del modello", "width": "Larghezza", "height": "Altezza", - "generate-embed-tag": "Genera IFrame da incorporare in un sito Web esterno", + "generate-embed-tag": "Genera iFrame o embed-tag da incorporare in un sito web esterno", "generate-embed-tag-instructions": "Per ottenere i migliori risultati, consigliamo una larghezza minima di 900px e un'altezza minima di 750px.", "border": "Telaio", "copy-to-clipboard": "Copia negli appunti", From e9645e7b1a95575ceeb893a1bcb8cae584038bfe Mon Sep 17 00:00:00 2001 From: MiraGeowerkstatt Date: Mon, 22 Aug 2022 16:21:41 +0200 Subject: [PATCH 4/4] Update trivy.yml --- .github/workflows/trivy.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/trivy.yml b/.github/workflows/trivy.yml index 9762e1f..74a3bed 100644 --- a/.github/workflows/trivy.yml +++ b/.github/workflows/trivy.yml @@ -17,7 +17,7 @@ jobs: contents: read security-events: write name: Analyze - runs-on: "ubuntu-18.04" + runs-on: ubuntu-latest steps: - name: Checkout code uses: actions/checkout@v3