Initial commit
This commit is contained in:
@@ -0,0 +1,363 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import type { MudProfile } from '$lib/profiles/ProfileManager';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
// Props
|
||||
export let profile: MudProfile;
|
||||
export let isNewProfile = false;
|
||||
|
||||
// Local state
|
||||
let localProfile = { ...profile };
|
||||
let autoLogin = { ...localProfile.autoLogin || { enabled: false, username: '', password: '', commands: [] } };
|
||||
let newCommand = '';
|
||||
let accessibilityOptions = { ...localProfile.accessibilityOptions || {
|
||||
textToSpeech: false,
|
||||
highContrast: false,
|
||||
speechRate: 1,
|
||||
speechPitch: 1,
|
||||
speechVolume: 1
|
||||
}};
|
||||
|
||||
// Handle form submission
|
||||
function handleSubmit() {
|
||||
console.log('Saving profile:', localProfile);
|
||||
// Update local profile
|
||||
localProfile.autoLogin = autoLogin;
|
||||
localProfile.accessibilityOptions = accessibilityOptions;
|
||||
|
||||
// Dispatch save event
|
||||
dispatch('save', { profile: localProfile });
|
||||
}
|
||||
|
||||
// Handle cancel
|
||||
function handleCancel() {
|
||||
dispatch('cancel');
|
||||
}
|
||||
|
||||
// Add command to auto-login commands
|
||||
function addCommand() {
|
||||
if (newCommand.trim()) {
|
||||
autoLogin.commands = [...autoLogin.commands, newCommand];
|
||||
newCommand = '';
|
||||
}
|
||||
}
|
||||
|
||||
// Remove command from auto-login commands
|
||||
function removeCommand(index: number) {
|
||||
autoLogin.commands = autoLogin.commands.filter((_, i) => i !== index);
|
||||
}
|
||||
</script>
|
||||
|
||||
<form class="profile-editor" on:submit|preventDefault={handleSubmit}>
|
||||
<h2>{isNewProfile ? 'Create New Profile' : 'Edit Profile'}</h2>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="name">Profile Name</label>
|
||||
<input type="text" id="name" bind:value={localProfile.name} required />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="host">Host</label>
|
||||
<input type="text" id="host" bind:value={localProfile.host} required />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="port">Port</label>
|
||||
<input type="number" id="port" bind:value={localProfile.port} min="1" max="65535" required />
|
||||
</div>
|
||||
|
||||
<div class="form-group checkbox">
|
||||
<label for="useSSL">
|
||||
<input type="checkbox" id="useSSL" bind:checked={localProfile.useSSL} />
|
||||
Use SSL
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group checkbox">
|
||||
<label for="ansiColor">
|
||||
<input type="checkbox" id="ansiColor" bind:checked={localProfile.ansiColor} />
|
||||
Enable ANSI Colors
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<fieldset>
|
||||
<legend>Auto Login</legend>
|
||||
|
||||
<div class="form-group checkbox">
|
||||
<label for="autoLoginEnabled">
|
||||
<input type="checkbox" id="autoLoginEnabled" bind:checked={autoLogin.enabled} />
|
||||
Enable Auto Login
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{#if autoLogin.enabled}
|
||||
<div class="form-group">
|
||||
<label for="username">Username</label>
|
||||
<input type="text" id="username" bind:value={autoLogin.username} />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input type="password" id="password" bind:value={autoLogin.password} />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label id="commands-label">Auto-Login Commands</label>
|
||||
<div class="commands-list" role="list" aria-labelledby="commands-label">
|
||||
{#each autoLogin.commands as command, index}
|
||||
<div class="command-item" role="listitem">
|
||||
<span>{command}</span>
|
||||
<button type="button" class="btn-remove" on:click={() => removeCommand(index)} aria-label={`Remove command ${command}`}>✕</button>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="command-add">
|
||||
<label for="new-command">New command</label>
|
||||
<input type="text" id="new-command" placeholder="Add command" bind:value={newCommand} />
|
||||
<button type="button" class="btn-add" on:click={addCommand}>Add</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Appearance</legend>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="font">Font</label>
|
||||
<select id="font" bind:value={localProfile.font}>
|
||||
<option value="monospace">Monospace</option>
|
||||
<option value="'Courier New', monospace">Courier New</option>
|
||||
<option value="'Roboto Mono', monospace">Roboto Mono</option>
|
||||
<option value="'Source Code Pro', monospace">Source Code Pro</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="fontSize">Font Size</label>
|
||||
<input type="number" id="fontSize" bind:value={localProfile.fontSize} min="8" max="24" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="theme">Theme</label>
|
||||
<select id="theme" bind:value={localProfile.theme}>
|
||||
<option value="light">Light</option>
|
||||
<option value="dark">Dark</option>
|
||||
<option value="dracula">Dracula</option>
|
||||
<option value="solarized">Solarized</option>
|
||||
</select>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Accessibility</legend>
|
||||
|
||||
<div class="form-group checkbox">
|
||||
<label for="textToSpeech">
|
||||
<input type="checkbox" id="textToSpeech" bind:checked={accessibilityOptions.textToSpeech} />
|
||||
Enable Text-to-Speech
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group checkbox">
|
||||
<label for="highContrast">
|
||||
<input type="checkbox" id="highContrast" bind:checked={accessibilityOptions.highContrast} />
|
||||
High Contrast Mode
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{#if accessibilityOptions.textToSpeech}
|
||||
<div class="form-group">
|
||||
<label for="speechRate">Speech Rate</label>
|
||||
<input type="range" id="speechRate" bind:value={accessibilityOptions.speechRate} min="0.5" max="2" step="0.1" />
|
||||
<span class="range-value">{accessibilityOptions.speechRate.toFixed(1)}</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="speechPitch">Speech Pitch</label>
|
||||
<input type="range" id="speechPitch" bind:value={accessibilityOptions.speechPitch} min="0.5" max="2" step="0.1" />
|
||||
<span class="range-value">{accessibilityOptions.speechPitch.toFixed(1)}</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="speechVolume">Speech Volume</label>
|
||||
<input type="range" id="speechVolume" bind:value={accessibilityOptions.speechVolume} min="0.1" max="1" step="0.1" />
|
||||
<span class="range-value">{accessibilityOptions.speechVolume.toFixed(1)}</span>
|
||||
</div>
|
||||
{/if}
|
||||
</fieldset>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn-cancel" on:click={handleCancel}>Cancel</button>
|
||||
<button type="submit" class="btn-save">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<style>
|
||||
.profile-editor {
|
||||
padding: 20px;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 20px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="number"],
|
||||
input[type="password"],
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.checkbox label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: normal;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.checkbox input {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
legend {
|
||||
padding: 0 10px;
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.commands-list {
|
||||
margin-bottom: 10px;
|
||||
max-height: 150px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.command-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.command-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.command-add {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.command-add label {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.btn-add {
|
||||
background-color: #4caf50;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-remove {
|
||||
background-color: #f44336;
|
||||
color: white;
|
||||
border: none;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
background-color: #f0f0f0;
|
||||
border: 1px solid #ddd;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-save {
|
||||
background-color: #2196f3;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-cancel:hover, .btn-add:hover, .btn-save:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
width: 80%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.range-value {
|
||||
display: inline-block;
|
||||
width: 15%;
|
||||
text-align: right;
|
||||
color: #555;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user