emily/video2document
1
0
Fork 0
mirror of https://gitlab.rlp.net/proj-wise2526-video2document/video2document.git synced 2026-06-15 18:01:52 +02:00
Code Issues Packages Projects Releases Wiki Activity

Added arrows for navigating through steps

Browse Source
This commit is contained in:
Verena Schulz
2025-12-02 17:13:36 +01:00
parent 4f0d2bcc4a
commit 33093733ef
4 changed files with 121 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
electron/main/index.html
+20 -13
View File
@@ -8,17 +8,20 @@
</head>
<body>
<div class="step-nav">
<div class="step-nav">
<div class="step-item active" data-step="1">1. Step</div>
<div class="step-item" data-step="2">2. Step</div>
<div class="step-item" data-step="3">3. Step</div>
<div class="step-item" data-step="4">4. Step</div>
</div>
<div class="mitte" id="mitte">
<div id="middleContainerWrapper" class="middle-container-wrapper">
<button id="prevBtn" class="navBtn" disabled>&larr;</button>
<div class="mitte" id="mitte">
<h1 id="h1">Video to document</h1>
<div class="step" id="step1">
<div class="step" id="step1">
<div class="upload-container" id="uploadContainer">
<p id="p1">Drag and drop video file</p>
<video id="previewThumbnail" autoplay="false">
@@ -30,7 +33,7 @@
<button class="custom-btn" id="manualUploadBtn">Search video</button>
<input type="file" id="videoUpload" accept="video/*">
</div>
</div>
</div>
<div class="step" id="step2" style="display:none;">
<div class="labelDiv" id="labelDiv">
@@ -53,8 +56,8 @@
</div>
</div>
<div class="step" id="step3" style="display:none;">
<div class="checkbox-group">
<div class="step" id="step3" style="display:none;">
<div class="checkbox-group">
<label id="checkbox_group" for="checkbox-group">Choose prefered document style:</label>
<div class="checkbox-container">
<input type="checkbox" name ="docFormat" id="docFormat" value="Meeting report">
@@ -65,17 +68,21 @@
<input type="checkbox" name="docFormat" id="docFormatSummary" value="Summary with timestamps">
<label id="label_summary" for="docFormatSummary">Summary with timestamps</label>
</div>
</div>
</div>
</div>
</div>
<div class="step" id="step4" style="display:none;">
<button class="submit-btn" id="submitButton" onclick="checkBoxes()" disabled>Submit</button>
<div class="step" id="step4" style="display:none;">
<button class="submit-btn" id="submitButton" onclick="checkBoxes()" disabled>Submit</button>
<div class="progressbar" id="progressbar">
<div class="progressbar" id="progressbar">
<div class="progress_fill"></div>
<span class="progress_text">0%</span>
</div>
</div>
</div>
</div>
</div>
<button id ="nextBtn" class="navBtn">&rarr;</button>
</div>
<script src="languages.js"></script>
electron/main/renderer.js
+15
View File
@@ -89,3 +89,18 @@ manualUploadBtn.addEventListener('click', () => {
}
});
stepButtons.forEach(btn => {
btn.addEventListener("click", () => {
const step = btn.dataset.step;
showStep(step);
});
});
prevBtn.addEventListener("click", () => {
if (currentStep > 1) showStep(currentStep - 1);
});
nextBtn.addEventListener("click", () => {
if(currentStep < totalSteps) showStep(currentStep + 1);
});
electron/main/script.js
+11 -10
View File
@@ -216,23 +216,24 @@ function generateThumbnail(path){
videoElement.autoplay = false;
}
//Step-navigation
const steps = document.querySelectorAll(".step");
const stepButtons = document.querySelectorAll(".step-item");
let currentStep = 1;
const totalSteps = steps.length;
function showStep(stepNumber) {
// Steps ein/ausblenden
steps.forEach(step => step.style.display = "none");
document.getElementById("step" + stepNumber).style.display = "block";
// Navigation highlighten
stepButtons.forEach(btn => btn.classList.remove("active"));
document.querySelector(`.step-item[data-step="${stepNumber}"]`).classList.add("active");
}
const activeBtn = document.querySelector(`.step-item[data-step="${stepNumber}"]`);
// Klick-Events
stepButtons.forEach(btn => {
btn.addEventListener("click", () => {
const step = btn.dataset.step;
showStep(step);
});
});
if(activeBtn) activeBtn.classList.add("active");
prevBtn.disabled = stepNumber == 1;
nextBtn.disabled = stepNumber === totalSteps;
currentStep = stepNumber;
}
electron/main/style.css
+32
View File
@@ -233,3 +233,35 @@ h1 {
flex-direction: column;
justify-content: center;
}
/*Navigation arrows*/
.step-nav-arrows {
display: flex;
justify-content: space-between;
align-items: center;
}
.middle-container-wrapper {
display: flex;
align-items: center;
justify-content: center;
gap: 30px;
width: max-content;
}
.navBtn {
display: flex;
justify-content: center;
padding: 10px 25px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
}
.navBtn:disabled {
background-color: #ccc;
cursor: not-allowed;
}