Skip to content

feat: add simple error to showcase in ui #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
phalberg merged 4 commits into from
Jun 13, 2026
Merged

feat: add simple error to showcase in ui #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
59d1150
feat: add simple error to showcase in ui
phalberg Jun 13, 2026
a85873e
chore: make error message cleaner
phalberg Jun 13, 2026
e55db48
chore: add tailwind and do some basic configurations for frontpage
phalberg Jun 13, 2026
8538099
fix: adjust error code to be right way for now
phalberg Jun 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 48 additions & 13 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,57 @@
<head>
<meta charset="UTF-8">
<title>ConfigLock Web Portal</title>
<link rel="stylesheet" href="styles.css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body>
<h2>ConfigLock Web Portal</h2>
<input type="text" id="userName" placeholder="owner (e.g phalberg)">
<input type="text" id="repoName" placeholder="repo">
<input type="text" id="branchName" placeholder="branch (e.g main)">
<input type="text" id="pathToFile" placeholder="path/to/config.yaml">
<button onclick="fetchFile()">Fetch Config</button>
<div id="url"></div>
<body class="bg-slate-50 text-slate-800 font-sans min-h-screen p-4 sm:p-8">

<h3>Result:</h3>
<div id="output">No data yet...</div>
<!-- For webassembly -->
<script src="https://cdn.jsdelivr.net/pyodide/v0.26.1/full/pyodide.js"></script>
<div class="max-w-5xl mx-auto space-y-6">

<header class="border-b border-slate-200 pb-4">
<h2 class="text-2xl font-bold text-slate-900 sm:text-3xl tracking-tight">ConfigLock Web Portal</h2>
</header>

<main class="bg-white p-6 rounded-xl border border-slate-200 shadow-xs space-y-4">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
<input type="text" id="userName" placeholder="owner (e.g phalberg)"
class="w-full px-3 py-2 text-sm bg-slate-50 border border-slate-200 rounded-lg focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all">

<input type="text" id="repoName" placeholder="repo"
class="w-full px-3 py-2 text-sm bg-slate-50 border border-slate-200 rounded-lg focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all">

<input type="text" id="branchName" placeholder="branch (e.g main)"
class="w-full px-3 py-2 text-sm bg-slate-50 border border-slate-200 rounded-lg focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all">

<input type="text" id="pathToFile" placeholder="path/to/config.yaml"
class="w-full px-3 py-2 text-sm bg-slate-50 border border-slate-200 rounded-lg focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all">
</div>

<div class="flex flex-col sm:flex-row sm:items-center gap-4 pt-2">
<button onclick="fetchFile()"
class="px-5 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg shadow-xs transition-colors cursor-pointer w-full sm:w-auto text-center">
Fetch Config
</button>
<div id="url" class="text-xs text-slate-400 font-mono break-all"></div>
</div>
</main>

<div class="grid grid-cols-1 md:grid-cols-2 gap-6">

<section class="bg-white p-6 rounded-xl border border-slate-200 shadow-xs flex flex-col">
<h3 class="text-base font-semibold text-slate-900 mb-3">Result:</h3>
<div id="output" class="bg-slate-900 text-emerald-400 p-4 rounded-lg font-mono text-xs overflow-auto flex-1 min-h-[180px] whitespace-pre-wrap">No data yet...</div>
</section>

<section class="bg-white p-6 rounded-xl border border-slate-200 shadow-xs flex flex-col">
<h3 class="text-base font-semibold text-slate-900 mb-3">Errors / Status:</h3>
<div id="errors" class="bg-slate-50 border border-slate-200 text-slate-600 p-4 rounded-lg font-mono text-xs overflow-auto flex-1 min-h-[180px] whitespace-pre-wrap">No errors yet..</div>
</section>

</div>

</div>

<script src="https://cdn.jsdelivr.net/pyodide/v0.26.1/full/pyodide.js"></script>
<script type="module" src="script.js"></script>
</body>
</html>
28 changes: 21 additions & 7 deletions docs/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,10 +112,6 @@ async function fetchFile() {

const [pyodide, lockFileContents, pythonCode] = await fetchContents(lockFilePath, validatorFilePath);





output.innerText = lockFileContents;
output.contentEditable = 'true';

Expand All @@ -129,17 +125,35 @@ async function fetchFile() {

timeoutId = setTimeout(() => {
const parsedNewFile = YAML.parse(newContent);

try{
validatorFunc(
pyoDide.toPy(parsedLockFile),
pyoDide.toPy(parsedNewFile),
pyoDide.toPy(parsedLockFile),
context
);
console.log("Success!")

console.log("Success!");
errors.innerText = "Sucess!";
} catch(err){
console.log('Error: ' + err.message);
const errorStartIndex = err.message.indexOf("ValidationError:");

if (errorStartIndex !== -1) {
const cleanMessage = err.message.substring(errorStartIndex).trim();

errors.innerText = cleanMessage;
//showNotificationBanner(cleanMessage);

}else{
console.log('Error: ' + err.message);
}
}

}, sleep_time);
};
} catch (err) {
output.innerText = 'Error: ' + err.message;

}
}

Expand Down
28 changes: 0 additions & 28 deletions docs/styles.css
View file
Open in desktop

This file was deleted.

Loading