From d3acdee3cfbf073e37aab24b360b3f0f5f62f0cf Mon Sep 17 00:00:00 2001 From: vikhyat187 Date: Thu, 27 Oct 2022 20:34:25 +0530 Subject: [PATCH 1/5] Completed --- src/css/main.css | 128 +++++++++++++++++++++++++++++++++++++++ src/index.html | 45 ++++++++++++++ src/js/main.js | 152 +++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 325 insertions(+) diff --git a/src/css/main.css b/src/css/main.css index e69de29b..0822530d 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -0,0 +1,128 @@ +.form{ + display: flex; + align-items: center; + gap: 1rem; + flex-direction: column; + flex-basis: content; +} + +.input-group{ + display: flex; + justify-content: space-between; + gap: 8px; +} + +.floors-generated{ + margin: 8px; + display: flex; + flex-direction: column; +} + +.floor{ + height: 8rem; + display: flex; + flex-direction: column; + justify-content: end; + border-bottom: 1px solid black; +} + +.floor-container{ + display: flex; + align-items: flex-end; + gap: 4rem; + height: 100%; +} + +.lift-buttons{ + display: flex; + flex-direction: column; + justify-content: center; + height: 100%; + gap: 4px; +} + +.lift-buttons > button{ + padding: 4px 8px; + border-radius: 2px; + font-weight: bold; + border: 2px transparent; + background-color: rgb(85, 156, 149); + color: black; +} + +.lifts{ + display: flex; + gap: 2rem; +} + +.lift{ + width: 4rem; + height: 5rem; + background-color: black; + border: 1px solid black; + position: relative; + overflow: hidden; + +} + +.lift::before{ + content: ''; + display: block; + position: absolute; + block-size: 100%; + inset-inline-start: 0.5px; + inline-size: 49%; + background-color: cyan; +} + +.lift::after{ + content: ''; + display: block; + position: absolute; + inset-inline-end: 0.5px; + inline-size: 48%; + block-size: 100%; + background-color: cyan; +} + +.door-operation::before{ + animation: left-door 5000ms ease; +} + +.door-operation::after{ + animation: right-door 5000ms ease; +} + +@keyframes left-door{ + 0%{ + transform: translateX(0%); + } + 50%{ + transform: translateX(-100%); + } + 100%{ + transform: translateX(0%); + } +} + +@keyframes right-door{ + 0%{ + transform: translateX(0%); + } + 50%{ + transform: translateX(100%); + } + 100%{ + transform:translateX(0%); + } +} + +@media screen and (max-width:600px){ + .lift{ + width: 3rem; + height: 4rem; + } + .lifts{ + gap: 1rem; + } +} \ No newline at end of file diff --git a/src/index.html b/src/index.html index e69de29b..f094ced0 100644 --- a/src/index.html +++ b/src/index.html @@ -0,0 +1,45 @@ + + + + + + + + Lift Simulation + + +
+
+
+ + +
+
+ + +
+ +
+ +
+
+ + + + \ No newline at end of file diff --git a/src/js/main.js b/src/js/main.js index e69de29b..16fce404 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -0,0 +1,152 @@ +const form = document.querySelector(".form"); +const floorsGroup = document.getElementById("floors-group"); + +form.addEventListener("submit", (e) => { + e.preventDefault(); + + const floorsCount = Number(e.target.elements[0].value); + const liftsCount = Number(e.target.elements[1].value); + + const screenWidth = screen.availWidth; + + if (screenWidth < 600 && liftsCount > 2) { + alert("This screen size cant have more than 2 lifts"); + }else if(liftsCount > floorsCount) { + alert("Please enter lifts count <= floors count"); + } + else { + floorsGroup.innerHTML = ""; + generateFloorsAndLifts(floorsCount, liftsCount); + } +}); + +function generateFloorsAndLifts(floors, lifts) { + const floorsArray = []; + + const liftsGroup = document.createElement("div"); + liftsGroup.setAttribute("class", "lifts"); + + // generate Lifts + for (let i = 0; i < lifts; i++) { + const lift = document.createElement("div"); + lift.setAttribute("class", "lift"); + lift.setAttribute("data-floor", `1`); + lift.setAttribute("data-lift", `${i + 1}`); + liftsGroup.append(lift); + } + + // generate floors + for (let i = 0; i < floors; i++) { + const floor = document.createElement("div"); + floor.setAttribute("class", "floor"); + floor.setAttribute("data-floor", `${i + 1}`); + const liftButtons = document.createElement("div"); + liftButtons.setAttribute("class", "lift-buttons"); + const callBtn = document.createElement("button"); + callBtn.setAttribute("class", `floor-call-btn`); + callBtn.setAttribute("data-floor", `${i + 1}`); + callBtn.textContent = "Call"; + const floorTitle = document.createElement("h4"); + floorTitle.textContent = `F - ${i + 1}`; + liftButtons.append(callBtn, floorTitle); + const floorContainer = document.createElement("div"); + floorContainer.setAttribute("class", "floor-container"); + floorContainer.append(liftButtons); + if (i === 0) floorContainer.append(liftsGroup); + + floor.append(floorContainer); + floorsArray.unshift(floor); + } + + floorsGroup.append(...floorsArray); +} + +let previouslyCalledOne; + +document.addEventListener("click", (e) => { + const floorCall = Number(e.target.dataset.floor); + + if (floorCall && previouslyCalledOne !== floorCall) { + previouslyCalledOne = floorCall; + //Move the lift + processMovementRequest(floorCall); + } +}); + +function processMovementRequest(floorNo) { + const lifts = Array.from(document.querySelectorAll(".lift")); + + // getting all the non-busy lifts + const nonBusyLifts = lifts.filter((lift) => !lift.classList.contains("busy")); + + if (nonBusyLifts.length) { + // get the closes lift to the current Floor + const { + lift, + distance + } = getClosestLift(floorNo, nonBusyLifts); + moveLiftToFloor(floorNo, lift, distance); + } else { + setTimeout(() => { + processRequest(floorCall); + }, 1000); + } +} + +function getClosestLift(floorCall, lifts) { + let distance = null; + let lift = ""; + + for (const _lift of lifts) { + // getting distance between the currentFloorCall and the lift + const floorDistance = Math.abs(floorCall - Number(_lift.dataset.floor)); + + // finding closest lift to the floorCall based on floor Distance + if (distance > floorDistance || distance === null) { + distance = floorDistance; + lift = _lift; + } + } + return { + lift, + distance + }; +} + +function moveLiftToFloor(floorCall, lift, distance) { + const currentFloor = Number(lift.dataset.floor); + + const { + height + } = document + .querySelector(`[data-floor='${floorCall}']`) + .getBoundingClientRect(); + + if (currentFloor !== floorCall) { + lift.style.transform = `translateY(-${height * (floorCall - 1)}px)`; + lift.style.transition = `all ${distance * 2}s ease-in`; + lift.dataset.floor = floorCall; + lift.classList.add("busy"); + + // open doors when lift has reached the floor + setTimeout(() => { + lift.classList.add("door-operation"); + }, distance * 2000 + 500); + + // free the lift + lift.addEventListener("transitionend", (e) => { + setTimeout(() => { + lift.classList.remove("door-operation"); + lift.classList.remove("busy"); + }, 5500); + }); + } else { + // If lift at same floor open doors + lift.classList.add("door-operation"); + lift.classList.add("busy"); + setTimeout(() => { + lift.classList.remove("door-operation"); + lift.classList.remove("busy"); + }, 5500); + } +} \ No newline at end of file From 0f1b2c2209e813ab4cb24ec07a55dbc67d1d6425 Mon Sep 17 00:00:00 2001 From: vikhyat187 Date: Thu, 27 Oct 2022 20:38:01 +0530 Subject: [PATCH 2/5] links.md added --- links.md | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 links.md diff --git a/links.md b/links.md new file mode 100644 index 00000000..9b5612c6 --- /dev/null +++ b/links.md @@ -0,0 +1,25 @@ +[screen.width vs window.width](https://stackoverflow.com/questions/37443482/what-is-the-difference-between-window-innerwidth-and-screen-width) + +[screen.width vs screen.availWidth](https://stackoverflow.com/questions/5456582/screen-width-and-screen-availwidth-difference-in-javascript) + +[dom manipulation js](https://www.section.io/engineering-education/dom-manipulation-with-javascript/) + +[real vs virtual dom](https://www.mindbowser.com/react-virtual-dom-vs-real-dom/) + +[set attribute](https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute) + +[spread operator ...](https://codeburst.io/what-are-three-dots-in-javascript-6f09476b03e1) + +[translateY](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateY) + +[getBoundingClient](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) + +[get width and height of element](https://stackoverflow.com/questions/294250/how-do-i-retrieve-an-html-elements-actual-width-and-height) + +[css transform and transition](https://www.lambdatest.com/blog/css-transforms-and-transitions-property/#:~:text=So%2C%20what's%20the%20difference%20between,from%20one%20state%20to%20another.) + +[for creating doors](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start) + +[== vs ===](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness#:~:text=%3D%3D%3D%20%E2%80%94%20strict%20equality%20(triple%20equals,%E2%80%94%20loose%20equality%20(double%20equals)) + +[transitionend event js](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionend_event) \ No newline at end of file From 668501a666e9f5f51f8c97811ee4ebfbed4b92a1 Mon Sep 17 00:00:00 2001 From: Vikhyat Bhatnagar <52795644+vikhyat187@users.noreply.github.com> Date: Thu, 27 Oct 2022 20:41:07 +0530 Subject: [PATCH 3/5] Create CNAME --- CNAME | 1 + 1 file changed, 1 insertion(+) create mode 100644 CNAME diff --git a/CNAME b/CNAME new file mode 100644 index 00000000..9c081f03 --- /dev/null +++ b/CNAME @@ -0,0 +1 @@ +vikhyat187.rds \ No newline at end of file From 94e9bee0fe328919a3947bbeda52b86f465730dd Mon Sep 17 00:00:00 2001 From: Vikhyat Bhatnagar <52795644+vikhyat187@users.noreply.github.com> Date: Thu, 27 Oct 2022 20:41:21 +0530 Subject: [PATCH 4/5] Delete CNAME --- CNAME | 1 - 1 file changed, 1 deletion(-) delete mode 100644 CNAME diff --git a/CNAME b/CNAME deleted file mode 100644 index 9c081f03..00000000 --- a/CNAME +++ /dev/null @@ -1 +0,0 @@ -vikhyat187.rds \ No newline at end of file From d61484d0ac26a4f251e961d5c74a4e63c3882ad8 Mon Sep 17 00:00:00 2001 From: Vikhyat Bhatnagar <52795644+vikhyat187@users.noreply.github.com> Date: Thu, 27 Oct 2022 21:02:47 +0530 Subject: [PATCH 5/5] Update README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 82e2166c..b226855a 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,7 @@ # Lift-Simulation Create a web app where you can simulate lift mechanics for a client +## [Resources referred](https://github.com/vikhyat187/Lift-Simulation/blob/dev/links.md) # UI Example ![Lift Simulation Example](Lift-Simulation-Example.png "Lift Simulation Example")