From 1f93b10ecc73b2910b001a0dc4beb95ea7065802 Mon Sep 17 00:00:00 2001 From: Joe Code <110489359+Thebigjoe10@users.noreply.github.com> Date: Tue, 18 Jul 2023 13:34:36 +0100 Subject: [PATCH 1/2] Updates on Files --- src/css/main.css | 72 ++++++++++++++++++++++++++++++++++++++++ src/index.html | 36 ++++++++++++++++++++ src/js/main.js | 86 ++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 194 insertions(+) diff --git a/src/css/main.css b/src/css/main.css index e69de29b..bdb7a766 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -0,0 +1,72 @@ +body { + font-family: Arial, sans-serif; + text-align: center; +} + +h1 { + margin-top: 20px; +} + +form { + margin-top: 40px; +} + +label { + display: block; + margin-bottom: 10px; +} + +input[type="number"] { + width: 50px; + padding: 5px; +} + +button[type="submit"] { + margin-top: 10px; + padding: 10px 20px; +} + +#liftButtons { + margin-top: 40px; +} + +.liftContainer { + display: inline-block; + margin: 5px; + text-align: center; +} + +.liftButton { + display: inline-block; + margin: 5px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + cursor: pointer; +} + +.floorButtons { + margin-top: 20px; +} + +.floorButtons button { + display: inline-block; + margin: 5px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + cursor: pointer; +} + +#liftDialog { + display: none; +} + +#liftDialog h2 { + margin-top: 10px; +} + +#liftDialog button { + margin-top: 20px; + padding: 10px 20px; +} \ No newline at end of file diff --git a/src/index.html b/src/index.html index e69de29b..d9801e15 100644 --- a/src/index.html +++ b/src/index.html @@ -0,0 +1,36 @@ + + + + + + + Lift-Simulation + + + + +

Lift Control System

+ +
+ + + + + + + +
+ +
+
+ + +

Select Floor

+
+ + + + + + + \ No newline at end of file diff --git a/src/js/main.js b/src/js/main.js index e69de29b..cf5a8c2a 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -0,0 +1,86 @@ +const inputForm = document.getElementById("inputForm"); +const liftButtonsContainer = document.getElementById("liftButtons"); +const floorButtonsContainer = document.getElementById("floorButtons"); +const liftDialog = document.getElementById("liftDialog"); +const cancelButton = document.getElementById("cancelButton"); + +let numFloors; +let numLifts; + +inputForm.addEventListener("submit", function (event) { + event.preventDefault(); + numFloors = parseInt(document.getElementById("numFloors").value); + numLifts = parseInt(document.getElementById("numLifts").value); + generateLiftButtons(); + generateFloorButtons(); +}); + +const liftData = []; + +function generateLiftButtons() { + liftButtonsContainer.innerHTML = ""; + liftData.length = 0; + + for (let i = 1; i <= numLifts; i++) { + const liftContainer = document.createElement("div"); + liftContainer.className = "liftContainer"; + + const liftButton = document.createElement("div"); + liftButton.className = "liftButton"; + liftButton.textContent = `Lift ${i}`; + liftButton.addEventListener("click", function () { + openFloorDialog(i); + }); + + const floorDisplay = document.createElement("div"); + floorDisplay.className = "floorDisplay"; + + const lift = { + liftButton, + floorDisplay, + currentFloor: 1, + }; + liftData.push(lift); + + liftContainer.appendChild(liftButton); + liftContainer.appendChild(floorDisplay); + + liftButtonsContainer.appendChild(liftContainer); + } +} + +function generateFloorButtons() { + floorButtonsContainer.innerHTML = ""; + + for (let i = 1; i <= numFloors; i++) { + const floorButton = document.createElement("button"); + floorButton.textContent = `Floor ${i}`; + floorButton.addEventListener("click", function () { + // Handle floor button click if needed + }); + + floorButtonsContainer.appendChild(floorButton); + } +} + +function openFloorDialog(liftNumber) { + cancelButton.addEventListener("click", closeDialog); + liftDialog.showModal(); +} + +function sendLiftToFloor(liftNumber, floorNumber) { + const lift = liftData[liftNumber - 1]; + const { floorDisplay } = lift; + + // Update floor display + floorDisplay.textContent = `Floor: ${floorNumber}`; + + // Move the lift (Replace this with your actual lift movement logic) + console.log(`Sending Lift ${liftNumber} to Floor ${floorNumber}`); + + closeDialog(); +} + +function closeDialog() { + liftDialog.close(); +} From bc5e288032e9cdf9e14c22fe0dce87582b0a9494 Mon Sep 17 00:00:00 2001 From: Joe Code <110489359+Thebigjoe10@users.noreply.github.com> Date: Wed, 26 Jul 2023 13:03:43 +0100 Subject: [PATCH 2/2] created a web app where users can simulate lift mechanics --- src/css/main.css | 187 +++++++++++++++++++++++-------- src/index.html | 54 ++++----- src/js/main.js | 283 ++++++++++++++++++++++++++++++++++++----------- 3 files changed, 388 insertions(+), 136 deletions(-) diff --git a/src/css/main.css b/src/css/main.css index bdb7a766..b02e4afc 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -1,72 +1,169 @@ -body { - font-family: Arial, sans-serif; - text-align: center; +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: sans-serif; } -h1 { - margin-top: 20px; +:root { + --gray: #a2aab3; } -form { - margin-top: 40px; +#home_page { + height: 100vh; + margin: 0 auto; } -label { - display: block; - margin-bottom: 10px; +.form-container { + height: 100%; + display: flex; + align-items: center; + justify-content: center; } -input[type="number"] { - width: 50px; - padding: 5px; +.form { + display: flex; + flex-direction: column; + gap: 0.5rem; + font-size: 1rem; + padding: 1rem; + border: 1px solid black; } -button[type="submit"] { - margin-top: 10px; - padding: 10px 20px; +#lift_page { + padding: 1rem; } -#liftButtons { - margin-top: 40px; +.floor { + width: 100%; + height: 100px; + border: 1px solid black; } -.liftContainer { - display: inline-block; - margin: 5px; - text-align: center; +.floors-container { + display: flex; + flex-direction: column; } -.liftButton { - display: inline-block; - margin: 5px; - padding: 10px; - border: 1px solid #ccc; - border-radius: 5px; - cursor: pointer; +.floor { + display: flex; + gap: 1rem; } -.floorButtons { - margin-top: 20px; +.floor-title-container { + display: flex; + align-items: center; + justify-content: center; + padding: 1rem; + text-align: center; } -.floorButtons button { - display: inline-block; - margin: 5px; - padding: 10px; - border: 1px solid #ccc; - border-radius: 5px; - cursor: pointer; +.floors-btns { + display: flex; + align-items: center; + justify-content: center; } -#liftDialog { - display: none; +.floors-btn-container { + display: flex; + flex-direction: column; + gap: 1rem; } -#liftDialog h2 { - margin-top: 10px; +#floors-inp, +#lifts-inp { + font-size: 1.25rem; + padding: 4px; } -#liftDialog button { - margin-top: 20px; - padding: 10px 20px; +.form-label { + font-size: 1.25rem; + font-weight: 500; +} + +#back-btn { + padding: 0.5rem; + font-size: 1.25rem; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 1rem; +} + +#back-btn:hover { + cursor: pointer; +} + +#submit_btn { + font-size: 1rem; + padding: 10px 16px; + background-color: #4caf50; + color: #fff; + border: none; + border-radius: 4px; + cursor: pointer; + transition: background-color 0.2s ease; +} + +#submit_btn:hover { + background-color: #45a049; +} + +.lift-container { + display: flex; + gap: 1rem; +} + +.lift { + width: 80px; + height: 100px; + border: 1px solid black; + display: flex; + overflow: hidden; +} + +.lift-door, +.right-door { + width: 40px; + height: 100%; + border: 1px solid black; + background-color: #4caf50; + position: relative; + transform-origin: left center; + transition-duration: 2.5s; +} + +.open-left { + transform: translateX(-50px); +} + +.open-right { + transform: translateX(50px); +} + +.up_btn, +.down_btn { + display: flex; + align-items: center; + justify-content: center; + padding: 4px; + border-radius: 50%; +} + +.up_btn:active { + background-color: #4caf50; +} +.down_btn:active { + background-color: #4caf50; +} +.up_btn:hover { + cursor: pointer; +} + +.down_btn:hover { + cursor: pointer; +} + +.hidden { + display: none; } \ No newline at end of file diff --git a/src/index.html b/src/index.html index d9801e15..75b39efb 100644 --- a/src/index.html +++ b/src/index.html @@ -2,35 +2,39 @@ - - - Lift-Simulation - + + + + Lift-Simulation -

Lift Control System

- -
- - - - - - - -
- -
-
- - -

Select Floor

-
- - + +
+
+
+ + - + + + + +
+
+
+ + + + \ No newline at end of file diff --git a/src/js/main.js b/src/js/main.js index cf5a8c2a..d9d8e85d 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -1,86 +1,237 @@ -const inputForm = document.getElementById("inputForm"); -const liftButtonsContainer = document.getElementById("liftButtons"); -const floorButtonsContainer = document.getElementById("floorButtons"); -const liftDialog = document.getElementById("liftDialog"); -const cancelButton = document.getElementById("cancelButton"); - -let numFloors; -let numLifts; - -inputForm.addEventListener("submit", function (event) { - event.preventDefault(); - numFloors = parseInt(document.getElementById("numFloors").value); - numLifts = parseInt(document.getElementById("numLifts").value); - generateLiftButtons(); - generateFloorButtons(); +// main.js + +const submitBtn = document.getElementById("submit_btn"); +const homePage = document.getElementById("home_page"); +const liftPage = document.getElementById("lift_page"); +const floorsContainer = document.getElementById("floors_container"); +const backBtn = document.getElementById("back-btn"); + +let noOfFloors; +let noOfLifts; +let liftsPositions = new Map(); +let maxLifts = 6; +let screenSize; +let liftQueue = []; + +const upBtnSVG = ``; + +const downBtnSVG = ``; + +window.onload = () => { + screenSize = window.innerWidth; + + if (screenSize < 350) { + maxLifts = 1; + } else if (screenSize < 500) { + maxLifts = 2; + } else if (screenSize < 700) { + maxLifts = 3; + } else if (screenSize < 1000) { + maxLifts = 5; + } else { + maxLifts = 6; + } + + const liftsInp = document.getElementById("lifts-inp"); + liftsInp.placeholder += ` (max ${maxLifts})`; +}; + +window.addEventListener("resize", (event) => { + const changeInWidth = event.currentTarget.innerWidth; + + if ( + (screenSize < 500 && changeInWidth > 500) || + (screenSize > 500 && changeInWidth < 500) || + (screenSize < 700 && changeInWidth > 700) || + (screenSize > 700 && changeInWidth < 700) || + (screenSize < 1000 && changeInWidth > 1000) || + (screenSize > 1000 && changeInWidth < 1000) || + (screenSize < 1400 && changeInWidth > 1400) || + (screenSize > 1400 && changeInWidth < 1400) + ) { + location.reload(); + } +}); + +submitBtn.addEventListener("click", (e) => { + e.preventDefault(); + generateUi(); }); -const liftData = []; +backBtn.addEventListener("click", (e) => { + location.reload(); +}); -function generateLiftButtons() { - liftButtonsContainer.innerHTML = ""; - liftData.length = 0; +const generateUi = () => { + noOfFloors = parseInt(document.getElementById("floors-inp").value); + noOfLifts = parseInt(document.getElementById("lifts-inp").value); + + if (!noOfFloors) { + alert("No of Floors can't be empty!"); + return; + } else if (!noOfLifts) { + alert("No of Lifts can't be empty"); + return; + } else if (noOfFloors < 1) { + alert("No of Floors can't be less than 1"); + return; + } else if (noOfLifts < 1) { + alert("No of Lifts can't be less than 1"); + return; + } else if (noOfLifts > maxLifts) { + alert(`Number of lifts can't be greater than ${maxLifts}`); + return; + } else { + homePage.classList.add("hidden"); + liftPage.classList.remove("hidden"); + floorsContainer.innerHTML = createFloor(noOfFloors, noOfLifts); + for (let i = 0; i < noOfLifts; i++) { + liftsPositions.set(i + 1, { position: 0, free: true }); + } + } +}; + +// Rest of the code remains unchanged. + +const createFloor = (num) => { + let floorHTML = ""; + for (let i = num; i >= 0; i--) { + floorHTML = + floorHTML + + ` +
+
+

${i === 0 ? "Ground
Floor" : `Floor ${i}`}

+
+
+
+ ${ + i !== num + ? `` + : "" + } + ${ + i !== 0 + ? `` + : "" + } +
+
+
+ ${i === 0 ? createLift(noOfLifts) : ""} +
+
`; + } - for (let i = 1; i <= numLifts; i++) { - const liftContainer = document.createElement("div"); - liftContainer.className = "liftContainer"; + return floorHTML; +}; + +const createLift = (num) => { + let liftHTML = ""; + for (let i = 0; i < num; i++) { + liftHTML = + liftHTML + + `
+
+
+
`; + } - const liftButton = document.createElement("div"); - liftButton.className = "liftButton"; - liftButton.textContent = `Lift ${i}`; - liftButton.addEventListener("click", function () { - openFloorDialog(i); - }); + return liftHTML; +}; - const floorDisplay = document.createElement("div"); - floorDisplay.className = "floorDisplay"; +const moveLift = async (floorNo) => { + liftQueue.push(floorNo); + processLiftOperation(); +}; - const lift = { - liftButton, - floorDisplay, - currentFloor: 1, - }; - liftData.push(lift); +const isLiftAvailable = (map) => { + for (const value of map.values()) { + if (value.free === true) { + return true; + } + } + return false; +}; - liftContainer.appendChild(liftButton); - liftContainer.appendChild(floorDisplay); +const processLiftOperation = async () => { + const isLiftFree = isLiftAvailable(liftsPositions); - liftButtonsContainer.appendChild(liftContainer); + if (liftQueue.length > 0 && isLiftFree) { + const floorNo = liftQueue.shift(); + const { nearestLift, nearestDistance } = await getNearestAvailableLift( + floorNo + ); + + if (nearestLift !== null) { + const liftObj = liftsPositions.get(nearestLift); + liftsPositions.set(nearestLift, { ...liftObj, free: false }); + + const lift = document.getElementById(`lift-${nearestLift}`); + const height = floorNo * 100; + const transitionDuration = nearestDistance * 2; + + lift.style.transitionDuration = `${transitionDuration}s`; + lift.style.transform = `translateY(${-height}px)`; + + const newliftObj = liftsPositions.get(nearestLift); + liftsPositions.set(nearestLift, { ...newliftObj, position: floorNo }); + + setTimeout(() => { + openDoors(nearestLift); + }, transitionDuration * 1000); + } + + processLiftOperation(); } -} +}; + +const getNearestAvailableLift = (currentFloor) => { + let nearestLift = null; + let nearestDistance = noOfFloors + 1; + const lifts = Array.from(liftsPositions.keys()); + + for (let i = 0; i < lifts.length; i++) { + const liftObj = liftsPositions.get(lifts[i]); + + if (liftObj.free) { + const liftFloor = liftObj.position; -function generateFloorButtons() { - floorButtonsContainer.innerHTML = ""; + if (liftFloor === currentFloor) { + nearestLift = lifts[i]; + nearestDistance = 0; + break; + } - for (let i = 1; i <= numFloors; i++) { - const floorButton = document.createElement("button"); - floorButton.textContent = `Floor ${i}`; - floorButton.addEventListener("click", function () { - // Handle floor button click if needed - }); + const distance = Math.abs(liftFloor - currentFloor); - floorButtonsContainer.appendChild(floorButton); + if (distance < nearestDistance) { + nearestLift = lifts[i]; + nearestDistance = distance; + } + } } -} -function openFloorDialog(liftNumber) { - cancelButton.addEventListener("click", closeDialog); - liftDialog.showModal(); -} + return { nearestLift, nearestDistance }; +}; -function sendLiftToFloor(liftNumber, floorNumber) { - const lift = liftData[liftNumber - 1]; - const { floorDisplay } = lift; +const openDoors = (lift) => { + const leftDoor = document.getElementById(`lift-left-door-${lift}`); + const rightDoor = document.getElementById(`lift-right-door-${lift}`); - // Update floor display - floorDisplay.textContent = `Floor: ${floorNumber}`; + leftDoor.classList.add("open-left"); + rightDoor.classList.add("open-right"); - // Move the lift (Replace this with your actual lift movement logic) - console.log(`Sending Lift ${liftNumber} to Floor ${floorNumber}`); + const doorOpenTime = 2500; - closeDialog(); -} + setTimeout(() => { + leftDoor.classList.remove("open-left"); + rightDoor.classList.remove("open-right"); -function closeDialog() { - liftDialog.close(); -} + setTimeout(() => { + const liftObj = liftsPositions.get(lift); + liftsPositions.set(lift, { ...liftObj, free: true }); + processLiftOperation(); + }, doorOpenTime); + }, doorOpenTime); +};