Code Monkey home page Code Monkey logo

meeting-room-dashboard's Introduction

Meeting Room Dashboard

Build Status

Try it here!

Settings configuration

{
  "auth": {
    "apiKey": "[your API key here]",
    "clientId": "[your client ID here]",
    "discoveryDocs": [
      "https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest"
    ],
    "scope": "https://www.googleapis.com/auth/calendar.readonly"
  },
  "calendars": [
    {
      "id": "[Room 1 calendar ID here]",
      "label": "Room 1"
    },
    {
      "id": "[Room 2 calendar ID here]",
      "label": "Room 2"
    }
  ],
  "interval": 10000,
  "modelUrl": "http://example.com/model.obj",
  "renderResources": true
}

auth: Object that holds the information of the Google Calendar API credentials.

calendars: Array of objects, each with a calendar id (unique identifier of the Google Calendar resource) and a calendar label (display name for the calendar).

interval: Number of milliseconds between each calendar update.

modelUrl: URL to the 3D model for the 3D view. This model must be a .obj 3D model and to allow the proper highlighting of each room, room submodels must be identified the same labels described in the objects of the calendars array.

renderResources: Boolean to indicate whether the event resources should be rendered in the event card.

Configuring Google Calendar API credentials

  1. Access Google APIs console.
  2. Create a new project (if you don't have one already).
  3. In the Dashboard, click "ENABLE APIS AND SERVICES".
  4. Select and enable "Google Calendar API".
  5. In the Google Calendar API view, click "Credentials" on the left and then "Create credentials" > "API key". You will use this key in your settings.
  6. Click "RESTRICT KEY".
    1. Name? meeting-room-dashboard.
    2. API restrictions? Restrict key: Google Calendar API.
  7. In "OAuth consent screen":
    1. Application name? meeting-room-dashboard.
    2. Authorized domains? mnixo.github.io.
    3. Save.
  8. Click "Create credentials" > "OAuth client ID".
    1. Application type? Web application.
    2. Name? meeting-room-dashboard.
    3. Authorized JavaScript origins:
      1. https://mnixo.github.io (for the GitHub pages hosted one)
      2. http://localhost:8081 (to run locally)
    4. Authorized redirect URIs:
      1. https://mnixo.github.io (for the GitHub pages hosted one)
      2. http://localhost:8081 (to run locally)
    5. Save. You will use the provided client ID in your settings.

Getting the id of a calendar

  1. Go to your Google Calendar view.
  2. On the left you'll find "My calendars" and "Other calendars", if you have any. You can add more calendars by searching in the "Meet with..." section.
  3. Hovering a calendar, click the options icon and then "Settings".
  4. Look for "Calendar ID".

meeting-room-dashboard's People

Contributors

mnixo avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

meeting-room-dashboard's Issues

Add 3rd state for "almost busy"

Sometimes, if a room is in a free (green) state, it doesn't necessarily mean that there's enough time until it becomes busy (red). It could be useful to have a 3rd state, something like "almost busy" (yellow).

Handle private events

When displaying a private event, no content is shown. The goal is to try to show some information about the event, even if that means just displaying a "Private event" label.

Handle application initialization properly

When configuring the application for the first time, a couple of refreshes are needed to make sure that the settings are correctly loaded. The goal is to allow the application to handle the setting changes correctly without the need to refresh the whole page manually.

Display attendee avatars instead of name/email

The event view could be much cleaner if the attendees avatar was shown instead of the name/email. However, this information is not provided in the event fetched from the Calendar API.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.