mirror of
https://github.com/jcreek/Tech-Radar-Editor.git
synced 2026-07-12 18:43:46 +00:00
feat(*): Enable loading the file and creating a PR in Azure Devops
This commit is contained in:
Joshua Creek
@@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Tech Radar Editor</title>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</head>
|
||||
<body>
|
||||
<tech-radar-editor></tech-radar-editor>
|
||||
|
||||
<script>
|
||||
// Listen for custom events from the web component
|
||||
document.querySelector('tech-radar-editor').addEventListener('radar-data-loaded', (e) => {
|
||||
console.log('Data loaded:', e.detail.data);
|
||||
});
|
||||
document.querySelector('tech-radar-editor').addEventListener('radar-data-change', (e) => {
|
||||
console.log('Data changed:', e.detail.data);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,50 @@
|
||||
{
|
||||
"name": "tech-radar-editor",
|
||||
"version": "1.2.0",
|
||||
"type": "module",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/jcreek/Tech-Radar-Editor.git"
|
||||
},
|
||||
"keywords": [
|
||||
"tech-radar",
|
||||
"editor",
|
||||
"visualization",
|
||||
"web component",
|
||||
"svelte",
|
||||
"tech trends",
|
||||
"technology radar",
|
||||
"opensource",
|
||||
"thoughtworks",
|
||||
"zalando"
|
||||
],
|
||||
"author": "Josh Creek",
|
||||
"license": "GPL-3.0",
|
||||
"main": "dist/tech-radar-editor.umd.js",
|
||||
"module": "dist/tech-radar-editor.es.js",
|
||||
"types": "dist/main.d.ts",
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build && tsc -p tsconfig.build.json",
|
||||
"preview": "vite preview",
|
||||
"check": "svelte-check --tsconfig ./tsconfig.json && tsc -p tsconfig.node.json"
|
||||
},
|
||||
"dependencies": {
|
||||
"svelte": "^4.2.18"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/vite-plugin-svelte": "^3.1.1",
|
||||
"@tsconfig/svelte": "^5.0.4",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"postcss": "^8.4.47",
|
||||
"postcss-load-config": "^6.0.1",
|
||||
"svelte-check": "^3.8.5",
|
||||
"tailwindcss": "^3.4.13",
|
||||
"tslib": "^2.6.3",
|
||||
"typescript": "^5.5.3",
|
||||
"vite": "^5.4.1"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,581 @@
|
||||
<svelte:options
|
||||
customElement={{
|
||||
tag: "tech-radar-editor",
|
||||
props: {
|
||||
dataUrl: { attribute: "data-url", reflect: false },
|
||||
dataJson: { attribute: "data-json", reflect: false },
|
||||
hideTitle: { attribute: "hide-title", type: "Boolean", reflect: false },
|
||||
hideExport: { attribute: "hide-export", type: "Boolean", reflect: false },
|
||||
hideJsonInput: { attribute: "hide-json-input", type: "Boolean", reflect: false },
|
||||
hideJsonPreview: { attribute: "hide-json-preview", type: "Boolean", reflect: false },
|
||||
autoExpandEntries: { attribute: "auto-expand-entries", type: "Boolean", reflect: false }
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
<style lang="postcss">
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import type { TechRadarData, Quadrant, Ring, Entry, TimelineEntry } from "./types";
|
||||
|
||||
// Existing prop
|
||||
export let dataUrl: string = '';
|
||||
|
||||
// New props (all backward-compatible, defaulting to falsy)
|
||||
export let dataJson: string = '';
|
||||
export let hideTitle: boolean | string = false;
|
||||
export let hideExport: boolean | string = false;
|
||||
export let hideJsonInput: boolean | string = false;
|
||||
export let hideJsonPreview: boolean | string = false;
|
||||
export let autoExpandEntries: boolean | string = false;
|
||||
|
||||
// Ref to container element, used to find the custom element host for event dispatch
|
||||
let containerEl: HTMLElement;
|
||||
|
||||
function dispatchCustomEvent(name: string, detail: unknown) {
|
||||
if (!containerEl) return;
|
||||
const root = containerEl.getRootNode();
|
||||
if (root && 'host' in root) {
|
||||
(root as ShadowRoot).host.dispatchEvent(
|
||||
new CustomEvent(name, { detail, bubbles: true, composed: true })
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Boolean coercion (Svelte 4 custom elements pass strings for attributes)
|
||||
$: _hideTitle = hideTitle === true || hideTitle === 'true' || hideTitle === '';
|
||||
$: _hideExport = hideExport === true || hideExport === 'true' || hideExport === '';
|
||||
$: _hideJsonInput = hideJsonInput === true || hideJsonInput === 'true' || hideJsonInput === '';
|
||||
$: _hideJsonPreview = hideJsonPreview === true || hideJsonPreview === 'true' || hideJsonPreview === '';
|
||||
$: _autoExpandEntries = autoExpandEntries === true || autoExpandEntries === 'true' || autoExpandEntries === '';
|
||||
|
||||
let techRadarData: TechRadarData = {
|
||||
title: '',
|
||||
quadrants: [],
|
||||
rings: [],
|
||||
entries: []
|
||||
};
|
||||
|
||||
let jsonTextarea: HTMLTextAreaElement;
|
||||
|
||||
let showRings = false;
|
||||
let showQuadrants = false;
|
||||
let showEntries = false;
|
||||
|
||||
let dataLoaded = false;
|
||||
|
||||
let idCounter = 0;
|
||||
function generateId() {
|
||||
return `id-${idCounter++}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Return a clean copy of the data without internal `expanded` properties.
|
||||
*/
|
||||
function getCleanData(data: TechRadarData): TechRadarData {
|
||||
return {
|
||||
title: data.title,
|
||||
quadrants: data.quadrants.map(({ expanded, ...q }) => q as Quadrant),
|
||||
rings: data.rings.map(({ expanded, ...r }) => r as Ring),
|
||||
entries: data.entries.map(({ expanded, ...e }) => ({
|
||||
...e,
|
||||
timeline: e.timeline.map(({ expanded: _exp, ...t }) => t as TimelineEntry),
|
||||
} as Entry)),
|
||||
};
|
||||
}
|
||||
|
||||
// Reactive dispatch: emit radar-data-change whenever techRadarData changes
|
||||
$: if (dataLoaded && containerEl && techRadarData.title !== undefined) {
|
||||
dispatchCustomEvent('radar-data-change', { data: getCleanData(techRadarData) });
|
||||
}
|
||||
|
||||
function updateEntry(updatedEntry: Entry) {
|
||||
techRadarData.entries = techRadarData.entries.map(entry =>
|
||||
entry.id === updatedEntry.id ? updatedEntry : entry
|
||||
);
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
if (dataJson) {
|
||||
try {
|
||||
const parsed = JSON.parse(dataJson);
|
||||
initializeData(parsed);
|
||||
techRadarData = parsed;
|
||||
if (_autoExpandEntries) showEntries = true;
|
||||
dataLoaded = true;
|
||||
dispatchCustomEvent('radar-data-loaded', { data: getCleanData(techRadarData) });
|
||||
} catch (err) {
|
||||
console.error('Error parsing dataJson:', err);
|
||||
}
|
||||
} else if (dataUrl) {
|
||||
try {
|
||||
const response = await fetch(dataUrl);
|
||||
if (!response.ok) {
|
||||
throw new Error(
|
||||
`Failed to fetch from ${dataUrl}: ${response.status}`
|
||||
);
|
||||
}
|
||||
const remoteData = await response.json();
|
||||
initializeData(remoteData);
|
||||
techRadarData = remoteData;
|
||||
|
||||
showRings = false;
|
||||
showQuadrants = false;
|
||||
showEntries = false;
|
||||
if (_autoExpandEntries) showEntries = true;
|
||||
dataLoaded = true;
|
||||
dispatchCustomEvent('radar-data-loaded', { data: getCleanData(techRadarData) });
|
||||
} catch (err) {
|
||||
console.error(`Error fetching data from ${dataUrl}:`, err);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function loadJson() {
|
||||
try {
|
||||
const parsedData = JSON.parse(jsonTextarea.value);
|
||||
|
||||
initializeData(parsedData);
|
||||
|
||||
techRadarData = parsedData;
|
||||
|
||||
showRings = false;
|
||||
showQuadrants = false;
|
||||
showEntries = false;
|
||||
dataLoaded = true;
|
||||
dispatchCustomEvent('radar-data-loaded', { data: getCleanData(techRadarData) });
|
||||
} catch (error) {
|
||||
alert('Invalid JSON format');
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
function initializeData(data: TechRadarData) {
|
||||
data.entries.forEach((entry: Entry) => {
|
||||
entry.expanded = false;
|
||||
if (!entry.timeline) entry.timeline = [];
|
||||
entry.timeline.forEach((timelineItem: TimelineEntry) => {
|
||||
timelineItem.expanded = false;
|
||||
timelineItem.moved = Number(timelineItem.moved);
|
||||
if (!timelineItem.id) timelineItem.id = generateId();
|
||||
});
|
||||
if (!entry.id) entry.id = generateId();
|
||||
});
|
||||
|
||||
data.rings.forEach((ring: Ring) => {
|
||||
ring.expanded = false;
|
||||
if (!ring.id) ring.id = generateId();
|
||||
});
|
||||
|
||||
data.quadrants.forEach((quadrant: Quadrant) => {
|
||||
quadrant.expanded = false;
|
||||
if (!quadrant.id) quadrant.id = generateId();
|
||||
});
|
||||
}
|
||||
|
||||
function addRing() {
|
||||
const newRing: Ring = {
|
||||
id: generateId(),
|
||||
name: 'New Ring',
|
||||
color: '#000000',
|
||||
description: '',
|
||||
expanded: true
|
||||
};
|
||||
techRadarData.rings = [...techRadarData.rings, newRing];
|
||||
}
|
||||
|
||||
function addQuadrant() {
|
||||
const newQuadrant: Quadrant = {
|
||||
id: generateId(),
|
||||
name: 'New Quadrant',
|
||||
expanded: true
|
||||
};
|
||||
techRadarData.quadrants = [...techRadarData.quadrants, newQuadrant];
|
||||
}
|
||||
|
||||
function addEntry() {
|
||||
const newEntry: Entry = {
|
||||
id: generateId(),
|
||||
title: 'New Entry',
|
||||
description: '',
|
||||
key: 'new-key',
|
||||
url: '',
|
||||
quadrant: techRadarData.quadrants.length > 0 ? techRadarData.quadrants[0].id : '',
|
||||
timeline: [],
|
||||
expanded: true
|
||||
};
|
||||
techRadarData.entries = [...techRadarData.entries, newEntry];
|
||||
}
|
||||
|
||||
function addTimelineEntry(entryId: string) {
|
||||
const entry = techRadarData.entries.find(e => e.id === entryId);
|
||||
if (entry) {
|
||||
const newTimelineEntry: TimelineEntry = {
|
||||
id: generateId(),
|
||||
moved: 0,
|
||||
ringId: techRadarData.rings.length > 0 ? techRadarData.rings[0].id : '',
|
||||
date: '',
|
||||
description: '',
|
||||
expanded: true
|
||||
};
|
||||
entry.timeline = [...entry.timeline, newTimelineEntry];
|
||||
updateEntry({ ...entry });
|
||||
}
|
||||
}
|
||||
|
||||
function removeItem<T>(items: T[], itemId: string): T[] {
|
||||
return items.filter((item: any) => item.id !== itemId);
|
||||
}
|
||||
|
||||
function removeRing(ringId: string) {
|
||||
if (confirm('Are you sure you want to remove this ring?')) {
|
||||
techRadarData.rings = removeItem(techRadarData.rings, ringId);
|
||||
}
|
||||
}
|
||||
|
||||
function removeQuadrant(quadrantId: string) {
|
||||
if (confirm('Are you sure you want to remove this quadrant?')) {
|
||||
techRadarData.quadrants = removeItem(techRadarData.quadrants, quadrantId);
|
||||
}
|
||||
}
|
||||
|
||||
function removeEntry(entryId: string) {
|
||||
if (confirm('Are you sure you want to remove this entry?')) {
|
||||
techRadarData.entries = removeItem(techRadarData.entries, entryId);
|
||||
}
|
||||
}
|
||||
|
||||
function removeTimelineEntry(entryId: string, timelineItemId: string) {
|
||||
const entry = techRadarData.entries.find(e => e.id === entryId);
|
||||
if (entry) {
|
||||
if (confirm('Are you sure you want to remove this timeline entry?')) {
|
||||
entry.timeline = removeItem(entry.timeline, timelineItemId);
|
||||
updateEntry({ ...entry });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function exportJson() {
|
||||
// Perform validation
|
||||
const validationErrors = validateTechRadarData(techRadarData);
|
||||
|
||||
if (validationErrors.length > 0) {
|
||||
alert('Validation errors:\n' + validationErrors.join('\n'));
|
||||
return;
|
||||
}
|
||||
|
||||
const cleanData = getCleanData(techRadarData);
|
||||
const jsonString = JSON.stringify(cleanData, null, 2);
|
||||
navigator.clipboard.writeText(jsonString)
|
||||
.then(() => alert('JSON data has been copied to the clipboard!'))
|
||||
.catch(() => alert('Failed to copy JSON data.'));
|
||||
}
|
||||
|
||||
function validateTechRadarData(data: TechRadarData): string[] {
|
||||
const errors: string[] = [];
|
||||
|
||||
// Validate rings
|
||||
data.rings.forEach((ring, index) => {
|
||||
if (!ring.id) errors.push(`Ring ${index + 1}: ID is required.`);
|
||||
if (!ring.name) errors.push(`Ring ${index + 1}: Name is required.`);
|
||||
if (!ring.color) errors.push(`Ring ${index + 1}: Color is required.`);
|
||||
});
|
||||
|
||||
// Validate quadrants
|
||||
data.quadrants.forEach((quadrant, index) => {
|
||||
if (!quadrant.id) errors.push(`Quadrant ${index + 1}: ID is required.`);
|
||||
if (!quadrant.name) errors.push(`Quadrant ${index + 1}: Name is required.`);
|
||||
});
|
||||
|
||||
// Validate entries
|
||||
data.entries.forEach((entry, index) => {
|
||||
if (!entry.id) errors.push(`Entry ${index + 1}: ID is required.`);
|
||||
if (!entry.title) errors.push(`Entry ${index + 1}: Title is required.`);
|
||||
if (!entry.key) errors.push(`Entry ${index + 1}: Key is required.`);
|
||||
if (!entry.quadrant) errors.push(`Entry ${index + 1}: Quadrant is required.`);
|
||||
if (!entry.timeline || entry.timeline.length === 0) {
|
||||
errors.push(`Entry ${index + 1}: At least one timeline entry is required.`);
|
||||
} else {
|
||||
entry.timeline.forEach((timelineItem, timelineIndex) => {
|
||||
if (typeof timelineItem.moved !== 'number') {
|
||||
errors.push(`Entry ${index + 1}, Timeline ${timelineIndex + 1}: Moved must be a number.`);
|
||||
}
|
||||
if (!timelineItem.ringId) {
|
||||
errors.push(`Entry ${index + 1}, Timeline ${timelineIndex + 1}: Ring ID is required.`);
|
||||
}
|
||||
if (!timelineItem.date) {
|
||||
errors.push(`Entry ${index + 1}, Timeline ${timelineIndex + 1}: Date is required.`);
|
||||
}
|
||||
if (!timelineItem.description) {
|
||||
errors.push(`Entry ${index + 1}, Timeline ${timelineIndex + 1}: Description is required.`);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return errors;
|
||||
}
|
||||
|
||||
// Reactive statement to update JSON preview whenever techRadarData changes
|
||||
$: jsonString = JSON.stringify(techRadarData, null, 2);
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto p-4" bind:this={containerEl}>
|
||||
{#if !_hideTitle}
|
||||
<h1 class="text-2xl font-bold mb-4">Tech Radar Editor</h1>
|
||||
{/if}
|
||||
|
||||
{#if !_hideJsonInput}
|
||||
<div class="mb-4">
|
||||
<textarea
|
||||
bind:this={jsonTextarea}
|
||||
class="w-full p-2 border rounded text-black"
|
||||
placeholder="Paste your JSON here..."
|
||||
></textarea>
|
||||
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-2" on:click={loadJson}>
|
||||
Load JSON
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Rings Section -->
|
||||
<h2 class="text-xl font-bold mb-2 flex items-center">
|
||||
<button on:click={() => showRings = !showRings} type="button" class="mr-2">
|
||||
{#if showRings}
|
||||
[-]
|
||||
{:else}
|
||||
[+]
|
||||
{/if}
|
||||
</button>
|
||||
Rings
|
||||
</h2>
|
||||
|
||||
{#if showRings}
|
||||
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded mb-4" on:click={addRing}>
|
||||
Add Ring
|
||||
</button>
|
||||
|
||||
{#each techRadarData.rings as ring, ringIndex (ring.id)}
|
||||
<fieldset class="border p-2 mb-2">
|
||||
<legend class="font-bold flex items-center">
|
||||
<button on:click={() => ring.expanded = !ring.expanded} type="button" class="mr-2">
|
||||
{#if ring.expanded}
|
||||
[-]
|
||||
{:else}
|
||||
[+]
|
||||
{/if}
|
||||
</button>
|
||||
Ring {ringIndex + 1}: {ring.name}
|
||||
</legend>
|
||||
|
||||
{#if ring.expanded}
|
||||
<label class="block mb-1">
|
||||
ID:
|
||||
<input type="text" bind:value={ring.id} class="border p-1 w-full text-black"/>
|
||||
</label>
|
||||
|
||||
<label class="block mb-1">
|
||||
Name:
|
||||
<input type="text" bind:value={ring.name} class="border p-1 w-full text-black"/>
|
||||
</label>
|
||||
|
||||
<label class="block mb-1">
|
||||
Color:
|
||||
<input type="color" bind:value={ring.color} class="border p-1 w-full text-black"/>
|
||||
</label>
|
||||
|
||||
<label class="block mb-1">
|
||||
Description:
|
||||
<textarea bind:value={ring.description} class="border p-1 w-full text-black"></textarea>
|
||||
</label>
|
||||
|
||||
<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-2 rounded" on:click={() => removeRing(ring.id)} type="button">Remove Ring</button>
|
||||
{/if}
|
||||
</fieldset>
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
<!-- Quadrants Section -->
|
||||
<h2 class="text-xl font-bold mb-2 flex items-center">
|
||||
<button on:click={() => showQuadrants = !showQuadrants} type="button" class="mr-2">
|
||||
{#if showQuadrants}
|
||||
[-]
|
||||
{:else}
|
||||
[+]
|
||||
{/if}
|
||||
</button>
|
||||
Quadrants
|
||||
</h2>
|
||||
|
||||
{#if showQuadrants}
|
||||
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded mb-4" on:click={addQuadrant}>
|
||||
Add Quadrant
|
||||
</button>
|
||||
|
||||
{#each techRadarData.quadrants as quadrant, quadrantIndex (quadrant.id)}
|
||||
<fieldset class="border p-2 mb-2">
|
||||
<legend class="font-bold flex items-center">
|
||||
<button on:click={() => quadrant.expanded = !quadrant.expanded} type="button" class="mr-2">
|
||||
{#if quadrant.expanded}
|
||||
[-]
|
||||
{:else}
|
||||
[+]
|
||||
{/if}
|
||||
</button>
|
||||
Quadrant {quadrantIndex + 1}: {quadrant.name}
|
||||
</legend>
|
||||
|
||||
{#if quadrant.expanded}
|
||||
<label class="block mb-1">
|
||||
ID:
|
||||
<input type="text" bind:value={quadrant.id} class="border p-1 w-full text-black"/>
|
||||
</label>
|
||||
|
||||
<label class="block mb-1">
|
||||
Name:
|
||||
<input type="text" bind:value={quadrant.name} class="border p-1 w-full text-black"/>
|
||||
</label>
|
||||
|
||||
<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-2 rounded" on:click={() => removeQuadrant(quadrant.id)} type="button">Remove Quadrant</button>
|
||||
{/if}
|
||||
</fieldset>
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
<!-- Entries Section -->
|
||||
<h2 class="text-xl font-bold mb-2 flex items-center">
|
||||
<button on:click={() => showEntries = !showEntries} type="button" class="mr-2">
|
||||
{#if showEntries}
|
||||
[-]
|
||||
{:else}
|
||||
[+]
|
||||
{/if}
|
||||
</button>
|
||||
Entries
|
||||
</h2>
|
||||
|
||||
{#if showEntries}
|
||||
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded mb-4" on:click={addEntry}>
|
||||
Add Entry
|
||||
</button>
|
||||
|
||||
{#each techRadarData.entries as entry, entryIndex (entry.id)}
|
||||
<fieldset class="border p-2 mb-2">
|
||||
<legend class="font-bold flex items-center">
|
||||
<button on:click={() => entry.expanded = !entry.expanded} type="button" class="mr-2">
|
||||
{#if entry.expanded}
|
||||
[-]
|
||||
{:else}
|
||||
[+]
|
||||
{/if}
|
||||
</button>
|
||||
Entry {entryIndex + 1}: {entry.title}
|
||||
</legend>
|
||||
|
||||
{#if entry.expanded}
|
||||
<label class="block mb-1">
|
||||
ID:
|
||||
<input type="text" bind:value={entry.id} class="border p-1 w-full text-black"/>
|
||||
</label>
|
||||
|
||||
<label class="block mb-1">
|
||||
Title:
|
||||
<input type="text" bind:value={entry.title} class="border p-1 w-full text-black"/>
|
||||
</label>
|
||||
|
||||
<label class="block mb-1">
|
||||
Description:
|
||||
<textarea bind:value={entry.description} class="border p-1 w-full text-black"></textarea>
|
||||
</label>
|
||||
|
||||
<label class="block mb-1">
|
||||
Key:
|
||||
<input type="text" bind:value={entry.key} class="border p-1 w-full text-black"/>
|
||||
</label>
|
||||
|
||||
<label class="block mb-1">
|
||||
URL:
|
||||
<input type="text" bind:value={entry.url} class="border p-1 w-full text-black"/>
|
||||
</label>
|
||||
|
||||
<label class="block mb-1">
|
||||
Quadrant:
|
||||
<select bind:value={entry.quadrant} class="border p-1 w-full text-black">
|
||||
{#each techRadarData.quadrants as quadrant}
|
||||
<option value={quadrant.id}>{quadrant.name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-1 px-2 rounded mb-2" on:click={() => addTimelineEntry(entry.id)} type="button">Add Timeline Entry</button>
|
||||
|
||||
<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-2 rounded mb-2" on:click={() => removeEntry(entry.id)} type="button">Remove Entry</button>
|
||||
|
||||
<!-- Timeline entries -->
|
||||
{#each entry.timeline as timelineItem, timelineIndex (timelineItem.id)}
|
||||
<fieldset class="border p-2 mb-2">
|
||||
<legend class="font-bold flex items-center">
|
||||
<button on:click={() => timelineItem.expanded = !timelineItem.expanded} type="button" class="mr-2">
|
||||
{#if timelineItem.expanded}
|
||||
[-]
|
||||
{:else}
|
||||
[+]
|
||||
{/if}
|
||||
</button>
|
||||
Timeline {timelineIndex + 1}
|
||||
</legend>
|
||||
|
||||
{#if timelineItem.expanded}
|
||||
<label class="block mb-1">
|
||||
Moved:
|
||||
<select bind:value={timelineItem.moved} class="border p-1 w-full text-black">
|
||||
<option value={-1}>Moved Out (-1)</option>
|
||||
<option value={0}>Stayed (0)</option>
|
||||
<option value={1}>Moved In (1)</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label class="block mb-1">
|
||||
Ring ID:
|
||||
<select bind:value={timelineItem.ringId} class="border p-1 w-full text-black">
|
||||
{#each techRadarData.rings as ring}
|
||||
<option value={ring.id}>{ring.name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label class="block mb-1">
|
||||
Date:
|
||||
<input type="date" bind:value={timelineItem.date} class="border p-1 w-full text-black"/>
|
||||
</label>
|
||||
|
||||
<label class="block mb-1">
|
||||
Description:
|
||||
<textarea bind:value={timelineItem.description} class="border p-1 w-full text-black"></textarea>
|
||||
</label>
|
||||
|
||||
<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-2 rounded" on:click={() => removeTimelineEntry(entry.id, timelineItem.id)} type="button">Remove Timeline Entry</button>
|
||||
{/if}
|
||||
</fieldset>
|
||||
{/each}
|
||||
{/if}
|
||||
</fieldset>
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
{#if !_hideExport}
|
||||
<button class="bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded mb-4 mt-4" on:click={exportJson}>
|
||||
Export JSON
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
{#if !_hideJsonPreview}
|
||||
<h2 class="text-xl font-bold mb-2">JSON Preview:</h2>
|
||||
<pre class="p-2 bg-gray-100 rounded text-black">{jsonString}</pre>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
@@ -0,0 +1,3 @@
|
||||
import TechRadarEditor from "./TechRadarEditor.svelte";
|
||||
|
||||
export type { TechRadarData, Quadrant, Ring, Entry, TimelineEntry } from "./types";
|
||||
@@ -0,0 +1,40 @@
|
||||
export interface TechRadarData {
|
||||
title: string;
|
||||
quadrants: Quadrant[];
|
||||
rings: Ring[];
|
||||
entries: Entry[];
|
||||
}
|
||||
|
||||
export interface Quadrant {
|
||||
id: string;
|
||||
name: string;
|
||||
expanded?: boolean;
|
||||
}
|
||||
|
||||
export interface Ring {
|
||||
id: string;
|
||||
name: string;
|
||||
color: string;
|
||||
description?: string;
|
||||
expanded?: boolean;
|
||||
}
|
||||
|
||||
export interface Entry {
|
||||
id: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
key: string;
|
||||
url?: string;
|
||||
quadrant: string;
|
||||
timeline: TimelineEntry[];
|
||||
expanded?: boolean;
|
||||
}
|
||||
|
||||
export interface TimelineEntry {
|
||||
id: string;
|
||||
moved: number; // -1, 0, 1
|
||||
ringId: string;
|
||||
date: string; // format YYYY-MM-dd
|
||||
description: string;
|
||||
expanded?: boolean;
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
/// <reference types="svelte" />
|
||||
/// <reference types="vite/client" />
|
||||
@@ -0,0 +1,8 @@
|
||||
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
|
||||
|
||||
export default {
|
||||
compilerOptions: {
|
||||
customElement: true,
|
||||
},
|
||||
preprocess: vitePreprocess(),
|
||||
};
|
||||
@@ -0,0 +1,7 @@
|
||||
module.exports = {
|
||||
content: ["./src/**/*.{svelte,js,ts}", "./public/index.html"],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
Binary file not shown.
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"declaration": true,
|
||||
"declarationDir": "dist",
|
||||
"emitDeclarationOnly": true
|
||||
},
|
||||
"include": ["src/**/*"]
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"extends": "@tsconfig/svelte/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"resolveJsonModule": true,
|
||||
/**
|
||||
* Typecheck JS in `.svelte` and `.js` files by default.
|
||||
* Disable checkJs if you'd like to use dynamic types in JS.
|
||||
* Note that setting allowJs false does not prevent the use
|
||||
* of JS in `.svelte` files.
|
||||
*/
|
||||
"allowJs": true,
|
||||
"checkJs": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force"
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"strict": true,
|
||||
"noEmit": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { defineConfig } from "vite";
|
||||
import { svelte, vitePreprocess } from "@sveltejs/vite-plugin-svelte";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
svelte({
|
||||
preprocess: vitePreprocess(),
|
||||
compilerOptions: {
|
||||
customElement: true,
|
||||
},
|
||||
}),
|
||||
],
|
||||
build: {
|
||||
lib: {
|
||||
entry: "src/main.ts",
|
||||
formats: ["es", "umd"],
|
||||
name: "TechRadarEditor",
|
||||
fileName: (format) => `tech-radar-editor.${format}.js`,
|
||||
},
|
||||
cssCodeSplit: false, // Ensure all CSS is bundled together
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user