Team RBOT* & the Hackathon

Imagine sitting at your desk in the office, probably obviously working, and a colleague wants you to join him for a meeting in one of the rooms to discuss the next feature you’ll be working on. So, you get up, walk over to the room, make yourself comfortable, open your laptops and are just about to start but then…

Thunder rolls, lights flash and a group of co-workers walk in with the phrase ‘Oh, I’m afraid you’ll have to go elsewhere, we’ve booked this room.’ Already in a somewhat sour mood, you walk out, open your digital calendar and attempt to book a room for you and your colleague to get that meeting started. You first battle with the somewhat archaic user interface, then try to understand the timetables of the available rooms, then, once you finally manage to book one, you have absolutely no idea where that room is in the building. You ask around and you finally find it. By now you have already spent around 15 minutes of your planned meeting time on… whatever that just was. Annoying, true, but at least it’s over, right? I’m afraid the universe has one more surprise for you – there are people in the room you just booked! You take a deep breath, attempt your hardest to be polite and repeat the phrase you yourself have already heard today ‘Oh, I’m afraid you’ll have to go elsewhere, we’ve booked this room.’ And thus, passing on the task of fighting the room booking system onto them.

Sound familiar? If not – I applaud you. If so – my condolences. The way rooms are booked in FS200 aren’t exactly as nightmarish as I’ve described above - we use the calendars of either MS Outlook or MS Teams, with each room sort of counting like a person you can arrange a meeting with. This is not exactly intuitive and user friendly. I mean just look at this:

And let me tell you, MS Teams isn’t much better:

There’s obviously a problem here. And what better time to fix such problems we don’t have time for during our daily work than during a hackathon?

We quickly came up with the idea that we want the booking interface to be an interactive map of the office. This seemed intuitive from a user perspective and would neatly combine all rooms in one overview instead of an alphabetically sorted list you’d have to scroll through as well as solve the problem of not knowing the room’s location. So, we’ve started by taking the office floorplan, dividing it into chunks (the separate rooms) and making it colorful, fun and pleasing to the eye and staying consistent with the CodeFactory art design:

Now comes the technical part. We wanted to be able to book a room by clicking on it. Having the rooms count as people came in very handy, as the concept of scheduling a meeting with another person is supported by Microsoft’s Graph API if the user is authenticated via Azure AD. The same API can be used to display the status of the rooms (booked/free). Perfect! We’ve decided to start with the easier part, which is simply displaying the room info.

We created a simple Single Page Application (with Vue 3, which we also use in our production apps) and started hacking away. Our Java developers got the chance to gaze upon the glorious hacked together typescript code.

We’ve implemented a time range slider, to display the status within a given time frame. This way the user can get instant feedback on a room’s availability. We’ve also added all information to the rooms that might be useful: Capacity, number of monitors and whiteboards, a funny message to brighten the mood. We’ve marked toilets (there was a merge request in our git repository called “Toilet Data” which showed up on some statistics later and caused confusion, that was fun!), kitchens and emergency exits and even thought about adding a small pop-up window to display today’s office news that our lovely office manager can use to keep all of us informed on current events, but time eventually did run out. You know what, I’ll just stop talking and show you the result:

So, what comes next? Deploy the map-app somewhere, where all coworkers have access to it. Add the ability to book rooms directly from the map. Make it around 16,3 times prettier. And add more awesome features our coworkers could profit from :)
*Room Booking Optimization Team

written by Roman Uglovskij, Junior Software Developer (Backend)