Skip to content
GitLab
Commit 30aa1d2b authored by Emmanuel Raviart's avatar Emmanuel Raviart
Browse files

UI: Add Debug menu (to show/hide JSON trees) in development mode.

parent 3a955c2d
Hide whitespace changes
Inline Side-by-side
src/components/DatafileBody.svelte
View file @ 30aa1d2b
<script lang="ts">
import JsonTree from "svelte-json-tree"
import type { FileDescription } from "$lib/accessors"
//import type { Var } from "../raw_types/codebooks"
import SimpleJsonTree from "./fields/SimpleJsonTree.svelte"
export let datafile: FileDescription
......@@ -27,12 +24,5 @@
</div>
{/each}
<div class="mt-10 mb-4 text-xs text-red-400">
<b> Votre ddi pour ce fichier : </b>
</div>
<div style="--json-tree-font-size: 12px;">
{#each Object.entries(datafile) as [key, value]}
<JsonTree {key} {value} />
{/each}
</div>
<SimpleJsonTree title="DDI pour ce fichier" value={datafile} />
</section>
src/components/NavPrimaryMenu.svelte
View file @ 30aa1d2b
<script lang="ts">
import { dev } from "$app/env"
import { goto } from "$app/navigation"
import { page, session } from "$app/stores"
import { validateJsonResponse } from "$lib/auditors/responses"
import { proposedLanguagesAndLabels } from "$lib/locales"
import { language, localize, shoppingCart } from "$lib/stores"
import { debugMode, language, localize, shoppingCart } from "$lib/stores"
import type { ZammadUser } from "$lib/server/zammad"
export let display: string
......@@ -144,6 +145,13 @@
</li>
</ul>
{#if dev}
<label>
<input bind:checked={$debugMode} type="checkbox" />
Debug
</label>
{/if}
<select
class="border-0 portal mx-2 text-slate-600 hover:bg-gray-100 rounded-lg w-20"
on:blur={(event) => setLanguage(event.target.value)}
......
src/components/StudyView.svelte
View file @ 30aa1d2b
<script lang="ts">
import JsonTree from "svelte-json-tree"
import { page, session } from "$app/stores"
import {
// extractCodeBookText,
......@@ -20,6 +18,8 @@
} from "$lib/accessors"
import { validateJsonResponse } from "$lib/auditors/responses"
import Drawer from "./Drawer.svelte"
import CodeBookSimpleJsonTrees from "./fields/CodeBookSimpleJsonTrees.svelte"
import SimpleJsonTree from "./fields/SimpleJsonTree.svelte"
import MarkdownDisplayDDI from "./MarkdownDisplayDDI.svelte"
import OrganizationName from "./OrganizationName.svelte"
import Tabs from "./Tabs.svelte"
......@@ -60,7 +60,7 @@
{ label: "Documentation", symbol: "documents" },
{ label: "Accès", symbol: "access" },
{ label: "Publications", symbol: "public" },
// { label: "Votre json entier", symbol: "json" },
{ debugOnly: true, label: "DDI", symbol: "json" },
]
$: _ = $localize
......@@ -351,28 +351,7 @@
</p>
<MarkdownDisplayDDI markdownAst={markdownAstSum} {study} />
<!-- Codebook extract for Description-->
<p class="text-center text-l font-bold text-gray-300">
CODEBOOK DDI
</p>
{#if codeBook?.stdyDscr.stdyInfo != null}
<div class="my-10 text-l text-gray-400 text-center">
<p>Section "CodeBook/stdyDscr/stdyInfo" :</p>
</div>
<div style="--json-tree-font-size: 12px;">
{#each Object.entries(codeBook.stdyDscr.stdyInfo) as [key, value]}
<div class="py-4">
<JsonTree {key} {value} />
</div>
{/each}
</div>
{:else}
<div class="my-10 text-l text-gray-400 text-center">
<p>
Section "CodeBook/stdyDscr/stdyInfo" NOT FOUND in this DDI
</p>
</div>
{/if}
<CodeBookSimpleJsonTrees {codeBook} paths={["stdyDscr/stdyInfo"]} />
<hr class="sep h-20" />
</div>
......@@ -413,26 +392,8 @@
</a>
</p>
<MarkdownDisplayDDI markdownAst={markdownAstDet} {study} />
<!-- Codebook extract for method -->
<p class="text-center text-l font-bold text-gray-300">
CODEBOOK DDI
</p>
{#if codeBook?.stdyDscr != null}
<div class="my-10 text-l text-gray-400 text-center">
<p>Section "CodeBook/stdyDscr/" :</p>
</div>
<div style="--json-tree-font-size: 12px;">
{#each Object.entries(codeBook.stdyDscr) as [key, value]}
<div class="py-4">
<JsonTree {key} {value} />
</div>
{/each}
</div>
{:else}
<div class="my-10 text-l text-gray-400 text-center">
<p>Section "CodeBook/stdyDscr/method" NOT FOUND in this DDI</p>
</div>
{/if}
<CodeBookSimpleJsonTrees {codeBook} paths={["stdyDscr"]} />
<hr class="sep h-20" />
</div>
......@@ -440,11 +401,13 @@
{:else if tab === "variables"}
<div class="flex flex-col w-auto overflow-hidden ml-4 mr-2 my-4">
{#if variables.length > 0}
<!--
<p
class="py-4 px-20 text-center italic text-gray-300 text-opacity-50"
>
AFFICHAGE CONFIGURÉ MANUELLEMENT
</p>
-->
{#each variables as variable}
<Drawer>
<!--
......@@ -496,28 +459,7 @@
</div>
{/if}
<!-- Codebook extract for variables -->
<!--
<p class="text-center text-l font-bold text-gray-300">
CODEBOOK DDI
</p>
{#if codeBook?.dataDscr != null}
<div class="my-10 text-l text-gray-400">
<p>Section "codeBook/dataDscr" :</p>
</div>
<div style="--json-tree-font-size: 12px;">
{#each Object.entries(codeBook.dataDscr) as [key, value]}
<div class="py-4">
<JsonTree {key} {value} />
</div>
{/each}
</div>
{:else}
<div class="my-10 text-l text-gray-400">
<p>Section "codeBook/dataDscr" not found in this DDI</p>
</div>
{/if}
-->
<CodeBookSimpleJsonTrees {codeBook} paths={["dataDscr"]} />
<hr class="sep h-20" />
</div>
......@@ -541,11 +483,13 @@
{/each}-->
<!-- CODE WITH TABLE FROM JS OBJECT-->
<!--
<p
class="py-4 px-20 text-center italic text-gray-300 text-opacity-50"
>
AFFICHAGE CONFIGURÉ MANUELLEMENT
</p>
-->
{#each datafilesDscr as datafile}
<Drawer>
<!-- HEAD-->
......@@ -601,26 +545,7 @@
<MarkdownDisplayDDI markdownAst={markdownAstData} {study} />
-->
<!-- Codebook extract for datafiles
<p class="text-center text-l font-bold text-gray-300">
CODEBOOK DDI
</p>
{#if codeBook?.fileDscr != null}
<div class="my-10 text-l text-gray-400">
<p>Section "codeBook/fileDscr/" :</p>
</div>
<div style="--json-tree-font-size: 12px;">
{#each Object.entries(codeBook.fileDscr) as [key, value]}
<div class="py-4">
<JsonTree {key} {value} />
</div>
{/each}
</div>
{:else}
<div class="my-10 text-l text-gray-400">
<p>Section "codeBook/fileDscr/" not found in this DDI</p>
</div>
{/if}-->
<CodeBookSimpleJsonTrees {codeBook} paths={["fileDscr"]} /> -->
</div>
<hr class="sep h-20" />
......@@ -695,42 +620,11 @@
</div>
</section>
{/each} -->
<!-- Codebook extract for ressources -->
<div class="py-10 px-20">
<p class="text-center text-l font-bold text-gray-300">
CODEBOOK DDI
</p>
{#if codeBook?.stdyDscr.othrStdyMat != null}
<p class="my-10 text-l text-gray-400">
Section "codeBook/stdyDscr/othrStdyMat" :
</p>
<div style="--json-tree-font-size: 12px;">
{#each Object.entries(codeBook.stdyDscr.othrStdyMat) as [key, value]}
<div class="py-4">
<JsonTree {key} {value} />
</div>
{/each}
</div>
{:else}
<p class="my-10 text-l text-gray-400">
Section "codeBook/stdyDscr/othrStdyMat" not found in this DDI
</p>
{/if}
{#if codeBook?.otherMat != null}
<p class="my-10 text-l text-gray-400">
Section "codeBook/otherMat" :
</p>
<div style="--json-tree-font-size: 12px;">
<div class="py-4">
<JsonTree value={codeBook.otherMat} />
</div>
</div>
{:else}
<div class="my-10 text-l text-gray-400">
<p>Section "codeBook/otherMat" not found in this DDI</p>
</div>
{/if}
</div>
<CodeBookSimpleJsonTrees
{codeBook}
paths={["stdyDscr/othrStdyMat", "otherMat"]}
/>
</div>
<hr class="sep h-20" />
......@@ -750,46 +644,18 @@
</p>
<MarkdownDisplayDDI markdownAst={markdownAstAcc} {study} />
<!-- Codebook extract for access -->
<div class="py-10 px-20">
<p class="text-center text-l font-bold text-gray-300">
CODEBOOK DDI
</p>
{#if codeBook?.stdyDscr.dataAccs != null}
<p class="my-10 text-l text-gray-400">
Section "codeBook/stdyDscr/dataAccs" :
</p>
<div style="--json-tree-font-size: 12px;">
{#each Object.entries(codeBook.stdyDscr.dataAccs) as [key, value]}
<div class="py-4">
<JsonTree {key} {value} />
</div>
{/each}
</div>
{:else}
<p class="my-10 text-l text-gray-400">
Section "codeBook/stdyDscr/dataAccs" not found in this DDI
</p>
{/if}
</div>
<CodeBookSimpleJsonTrees {codeBook} paths={["stdyDscr/dataAccs"]} />
<hr class="sep h-20" />
</div>
<!-- ONGLET CODEBOOK -->
{:else if tab === "json"}
<div class="flex flex-col overflow-hidden my-4 ml-16">
<div style="--json-tree-font-size: 14px;">
{#if codeBook == null}
<JsonTree value={codeBook} />
{:else}
{#each Object.entries(codeBook) as [key, value]}
<div class="py-4">
<JsonTree {key} {value} />
</div>
{/each}
{/if}
</div>
<SimpleJsonTree
fontSize="14px"
title="DDI pour ce fichier"
value={codeBook}
/>
</div>
<hr class="sep h-20" />
{/if}
......
src/components/StudyViewUser.svelte
View file @ 30aa1d2b
<script lang="ts">
import JsonTree from "svelte-json-tree"
import { page } from "$app/stores"
import {
extractCodeBookText,
......@@ -14,6 +12,8 @@
iterCodeBookDataKinds,
} from "$lib/accessors"
import Drawer from "./Drawer.svelte"
import CodeBookSimpleJsonTrees from "./fields/CodeBookSimpleJsonTrees.svelte"
import SimpleJsonTree from "./fields/SimpleJsonTree.svelte"
import MarkdownDisplayDDI from "./MarkdownDisplayDDI.svelte"
import OrganizationName from "./OrganizationName.svelte"
import Tabs from "./Tabs.svelte"
......@@ -251,30 +251,8 @@
</a>
</p>
<MarkdownDisplayDDI {markdownAst} {study} />
<!-- Codebook extract for Description-->
<div class="mt-20 mb-4 text-sm text-red-400">
<b> Votre ddi pour cette section: </b>
<p class="text-xs">
Ici nous affichons une partie de votre document ddi avec le
chemin : "CodeBook/stdyDscr/stdyInfo" pour vous aider à definir
les règles de l'affichage:
</p>
</div>
{#if codeBook?.stdyDscr.method != null}
<div style="--json-tree-font-size: 12px;">
{#each Object.entries(codeBook.stdyDscr.stdyInfo) as [key, value]}
<div class="py-4">
<JsonTree {key} {value} />
</div>
{/each}
</div>
{:else}
<div class="mt-16 mb-4 text-xl text-gray-200 text-center">
<p>
Section "CodeBook/stdyDscr/stdyInfo" NOT FOUND in this DDI
</p>
</div>
{/if}
<CodeBookSimpleJsonTrees {codeBook} paths={["stdyDscr/stdyInfo"]} />
<hr class="sep h-20" />
</div>
......@@ -303,28 +281,7 @@
</p>
{/each}
<!-- Codebook extract for method -->
<div class="mt-20 mb-4 text-sm text-red-400">
<b> Votre ddi pour cette section: </b>
<p class="text-xs">
Ici nous affichons une partie de votre document ddi avec le
chemin : "CodeBook/stdyDscr/method" pour vous aider à definir
les règles de l'affichage:
</p>
</div>
{#if codeBook?.stdyDscr.method != null}
<div style="--json-tree-font-size: 12px;">
{#each Object.entries(codeBook.stdyDscr.method) as [key, value]}
<div class="py-4">
<JsonTree {key} {value} />
</div>
{/each}
</div>
{:else}
<div class="mt-16 mb-4 text-xl text-gray-200 text-center">
<p>Section "CodeBook/stdyDscr/method" NOT FOUND in this DDI</p>
</div>
{/if}
<CodeBookSimpleJsonTrees {codeBook} paths={["stdyDscr/method"]} />
<hr class="sep h-20" />
</div>
......@@ -364,30 +321,9 @@
</div>
{/if}
<!-- Codebook extract for variables -->
<div class="mt-20 mb-4 text-sm text-red-400">
<b> Votre ddi pour cette section: </b>
<p class="text-xs">
Ici nous affichons une partie de votre document ddi avec le
chemin : "codeBook/dataDscr" pour vous aider à definir les
règles de l'affichage:
</p>
</div>
{#if codeBook?.dataDscr != null}
<div style="--json-tree-font-size: 12px;">
{#each Object.entries(codeBook.dataDscr) as [key, value]}
<div class="py-4">
<JsonTree {key} {value} />
</div>
{/each}
</div>
{:else}
<div class="mt-16 mb-4 text-xl text-gray-200">
<p>Section "codeBook/dataDscr" not found in this DDI</p>
</div>
{/if}
<CodeBookSimpleJsonTrees {codeBook} paths={["dataDscr"]} />
<hr class="sep h-20" />
</div>
<hr class="sep h-20" />
<!-- ONGLET DATAFILES -->
{:else if tab === "datafiles"}
......@@ -406,30 +342,7 @@
</section>
{/each}
<!-- Codebook extract for datafiles -->
<div class="mt-20 mb-4 text-sm text-red-400">
<b> Votre ddi pour cette section: </b>
<p class="text-xs">
Ici nous affichons une partie de votre document ddi avec le
chemin : "codeBook/stdyDscr/dataAccs" pour vous aider à definir
les règles de l'affichage:
</p>
</div>
{#if codeBook?.stdyDscr.dataAccs != null}
<div style="--json-tree-font-size: 12px;">
{#each Object.entries(codeBook.stdyDscr.dataAccs) as [key, value]}
<div class="py-4">
<JsonTree {key} {value} />
</div>
{/each}
</div>
{:else}
<div class="mt-16 mb-4 text-xl text-gray-200">
<p>
Section "codeBook/stdyDscr/dataAccs" not found in this DDI
</p>
</div>
{/if}
<CodeBookSimpleJsonTrees {codeBook} paths={["stdyDscr/dataAccs"]} />
</div>
<hr class="sep h-20" />
......@@ -450,47 +363,18 @@
</section>
{/each}
<!-- Codebook extract for ressources -->
<div class="mt-20 mb-4 text-sm text-red-400">
<b> Votre ddi pour cette section: </b>
<p class="text-xs">
Ici nous affichons une partie de votre document ddi avec le
chemin : "codeBook/stdyDscr/othrStdyMat" pour vous aider à
definir les règles de l'affichage:
</p>
</div>
{#if codeBook?.stdyDscr.othrStdyMat != null}
<div style="--json-tree-font-size: 12px;">
{#each Object.entries(codeBook.stdyDscr.othrStdyMat) as [key, value]}
<div class="py-4">
<JsonTree {key} {value} />
</div>
{/each}
</div>
{:else}
<div class="mt-16 mb-4 text-xl text-gray-200">
<p>
Section "codeBook/stdyDscr/othrStdyMat" not found in this DDI
</p>
</div>
{/if}
<CodeBookSimpleJsonTrees {codeBook} paths={["stdyDscr/othrStdyMat"]} />
<hr class="sep h-20" />
</div>
<hr class="sep h-20" />
<!-- ONGLET CODEBOOK -->
{:else if tab === "json"}
<div class="flex flex-col overflow-hidden my-4 ml-16">
<div style="--json-tree-font-size: 14px;">
{#if codeBook == null}
<JsonTree value={codeBook} />
{:else}
{#each Object.entries(codeBook) as [key, value]}
<div class="py-4">
<JsonTree {key} {value} />
</div>
{/each}
{/if}
</div>
<SimpleJsonTree
fontSize="14px"
title="DDI pour ce fichier"
value={codeBook}
/>
</div>
<hr class="sep h-20" />
{/if}
......
src/components/Tabs.svelte
View file @ 30aa1d2b
<script lang="ts">
import { page } from "$app/stores"
import { localize } from "$lib/stores"
import { debugMode, localize } from "$lib/stores"
import type { Tab } from "../tabs"
export let divClass: string =
......@@ -25,14 +25,16 @@
<div class={divClass}>
{#each tabs as tab}
{#if symbol === tab.symbol}
<span class="portal px-3 text-gray-500 ~neutral active"
>{_(tab.label)}</span
>
{:else}
<a class="portal px-3 text-gray-500" href={newUrl(pathname, tab.symbol)}
>{_(tab.label)}</a
>
{#if !tab.debugOnly || $debugMode}
{#if symbol === tab.symbol}
<span class="portal px-3 text-gray-500 ~neutral active"
>{_(tab.label)}</span
>
{:else}
<a class="portal px-3 text-gray-500" href={newUrl(pathname, tab.symbol)}
>{_(tab.label)}</a
>
{/if}
{/if}
{/each}
</div>
src/components/VariableBody.svelte
View file @ 30aa1d2b
<script lang="ts">
import JsonTree from "svelte-json-tree"
import { extractCodeBookText, iterVariableCategories } from "$lib/accessors"
import SimpleJsonTree from "./fields/SimpleJsonTree.svelte"
import type { Var } from "$lib/raw_types/codebooks"
export let caseQuantity: number | null | undefined
......@@ -133,21 +132,6 @@
{/each}
</table>
{/if}
<!--
<div style="--json-tree-font-size: 12px;">
{#each Object.entries(variable.catgry) as [key, value]}
<JsonTree {key} {value} />
{/each}
</div>
-->
<!--
<div class="mt-10 mb-4 text-xs text-red-400">
<b> Votre ddi pour cette variable : </b>
</div>
<div style="--json-tree-font-size: 12px;">
{#each Object.entries(variable) as [key, value]}
<JsonTree {key} {value} />
{/each}
</div>
-->
<SimpleJsonTree title="DDI pour cette variable" value={variable} />
</section>
src/components/fields/CodeBookSimpleJsonTrees.svelte 0 → 100644
View file @ 30aa1d2b
<script lang="ts">
import JsonTree from "svelte-json-tree"
import { getCodeBookElement } from "$lib/accessors"
import type { CodeBook } from "$lib/raw_types/codebooks"
import { debugMode } from "$lib/stores"
export let codeBook: CodeBook
export let paths: string[]
export let title = "CodeBook DDI"
</script>
{#if $debugMode}
<section class="px-20 py-10">
{#if title}
<h1 class="font-bold text-center text-gray-300 text-lg uppercase">
{title}
</h1>
{/if}
{#each paths.map( (path) => [path, getCodeBookElement(codeBook, path)], ) as [path, element]}
{#if element != null}
<p class="my-10 text-l text-gray-400">
Section "{path}" :
</p>
<div class="py-4" style="--json-tree-font-size: 12px;">
<JsonTree value={element} />
</div>
{:else}
<p class="my-10 text-l text-gray-400">
Section "{path}" not found in this DDI
</p>
{/if}
{/each}
</section>
{/if}
src/components/fields/SimpleJsonTree.svelte 0 → 100644
View file @ 30aa1d2b
<script lang="ts">
import JsonTree from "svelte-json-tree"
import { debugMode } from "$lib/stores"
export let fontSize = "12px"
export let key: string | undefined | null = undefined
export let title: string | undefined | null = undefined
export let value: any
</script>
{#if $debugMode}
<section class="px-20 py-10">
{#if title}
<h1 class="font-bold text-center text-gray-300 text-lg uppercase">
{title}
</h1>
{/if}
<div class="py-4" style="--json-tree-font-size: {fontSize};">