AeroOS - AIRPORT OS

Devlog 7

Today iam going to continue the working on the App 2. I made that whenever the user clicks the ‘enter’ button in app 2 it will check that the both inputs are filled.

I thought if the boarding pass with the inputted name and selected flight might need to show in a new windows which makes more attractive and clean looking. That fore i just hardcoded the entire window (App 2.1) layout. Then also i thought that i need to add airport code and as well as boarding time which we need to show up on the boarding pass.

I made the boarding pass view in a totally glassmorphism effect which will be very linking to the desktop theme. Then i started to work in JS, i colloeted all the datas that need to be shown in the boarding pass when the user click on the button. After all the found the when the icon is clicked from desktop or from the bottom-right nav bar it will opeining the main app window but doesn’t opening the app 2.1 window, That for i asked help of chatGPT then i found that i need to put that also inside that of the createWindows(). After that it is working perfectly. But now i just hardcoded the date that shows in boarding pass so i made that to collect real date i choosen the default (normal way). Then i made that also dynamically.

At last i added the airport code for the arrival flights list also and made that shows in-between the brackets in the table of the App 1 which is more useful for a passengers.

Then i thought that i may change the hardcoded weather data in bottom-left navbar. For that i exported the API from Open Meteo with the temperature and as well as the weather code. I got the latitude and longitude of Delhi International Airport from google, Then i copied and declared thats into a two varibles. Then i created a function called ‘updateWeather()’ which will collect the datas from the API and as well as i thought that i need to display the emoji that match current temperature. For that i added weather code also in the API for further information i added that is there day-time ot night-time to make the emojis for accuracy. Then i asked the help to decode the weather code into emojis that for ChatGPT just tablulated the values and required emojis So i coded that as in if-elseif-else condition with emojis. Then also added that if in any case there doesn’t connect API it will show as ‘–’ with a emoji.

At last i called this function it when the bottom nav bar is shows. And also i added that time interval just for update the weather data in every 10minutes.

Devlog 6

Today iam going to create another app called “Boarding Pass”, In this app i would like to create a boarding pass for passengers. Before that i added the previous app icon into the bottom-right nav bar with hovering animation. Then i tried to add the icon of the app 2 it doesn’t visible like it is overlapping the icon of app 1. So after i tried so much time on that then unfortunately i forced to ask help of ChatGPT to solve that issue, Then i understand the logic then implemented on the project.

I started working on App2, that for i created the same design of out-layout that of the app 1, which i could save a little time there. Then i added a input box and as well as the option to select the flight from the list that i created previously on script.js file. At last enter button, it will collect all the datas that the user inputted. For first time i worked this app as testing and working completely perfect. But when i tried to work as original- opening the app 2 using the icon the windows is showing perfectly and the layout also perfect but the function are not working like options doesn’t showing and the button is not working. I tried to put the same codes under different function that i already created and used for app1. At last i found the real place that the functions are working perfectly. Now the option is showing with only first element in the list but we can’t change the selection or even can’t input any text in the input box. And also found that it only showing for first window if the user opens multiple window of the same app it will not show up the default option and doesn’t work the button functionalities. For that i updated ‘createWindows(tem)’ function by connecting using the parameters, Now its showing but still can’t input.

For that i doesn’t have any idea what is going on there, so i asked help for ChatGPT then found out a solution that update the function startDragging(e), if-condition if the app contains tags like ‘option’, ‘button’, ‘select’ and as well as ‘input’ it will remove the action of dragging, That means if the user tries to input or select the value option the function will run as by thinking that the user need to drag that for it will ready to listen the movement of the mouse, but while using this if-condition it will understand that the user trying to input or selecting. That for it working perfectly now.

Devlog 5

Today i am going to improve the structure of app 1 (Flight overview).

That now its perfect as multiple windows and i almost solved all the logical and bugs issues that i had been noticed.

Now i thought to make for dynamic and useful to the user.

I already worked on the apps main layout as in width of 40% now i thinks make the top-left buttons such as coloured as red, yellow and green. Red button is already used for the closing the window. So i decided to choose green button for make the app in fullscreen. So first i tried to change the width off the main app div. But it seems very boring so i decided to change all the layouts when fullscreen.

In normal screen, the app is sub-divided into 2 sections - departure and arrival. But when it is in fullscreen it gives a bad view to the user when it still keep as 2 sections. So i decided to put them together.

For that i created another div inside the main div of the app and after the header div. then i putted everything (content of the app) inside that div ‘normalscreen’. After that again i copied and put inside another div which is called ‘fullscreen’. Now i think its time to work on css part of the app.

First i made the normalscreen as in view and another in hide. Then i made the content area’s div into flex-display to view both sections. then i removed the top main texts which i had made them clickable now i changed them into normal text-heading.

After all i spend in js,

I connected the icon then added if-condition that if that icon is exists and the user clicks on that icon and the user clicked icon’s window is matches to the app1 then normascreen will hide and show the fulscreen view also i made that to view the windows as centered to the screen to avoid moving below of the screen size (offsize) as default! Btw i added there to change the width and height of the window as well as.

Now its working good. But i noticed that the table aren’t showing when the window is it in fullscreen. After a research through the code and google i found that, i need to change the accessing points of the table id in js file. In first i just accessed the tables just using ‘document.getElementById’ which will only access one id which is already accessed from the normal screen. So changed that into ‘document.querySelectorAll’ which will access all the tale bodies which includes tables from normal screen and as well as fullscreen.

Now the fullscreen and its icon working perfect!

At last i made the yellow icon (mini icon) also functionable as same as the green icon (fullscreen) I done this code as same as the fullscreen icon just changed the normalscreen’s display into show and fullscreen’s into hide!

Now i thinks that app 1 is completed!

Devlog 4

In this devlog i am trying to make application “Flight Overview”.

Before that i found another logic issue that if the user multiple windows of same application it will open perfectly but there is another issue that it will open in where the pervious window it open like perfectly overlapping the pervious windows which makes not user-friendly.

So i decided to change the position to be visible the new window by updating the ‘createWindows(tem)’.

So i declared a variable ‘windowsOffset’ outside the function with value 0. Then i updated the variable into ‘windowsOffset + 30’ which will increate the value by 30 for each new windows. Then i styled the top and left with 50% + the variable value. Then finally added transform. By using this a new window s always 30px difference of left and top of the pervious windows. But i found that it will showing the window even after into the off screen like below the page. To solve that i added a if-condition that if the variable value is greater than 180 it will automatically reset into 0 then start again. Then i found another issue that when multiple windows are present if the user try to focus on the first window(backmost in appearance) it will not come forward it keeps there!

To solve that i created another function called bringToFront() with one parameter. Before that i just declared a variable with the value 1000. In the function the variable will be incremented by 1 and initialize the value into the z-index of the element. Then i called this function in startdragging() function!

Now its all perfect!

Now lets start to build the app

First off all i sub divvied the content section into two one is departure and another is arrival. My plan is simple as default show the departure flight status and if the user clicks on the arrival it show the arrival flight status. both as a table form.

So it is very task to hardcode the table so i made a list then of all flight details such as flight number, destination, gate, status and also the icon that matches the status. I asked chatGPT to give me random 10 flight details in tabular sheet. then i converted that into list for myself!

Then i created a function called loadFlightTable() with two parameters. One for accessing the list to be showed on the table and another is id of the table. Then i added innerHTML for table id.

Also i given the suitable icon status for each of them green colour for boarding and on time, blue for delayed flights, yellow for final call, red for cancelled flight and grey for scheduled flights which the user can identify the status easily!

Similarly worked for arrival flights with another list and called the function same way! Then another confusing part came. I got confusion that where should i declare the buttons to change the table of showing, should i need to declare outside of every function or inside the create function. At last i thought lets try putting everything inside the function. So i putted everything inside the createWindows(), called the variables from html document, then added eventlistern for both departure and arrival options. then changed the table view into hide and show using display as block and none!

Devlog 3

I planned to create a application “Flight Overview” which shows the departure and arrival flight details.

For that i created a div-section for that. Then i added the same css style of welcome that this also. Also i added closing icon to this window. Then i made that when the user clicks on the icon_1 then this app will open up and i made that draggable and closable when click on the closeable icon.

Then i created 2 more icons near to the closing icon which i planned that to give the function that yellow icon for the current normal small size window and green icon for the maximize the window (full screen window).

Then i added the title of the application in the header section with centered using position

Then there is another complicated bug i found, when the user clicks on the icon for the first time it will open perfectly but when the user clicks again on the same icon without closing the previous window, we actually thinks that it will open new window, right? But it doesn’t show new window it feels like it is an error that not working our icon or our clicking issue. After a deep break and think i got an idea!

I created a function called ‘createWindows()’ with one parameter. In this function it will clone everything that had in the window section. Then it will clone into a new with new id, i used ‘Date()’ function to make that perfectly unique which had time travel is not possible :) So 100% sure that it will be a unique id. Then that will show to the page as block. Then made that also draggable. Then there is another complications that it will very risky to function the closeWindow() so i added if-condition in the createWindows() to check that window had a close icon if it had make when the user clicks on the icon it will run closeWindow() function. At last it will return the newWindows.

As a result we can remove openWindow()!

Devlog 2

Today, i made more changes in this project! First i added bottom navbar also. I divided the bottom nav bar into two with the ratio of 2:3 width. On left-side i added a texts like ‘terminal 2’, the location of the user but now i didn’t connect it and one more text which shows the weather of that place. and on the right-side bottom navbar i would like to add app icons and more in the future.

Then i added the image for wallpaper which i had downloaded earlier. So now i added that image into background of the body. As well as i deicided to make the website whole the effect of a glassmorphism. So using the help of ChatGPT i selected the colour shadows and etc. Then i added them into :root function of css!

After that i made the welcome to hide after 3 seconds automatically and also shows the bottom nav bar completely. Then i created a section for showing desktop icons and which has been only shows after hiding welcome screen.

In this project i would like to complete a mission “WebOS”. So i selected a theme of airport which will the user can use in as airport assistant. I have a narrow plan in my mind i didn’t know exactly how should i will execute my plan from my mind, Let me try!

Devlog 1

I created files such as index.html, style.css, script.js and as well as i downloaded a wallpaper of airport wal1.jpeg.According to mission guide i first created a welcome screen with very few text, i thought that may i add more text content in the future!

Anyway i added a header also to drag the window and a red-coloured circle icon which may use as close icon in the future.

Then i created a top navbar which is few margin from the top and also centered the screen with a width of 80%. Then i added a text at left-side as main heading and current date and time at the right-side on the navbar .

Btw, i made a css function :root which can make user-defined variables which can use the variables as constants.