Skip to content
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

adding data id #30

Merged
merged 1 commit into from
Jan 6, 2025
Merged

adding data id #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
55 changes: 28 additions & 27 deletions src/components/LoadConfig.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,64 +1,65 @@
<template>
<div class="load-config">
<h1 class="title">Installation Setup</h1>
<div class="load-config" data-id="load-config">
<h1 class="title" data-id="main-title">Installation Setup</h1>

<!-- Compact Config Loading Section -->
<div class="config-section" @dragover.prevent="handleDragOver" @dragleave.prevent="handleDragLeave"
@drop.prevent="handleDrop" :class="{ 'dragging': isDragging }">
<div class="config-content">
<div class="config-layout">
<div class="config-text">
<h2 class="section-title">Load Configuration</h2>
<p class="section-description">Drag & drop TOML file or click to load existing configuration</p>
<div class="config-section" data-id="config-section" @dragover.prevent="handleDragOver"
@dragleave.prevent="handleDragLeave" @drop.prevent="handleDrop" :class="{ 'dragging': isDragging }">
<div class="config-content" data-id="config-content">
<div class="config-layout" data-id="config-layout">
<div class="config-text" data-id="config-text">
<h2 class="section-title" data-id="config-section-title">Load Configuration</h2>
<p class="section-description" data-id="config-description">Drag & drop TOML file or click to load existing
configuration</p>
</div>
<div v-if="config_loaded" class="config-status">
<div v-if="config_loaded" class="config-status" data-id="config-status">
✓ Config loaded
</div>
<n-button @click="load_config" type="error" ghost class="action-button">
<n-button @click="load_config" type="error" ghost class="action-button" data-id="load-config-button">
Load Config
</n-button>

</div>
</div>
</div>

<!-- Installation Options -->
<div class="installation-options">
<div class="installation-options" data-id="installation-options">
<!-- Simplified Installation -->
<div class="option-panel">
<div class="option-content">
<div class="icon-container">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<div class="option-panel" data-id="simplified-installation-panel">
<div class="option-content" data-id="simplified-installation-content">
<div class="icon-container" data-id="simplified-icon-container">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" data-id="simplified-icon">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<h2 class="option-title">Simplified Installation</h2>
<p class="option-description">
<h2 class="option-title" data-id="simplified-title">Simplified Installation</h2>
<p class="option-description" data-id="simplified-description">
The installer will take care of all the necessary steps for you, including installing the required
dependencies, configuring the device, and installing the software.
</p>
<n-button @click="startSimplifiedSetup" type="error" ghost class="action-button">
<n-button @click="startSimplifiedSetup" type="error" ghost class="action-button"
data-id="start-simplified-button">
Start Simplified Setup
</n-button>
</div>
</div>

<!-- Expert Installation -->
<div class="option-panel">
<div class="option-content">
<div class="icon-container">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<div class="option-panel" data-id="expert-installation-panel">
<div class="option-content" data-id="expert-installation-content">
<div class="icon-container" data-id="expert-icon-container">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" data-id="expert-icon">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</div>
<h2 class="option-title">Expert Installation</h2>
<p class="option-description">
<h2 class="option-title" data-id="expert-title">Expert Installation</h2>
<p class="option-description" data-id="expert-description">
Let our wizard guide you through a streamlined installation process where you can configure every step.
</p>
<n-button @click="startWizard" type="error" ghost class="action-button">
<n-button @click="startWizard" type="error" ghost class="action-button" data-id="start-expert-button">
Start Expert Setup
</n-button>
</div>
Expand Down
34 changes: 17 additions & 17 deletions src/components/WizardStep.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,39 @@
<template>
<div class="wizard-layout">
<div class="wizard-sidebar">
<div class="steps-list">
<div class="wizard-layout" data-id="wizard-layout">
<div class="wizard-sidebar" data-id="wizard-sidebar">
<div class="steps-list" data-id="steps-list">
<div v-for="(step, index) in steps" :key="index" class="step-item" :class="{
'active': currentStep === index + 1,
'completed': currentStep > index + 1,
'disabled': currentStep === 7 || currentStep === 8,
'clickable': currentStep > index + 1 && currentStep < 7
}" @click="handleStepClick(index + 1)">
<div class="step-number">
}" @click="handleStepClick(index + 1)" :data-id="`step-item-${index + 1}`">
<div class="step-number" :data-id="`step-number-${index + 1}`">
<template v-if="currentStep > index + 1">
<svg class="checkmark" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<svg class="checkmark" viewBox="0 0 24 24" fill="none" stroke="currentColor" data-id="step-checkmark">
<path d="M20 6L9 17L4 12" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</template>
<template v-else>
{{ index + 1 }}
</template>
</div>
<div class="step-title">{{ step.title }}</div>
<div class="step-title" :data-id="`step-title-${index + 1}`">{{ step.title }}</div>
</div>
</div>
</div>

<!-- Main content -->
<div class="wizard-container">
<div class="wizard-step-container">
<PrerequisitiesCheck :nextstep=nextStep v-if="currentStep === 1" />
<PythonSanitycheck :nextstep=nextStep v-if="currentStep === 2" />
<TargetSelect :nextstep=nextStep v-if="currentStep === 3" />
<VersionSelect :nextstep=nextStep v-if="currentStep === 4" />
<MirrorSelect :nextstep=nextStep v-if="currentStep === 5" />
<InstallationPathSelect :nextstep=nextStep v-if="currentStep === 6" />
<InstalationProgress :nextstep=nextStep v-if="currentStep === 7" />
<Complete v-if="currentStep === 8" />
<div class="wizard-container" data-id="wizard-container">
<div class="wizard-step-container" data-id="wizard-step-content">
<PrerequisitiesCheck :nextstep=nextStep v-if="currentStep === 1" data-id="prerequisites-check" />
<PythonSanitycheck :nextstep=nextStep v-if="currentStep === 2" data-id="python-sanity-check" />
<TargetSelect :nextstep=nextStep v-if="currentStep === 3" data-id="target-select" />
<VersionSelect :nextstep=nextStep v-if="currentStep === 4" data-id="version-select" />
<MirrorSelect :nextstep=nextStep v-if="currentStep === 5" data-id="mirror-select" />
<InstallationPathSelect :nextstep=nextStep v-if="currentStep === 6" data-id="installation-path-select" />
<InstalationProgress :nextstep=nextStep v-if="currentStep === 7" data-id="installation-progress" />
<Complete v-if="currentStep === 8" data-id="complete" />
</div>
</div>
</div>
Expand Down
26 changes: 13 additions & 13 deletions src/components/wizard_steps/Complete.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<template>
<div class="complete-screen">
<div class="complete-screen" data-id="complete-screen">
<n-result status="success" title="Installation Complete!"
description="ESP-IDF has been successfully installed on your system">
description="ESP-IDF has been successfully installed on your system" data-id="completion-result">
<template #footer>
<div class="actions">
<div class="info-section">
<div v-if="os === 'windows'" class="windows-info">
<n-alert type="info">
<div class="actions" data-id="completion-actions">
<div class="info-section" data-id="info-section">
<div v-if="os === 'windows'" class="windows-info" data-id="windows-info">
<n-alert type="info" data-id="powershell-shortcut-alert">
<template #icon>
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" data-id="shortcut-icon">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
</svg>
Expand All @@ -17,10 +17,10 @@
</n-alert>
</div>

<div class="config-save">
<n-alert type="info">
<div class="config-save" data-id="config-save-section">
<n-alert type="info" data-id="save-config-alert">
<template #icon>
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" data-id="save-icon">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
</svg>
Expand All @@ -30,11 +30,11 @@
</div>
</div>

<div class="buttons">
<n-button @click="save_config" type="info" class="save-button">
<div class="buttons" data-id="action-buttons">
<n-button @click="save_config" type="info" class="save-button" data-id="save-config-button">
Save Configuration
</n-button>
<n-button @click="quit" type="error">
<n-button @click="quit" type="error" data-id="exit-button">
Exit Installer
</n-button>
</div>
Expand Down
87 changes: 45 additions & 42 deletions src/components/wizard_steps/InstalationProgress.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,64 +1,66 @@
<template>
<div class="installation-progress">
<h1 class="title">Installation Progress</h1>
<div class="installation-progress" data-id="installation-progress">
<h1 class="title" data-id="installation-title">Installation Progress</h1>

<n-card class="progress-card">
<div class="summary-section">
<div class="versions-info" v-if="all_settings">
<h3>Installing ESP-IDF Versions:</h3>
<div class="version-chips">
<n-tag v-for="version in idf_versions" :key="version" type="info">
<n-card class="progress-card" data-id="progress-card">
<div class="summary-section" data-id="installation-summary">
<div class="versions-info" v-if="all_settings" data-id="versions-info">
<h3 data-id="versions-title">Installing ESP-IDF Versions:</h3>
<div class="version-chips" data-id="version-chips">
<n-tag v-for="version in idf_versions" :key="version" type="info" :data-id="`version-tag-${version}`">
{{ version }}
</n-tag>
</div>
</div>
<!-- todo replace with complete instalation button -->
<div v-if="instalation_finished">
<n-button @click="nextstep" type="error" size="large">
<div v-if="instalation_finished" data-id="complete-button-container">
<n-button @click="nextstep" type="error" size="large" data-id="complete-installation-button">
Complete Installation
</n-button>
</div>
<div v-else>
<div v-else data-id="start-button-container">
<n-button @click="startInstalation()" type="error" size="large" :loading="instalation_running"
:disabled="instalation_running">
:disabled="instalation_running" data-id="start-installation-button">
{{ instalation_running ? 'Installing...' : 'Start Installation' }}
</n-button>
</div>
</div>

<div v-if="instalation_running || instalation_finished" class="status-section">
<div class="status-grid">
<div class="status-item" v-if="curently_installing_version">
<span class="status-label">Currently Installing:</span>
<n-tag type="warning">{{ curently_installing_version }}</n-tag>
<div v-if="instalation_running || instalation_finished" class="status-section" data-id="status-section">
<div class="status-grid" data-id="status-grid">
<div class="status-item" v-if="curently_installing_version" data-id="current-version-status">
<span class="status-label" data-id="current-version-label">Currently Installing:</span>
<n-tag type="warning" data-id="current-version-tag">{{ curently_installing_version }}</n-tag>
</div>

<div class="status-item" v-if="versions_finished.length > 0">
<span class="status-label">Completed:</span>
<div class="version-chips">
<n-tag v-for="version in versions_finished" :key="version" type="success">
<div class="status-item" v-if="versions_finished.length > 0" data-id="completed-versions-status">
<span class="status-label" data-id="completed-versions-label">Completed:</span>
<div class="version-chips" data-id="completed-version-chips">
<n-tag v-for="version in versions_finished" :key="version" type="success"
:data-id="`completed-version-${version}`">
{{ version }}
</n-tag>
</div>
</div>

<div class="status-item" v-if="versions_failed.length > 0">
<span class="status-label">Failed:</span>
<div class="version-chips">
<n-tag v-for="version in versions_failed" :key="version" type="error">
<div class="status-item" v-if="versions_failed.length > 0" data-id="failed-versions-status">
<span class="status-label" data-id="failed-versions-label">Failed:</span>
<div class="version-chips" data-id="failed-version-chips">
<n-tag v-for="version in versions_failed" :key="version" type="error"
:data-id="`failed-version-${version}`">
{{ version }}
</n-tag>
</div>
</div>
</div>
</div>

<div v-if="tools_tabs.length > 0" class="tools-section">
<n-tabs type="card" class="tools-tabs">
<n-tab-pane v-for="version in tools_tabs" :key="version" :tab="version" :name="version">
<n-table striped>
<div v-if="tools_tabs.length > 0" class="tools-section" data-id="tools-section">
<n-tabs type="card" class="tools-tabs" data-id="tools-tabs">
<n-tab-pane v-for="version in tools_tabs" :key="version" :tab="version" :name="version"
:data-id="`tools-tab-${version}`">
<n-table striped data-id="tools-table">
<thead>
<tr>
<tr data-id="tools-table-header">
<th>Tool</th>
<th>Downloaded</th>
<th>Extracted</th>
Expand All @@ -67,24 +69,25 @@
</tr>
</thead>
<tbody>
<tr v-for="(tool, name) in tools[version]" :key="name">
<td>{{ tool.name }}</td>
<td><n-tag :type="tool.downloaded ? 'success' : 'default'">{{ tool.downloaded ? 'Yes' : 'No'
}}</n-tag></td>
<td><n-tag :type="tool.extracted ? 'success' : 'default'">{{ tool.extracted ? 'Yes' : 'No' }}</n-tag>
</td>
<td><n-tag :type="tool.finished ? 'success' : 'default'">{{ tool.finished ? 'Yes' : 'No' }}</n-tag>
</td>
<td><n-tag :type="tool.error ? 'error' : 'default'">{{ tool.error ? 'Yes' : 'No' }}</n-tag></td>
<tr v-for="(tool, name) in tools[version]" :key="name" :data-id="`tool-row-${version}-${name}`">
<td data-id="tool-name">{{ tool.name }}</td>
<td><n-tag :type="tool.downloaded ? 'success' : 'default'"
:data-id="`tool-downloaded-${version}-${name}`">{{ tool.downloaded ? 'Yes' : 'No' }}</n-tag></td>
<td><n-tag :type="tool.extracted ? 'success' : 'default'"
:data-id="`tool-extracted-${version}-${name}`">{{ tool.extracted ? 'Yes' : 'No' }}</n-tag></td>
<td><n-tag :type="tool.finished ? 'success' : 'default'"
:data-id="`tool-finished-${version}-${name}`">{{ tool.finished ? 'Yes' : 'No' }}</n-tag></td>
<td><n-tag :type="tool.error ? 'error' : 'default'" :data-id="`tool-error-${version}-${name}`">{{
tool.error ? 'Yes' : 'No' }}</n-tag></td>
</tr>
</tbody>
</n-table>
</n-tab-pane>
</n-tabs>
</div>

<div class="action-footer" v-if="instalation_finished">
<n-button @click="nextstep" type="error" size="large">
<div class="action-footer" v-if="instalation_finished" data-id="action-footer">
<n-button @click="nextstep" type="error" size="large" data-id="complete-installation-button-footer">
Complete Installation
</n-button>
</div>
Expand Down
Loading