mstoeck3/fscalc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

updates to UX and NTFS

Browse Source
This commit is contained in:
overcuriousity
2025-10-21 22:27:08 +02:00
parent 8cf8900784
commit 8fdb737ea8
9 changed files with 659 additions and 413 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
webroot/js/filesystems/base.js
View File

@@ -1,4 +1,6 @@
// Base filesystem class that defines the common interface for all filesystem implementations
// Base filesystem class that defines the common interface for all filesystem implementations.
// Now supports multi-value result rows (bytes, sectors, etc.) in a single output line.
import { parseHex, validateInput, checkDependencies, updateResultItem } from '../utils.js';
@@ -18,13 +20,20 @@ export class BaseFilesystem {
const variant = this.variants.find(v => v.id === variantId);
if (!variant) return '';
// Helper function to format labels with offset information
const formatLabel = (label) => {
// Match patterns like "(Boot-Offset 0x00)", "(MFT-Header-Offset 0x14)", "(Offset 0x00)" and wrap offset info
const offsetPattern = /(\((Boot-Offset|MFT-Header-Offset|Offset) [^)]+\))/g;
return label.replace(offsetPattern, '<span class="offset-info">$1</span>');
};
return `
<div class="section constants">
<h2>Konstanten</h2>
<div class="input-grid">
${variant.constants.map(constant => `
<div class="input-group">
<label for="${constant.id}">${constant.label} <span class="unit-indicator">(${constant.unit})</span>:</label>
<label for="${constant.id}">${formatLabel(constant.label)} <span class="unit-indicator">(${constant.unit})</span>:</label>
<input type="text" id="${constant.id}" value="${constant.default}" placeholder="${constant.default}">
<div class="error-message" id="${constant.id}-error"></div>
</div>
@@ -34,18 +43,32 @@ export class BaseFilesystem {
`;
}
// Generate HTML for timestamp converter section (to be overridden by subclasses)
generateTimestampConverterHTML(variantId) {
// Default implementation returns empty string
// Subclasses can override to provide filesystem-specific converters
return '';
}
// Generate HTML for input parameters section
generateInputsHTML(variantId) {
const variant = this.variants.find(v => v.id === variantId);
if (!variant) return '';
// Helper function to format labels with offset information
const formatLabel = (label) => {
// Match patterns like "(Boot-Offset 0x00)", "(MFT-Header-Offset 0x14)", "(Offset 0x00)" and wrap offset info
const offsetPattern = /(\((Boot-Offset|MFT-Header-Offset|Offset) [^)]+\))/g;
return label.replace(offsetPattern, '<span class="offset-info">$1</span>');
};
return `
<div class="section">
<h2>Eingabeparameter</h2>
<div class="input-grid">
${variant.inputs.map(input => `
<div class="input-group">
<label for="${input.id}">${input.label} <span class="unit-indicator">(${input.unit})</span>:</label>
<label for="${input.id}">${formatLabel(input.label)} <span class="unit-indicator">(${input.unit})</span>:</label>
<input type="text" id="${input.id}" placeholder="${input.placeholder}">
<div class="error-message" id="${input.id}-error"></div>
</div>
@@ -60,21 +83,36 @@ export class BaseFilesystem {
const variant = this.variants.find(v => v.id === variantId);
if (!variant) return '';
// Helper: get display units for a result (bytes, sectors, ...)
function getDisplayUnits(result) {
// Heuristic: if label contains (Bytes) or (Sektor), show both
const label = result.label.toLowerCase();
const units = [];
if (label.includes('bytes') || label.includes('byte')) units.push('bytes');
if (label.includes('sektor')) units.push('sectors');
// Add more as needed
return units;
}
return `
<div class="section results">
<h2>Berechnete Werte</h2>
${variant.resultGroups.map(group => `
<div class="result-group">
<h3>${group.name}</h3>
${group.results.map(result => `
<div class="result-item" data-deps="${result.dependencies.join(',')}">
<span class="result-label" data-formula="${result.formula}">${result.label}:</span>
<div class="result-value-container">
<span class="result-value" id="${result.id}">-</span>
<button class="copy-btn" onclick="copyToClipboard('${result.id}')">📋</button>
${group.results.map(result => {
// For each result, show all representations in one row
// The calculation logic must fill in all values in the result-value element, separated by //
return `
<div class="result-item" data-deps="${result.dependencies.join(',')}">
<span class="result-label" data-formula="${result.formula}">${result.label}:</span>
<div class="result-value-container">
<span class="result-value" id="${result.id}">-</span>
<button class="copy-btn" onclick="copyToClipboard('${result.id}')">📋</button>
</div>
</div>
</div>
`).join('')}
`;
}).join('')}
</div>
`).join('')}
</div>
@@ -100,10 +138,15 @@ export class BaseFilesystem {
// Generate complete tab content HTML
generateTabContentHTML(variantId, calculatorHTML) {
const timestampHTML = this.generateTimestampConverterHTML(variantId);
return `
<div class="tab-content" id="${variantId}">
<div class="constants-calculator-container">
${this.generateConstantsHTML(variantId)}
<div class="constants-tools-wrapper">
${this.generateConstantsHTML(variantId)}
${timestampHTML}
</div>
<div class="section hex-calculator">
<h2>Hex-Rechner</h2>
${calculatorHTML}