Skip to content

caner-cetin/pillars

Repository files navigation

Pillars

Disclaimer

You will probably see that web page is completely normal on a computer screen, but mobile page is a mess. I am sorry for that, not the best frontend developer.

Installation

# you might need to make the script executable
# chmod +x scripts/start.sh (optional)
bash scripts/start.sh

that is it. now go to localhost:333.

Pitfalls

  • You need latest or modern browsers, I am using js-bson library of MongoDB which requires top-level-await feature. Check browser compability table right here.

  • If you are having issues mounting the volumes, especially on OSX, you might need to create container-data and keys folders manually and add them to the file sharing in Docker settings.

  • If you want to see the data live, you can do

❯ docker exec mongodb mongosh
Current Mongosh Log ID:	66139dd81bff5e5777403e98
Connecting to:		mongodb://127.0.0.1:27017/?directConnection=true&serverSelectionTimeoutMS=2000&appName=mongosh+2.2.2

to get the connection string and use it in MongoDB Compass along with the user&password in the .env file.

Demos, Explanations, and Screenshots

I will not go into technical details here.

When you first navigate to localhost:333, you will see our one and only page, the index:

alt text

Frontend is really really simple. Screen is divided into two.

  • Google Maps
  • Info Panel
    • Wipe Earthquakes
    • Submit Earthquakes
    • Connected / Reconnect
    • Latest Earthquakes Table.

Only 6 main components. Starting from Submit Earthquakes,

alt text

We have two script. First, Feed a Single Earthquake and the second, Feed Earthquakes from USGS Dumps. Yes, there is no random earthquake input in random intervals. I cannot simulate good enough data to make our screenshots, or your viewing experience better.

When you load the index page, a websocket connection to the backend will be created. This will be the backbone of our index/hot reload of our data. If you see the text "Listening for changes..." at the bottom left, then you are good to go.

Clicking our first dialog:

2024-04-09.20-24-03.mp4

As you see, after we feed the single earthquake to the system, table will get updated and a new marker will be added to the map. Mudanya, Bursa in this case. You can see the details of earthquake if you either

  • click the marker
  • click the corresponding row in latest earthquakes

Second dialog:

2024-04-09.22-07-49.mp4

In this option, you can feed a GeoJSON dump to the Mongo.

As the change stream/documents are processed, you can view the data inserted one by one. Or, you can simply refresh the page, and view everything from the dump. When you refresh the page, remaining of the batch will not be streamed to you, but streaming will continue for other users connected during bulk insert.

Table also have a search functionality:

2024-04-09.22-39-38.mp4

For wiping everything:

2024-04-09.22-40-47.mp4

As I said, frontend is really simple, and probably not the nicest job you will see. I am mainly backend developer, soo. Still did my best. I hope you like it.

Why?

Why website refreshes itself too often after starting in dev mode?

Quasar w/ Vite does that in cold start, unfortunately. Currently, there is nothing wrong in production mode, and Dockerfile is set to the production, but dev mode force refreshes itself with no reason. See => quasarframework/quasar#12933

About

Earthquake Info System w/ Vue & Go

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published