├── src
    ├── react-app-env.d.ts
    ├── App
    │   ├── TeamsAuth
    │   │   └── TeamsAuth.tsx
    │   ├── EventView
    │   │   ├── EventDetailsView
    │   │   │   ├── EventDetailsView.css
    │   │   │   └── EventDetailsView.tsx
    │   │   ├── BreakoutView
    │   │   │   ├── BreakoutView.css
    │   │   │   ├── BreakoutsCreatorView
    │   │   │   │   ├── BreakoutsCreatorView.css
    │   │   │   │   └── BreakoutsCreatorView.tsx
    │   │   │   └── BreakoutView.tsx
    │   │   └── EventView.tsx
    │   ├── TeamsTabConfig
    │   │   └── TabConfig.tsx
    │   ├── AgendaView
    │   │   ├── AgendaView.css
    │   │   └── AgendaView.tsx
    │   ├── App.css
    │   └── App.tsx
    ├── utils
    │   ├── graph.ts
    │   ├── helpers.ts
    │   ├── types.ts
    │   ├── date.ts
    │   ├── graph.events.ts
    │   ├── graph.onlineMeetings.ts
    │   └── graph.teams.ts
    ├── index.tsx
    ├── images
    │   ├── move.svg
    │   ├── logo.svg
    │   └── tandem-bicycle.svg
    └── serviceWorker.ts
├── public
    ├── robots.txt
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    ├── service-worker.js
    ├── web.config
    ├── vendor
    │   └── custom-elements-es5-adapter.js
    └── index.html
├── .publish
    ├── color.png
    ├── outline.png
    ├── Development.zip
    ├── Development.env
    └── manifest.json
├── .vscode
    └── settings.json
├── .gitignore
├── CODE_OF_CONDUCT.md
├── tsconfig.json
├── LICENSE
├── package.json
├── SECURITY.md
└── README.md


/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="react-scripts" />
2 | 


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/.publish/color.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoftgraph/meeting-moderator-sample/HEAD/.publish/color.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoftgraph/meeting-moderator-sample/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoftgraph/meeting-moderator-sample/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoftgraph/meeting-moderator-sample/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/.publish/outline.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoftgraph/meeting-moderator-sample/HEAD/.publish/outline.png


--------------------------------------------------------------------------------
/.publish/Development.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoftgraph/meeting-moderator-sample/HEAD/.publish/Development.zip


--------------------------------------------------------------------------------
/.publish/Development.env:
--------------------------------------------------------------------------------
1 | version=1.0.0
2 | appname=Moderator
3 | fullappname=Meeting Moderator
4 | baseUrl0=https://moderator.ngrok.io
5 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "appService.defaultWebAppToDeploy": "/subscriptions/da725df1-c7e2-42fa-9e98-73c61d7edc4f/resourceGroups/demos/providers/Microsoft.Web/sites/my-moderator",
3 |     "appService.deploySubpath": "build"
4 | }


--------------------------------------------------------------------------------
/src/App/TeamsAuth/TeamsAuth.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { TeamsProvider } from '@microsoft/mgt-teams-provider';
 3 | 
 4 | export function TeamsAuth() {
 5 |     TeamsProvider.handleAuth();
 6 | 
 7 |     return (
 8 |         <div>Now signing you in!</div>
 9 |     );
10 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | .env.development


--------------------------------------------------------------------------------
/src/utils/graph.ts:
--------------------------------------------------------------------------------
 1 | import { Providers, ProviderState } from '@microsoft/mgt-element';
 2 | 
 3 | export const getClient = () => {
 4 |     if (Providers.globalProvider.state === ProviderState.SignedIn) {
 5 |         return Providers.globalProvider.graph.client;
 6 |     }
 7 | 
 8 |     return null;
 9 | }
10 | 
11 | export const getCurrentSignedInUser = async () => {
12 |     try {
13 |         return await getClient()?.api('me').get();
14 |     } catch (e) {
15 |         return null;
16 |     }
17 | }


--------------------------------------------------------------------------------
/src/utils/helpers.ts:
--------------------------------------------------------------------------------
 1 | import { TeamsHelper } from "@microsoft/mgt-element"
 2 | import * as MicrosoftTeams from '@microsoft/teams-js';
 3 | 
 4 | export const openTeamsUrl = (url: string) => {
 5 |     if (TeamsHelper.isAvailable) {
 6 |         MicrosoftTeams.initialize(() => {
 7 |             console.log(url)
 8 |             MicrosoftTeams.executeDeepLink(url, (success) => {
 9 |                 if (!success) {
10 |                     window.open(url, '_blank');
11 |                 }
12 |             });
13 |         })
14 |     } else {
15 |         window.open(url, '_blank')
16 |     }
17 | }


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
 1 | # Microsoft Open Source Code of Conduct
 2 | 
 3 | This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
 4 | 
 5 | Resources:
 6 | 
 7 | - [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
 8 | - [Microsoft Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/)
 9 | - Contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with questions or concerns
10 | - Employees can reach out at [aka.ms/opensource/moderation-support](https://aka.ms/opensource/moderation-support)
11 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"dir" : "ltr",
 3 | 	"lang" : "en",
 4 | 	"name" : "Moderator",
 5 | 	"scope" : "/",
 6 | 	"display" : "standalone",
 7 | 	"start_url" : "/",
 8 | 	"short_name" : "Moderator",
 9 | 	"theme_color" : "#0078d4",
10 | 	"description" : "Do you need help moderating small group breakouts in Microsoft Teams online meetings? Look no further!!! ;)",
11 | 	"orientation" : "any",
12 | 	"background_color" : "#0078d4",
13 | 	"related_applications" : [],
14 | 	"prefer_related_applications" : false,
15 | 	"icons" : [
16 | 		{
17 | 			"src": "/logo192.png",
18 | 			"sizes": "192x192"
19 | 		}],
20 | 	"url" : "/"
21 | }


--------------------------------------------------------------------------------
/public/service-worker.js:
--------------------------------------------------------------------------------
 1 | // This is the service worker with the Cache-first network
 2 | 
 3 | const CACHE = "pwabuilder-precache";
 4 | 
 5 | importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.0.0/workbox-sw.js');
 6 | 
 7 | self.addEventListener("message", (event) => {
 8 |   if (event.data && event.data.type === "SKIP_WAITING") {
 9 |     self.skipWaiting();
10 |   }
11 | });
12 | 
13 | workbox.routing.registerRoute(
14 |   new RegExp('https://graph.microsoft.com/*'),
15 |   new workbox.strategies.NetworkOnly()
16 | )
17 | 
18 | workbox.routing.registerRoute(
19 |   new RegExp('/*'),
20 |   new workbox.strategies.CacheFirst({
21 |     cacheName: CACHE
22 |   })
23 | );


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "esModuleInterop": true,
12 |     "allowSyntheticDefaultImports": true,
13 |     "strict": false,
14 |     "forceConsistentCasingInFileNames": true,
15 |     "module": "esnext",
16 |     "moduleResolution": "node",
17 |     "resolveJsonModule": true,
18 |     "isolatedModules": true,
19 |     "noEmit": true,
20 |     "jsx": "react",
21 |     "noFallthroughCasesInSwitch": true
22 |   },
23 |   "include": [
24 |     "src"
25 |   ]
26 | }
27 | 


--------------------------------------------------------------------------------
/src/utils/types.ts:
--------------------------------------------------------------------------------
 1 | import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
 2 | 
 3 | // TODO - graph types package is not up to date with the API
 4 | export type GraphEvent = MicrosoftGraph.Event & {
 5 |     isOnlineMeeting: boolean,
 6 |     onlineMeeting: {
 7 |         joinUrl: string
 8 |     },
 9 |     onlineMeetingProvider: 'teamsForBusiness' | 'skypeForBusiness' | 'skypeForConsumer'
10 | }
11 | 
12 | export type Team = microsoftgraphbeta.Team & {
13 |     'template@odata.bind': string
14 | }
15 | 
16 | export interface GroupInfo {
17 |     id: string,
18 |     name: string,
19 |     onlineMeeting: string,
20 |     members: MicrosoftGraph.User[]
21 | }
22 | 


--------------------------------------------------------------------------------
/public/web.config:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0"?>
 2 | <configuration>
 3 |     <system.webServer>
 4 |         <rewrite>
 5 |             <rules>
 6 |                 <rule name="React Routes" stopProcessing="true">
 7 |                     <match url=".*" />
 8 |                     <conditions logicalGrouping="MatchAll">
 9 |                         <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
10 |                         <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
11 |                     </conditions>
12 |                     <action type="Rewrite" url="/" />
13 |                 </rule>
14 |             </rules>
15 |         </rewrite>
16 |         <staticContent>
17 |             <mimeMap fileExtension=".json" mimeType="application/json" />
18 |         </staticContent>
19 |     </system.webServer>
20 | </configuration>


--------------------------------------------------------------------------------
/public/vendor/custom-elements-es5-adapter.js:
--------------------------------------------------------------------------------
 1 | /**
 2 | @license @nocompile
 3 | Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 | Code distributed by Google as part of the polymer project is also
 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 | */
10 | (function () {
11 |     'use strict';
12 | 
13 |     (function(){if(void 0===window.Reflect||void 0===window.customElements||window.customElements.polyfillWrapFlushCallback)return;const a=HTMLElement;window.HTMLElement={HTMLElement:function HTMLElement(){return Reflect.construct(a,[],this.constructor)}}.HTMLElement,HTMLElement.prototype=a.prototype,HTMLElement.prototype.constructor=HTMLElement,Object.setPrototypeOf(HTMLElement,a);})();
14 | 
15 | }());
16 | 


--------------------------------------------------------------------------------
/src/App/EventView/EventDetailsView/EventDetailsView.css:
--------------------------------------------------------------------------------
 1 | .EventDetailsContainer {
 2 |     margin: 20px 0;
 3 | }
 4 | 
 5 | .EventDetails {
 6 |     margin:30px 0 20px 0;
 7 | }
 8 | 
 9 | .EventDetail {
10 |     display: flex;
11 |     align-items: flex-start;
12 |     margin-bottom: 10px;
13 | }
14 | .EventKey {
15 |     width: 60px;
16 |     font-size: 14px;
17 |     line-height: 20px;
18 |     color: #201F1E;
19 |     opacity: 0.5;
20 |     display: inline-block;
21 |     flex-shrink: 0;
22 | }
23 | 
24 | .EventValue {
25 |     font-size: 14px;
26 |     line-height: 20px;
27 |     color: #201F1E;
28 |     display: inline-block;
29 |     max-width: 430px;
30 |     word-break: break-all;
31 |     flex: 0 1 430px;
32 | }
33 | 
34 | .JoinButton {
35 |     margin-top: 20px;
36 |     margin-left: -8px;
37 | }
38 | 
39 | .ParticipantsList {
40 |     display: flex;
41 |     flex-wrap: wrap;
42 |     margin-top: 20px;
43 | }
44 | 
45 | .ParticipantsList .Participant {
46 |     width: 160px;
47 |     margin: 8px 30px 8px 0;
48 |     overflow: hidden;
49 | }


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Microsoft Graph
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/App/EventView/BreakoutView/BreakoutView.css:
--------------------------------------------------------------------------------
 1 | 
 2 | .Breakouts {
 3 |     margin-top: 20px;
 4 |     position: relative;
 5 | }
 6 | 
 7 | .BreakoutsTitleContainer {
 8 |     display: flex;
 9 |     flex-direction: row;
10 |     flex-wrap: wrap;
11 | }
12 | 
13 | .BreakoutsTitleContainer .CardTitle {
14 |     flex-grow: 1;
15 |     margin-bottom: 10px;
16 | }
17 | 
18 | .Breakouts .MessageTextField {
19 |     margin-top: 20px;
20 |     max-width: 430px;
21 | }
22 | 
23 | .Breakouts .PlacedholderDescription {
24 |     font-size: 12px;
25 |     opacity: 0.8;
26 |     margin: 10px 0 20px 0;
27 | }
28 | 
29 | .Breakouts .MessageSendButtonContainer {
30 |     height: 32px;
31 | }
32 | 
33 | .Breakouts .MessageSpinner {
34 |     justify-content: flex-start;
35 | }
36 | 
37 | .Breakouts .BreakoutGroups {
38 |     margin-top: 40px;
39 |     display: flex;
40 |     flex-wrap: wrap;
41 | }
42 | 
43 | .GroupActions {
44 |     height: 40px;
45 |     background: #F5F5F5;
46 |     border-radius: 2px;
47 | }
48 | 
49 | /* .Breakouts .BreakoutsArchiveButton {
50 |     position: absolute;
51 |     top: 20px;
52 |     right: 20px;
53 | } */


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import App from './App/App';
 4 | 
 5 | import {Msal2Provider} from '@microsoft/mgt-msal2-provider';
 6 | import {TeamsProvider} from '@microsoft/mgt-teams-provider';
 7 | import { Providers } from '@microsoft/mgt-element';
 8 | 
 9 | import * as MicrosoftTeams from "@microsoft/teams-js";
10 | 
11 | TeamsProvider.microsoftTeamsLib = MicrosoftTeams;
12 | 
13 | let provider;
14 | const clientId = 'eb3b6c7d-41fa-4607-b010-3ddd0a1f071b';
15 | 
16 | const scopes = [ 
17 |   'user.read',
18 |   'people.read',
19 |   'user.readbasic.all',
20 |   'contacts.read',
21 |   'calendars.read',
22 |   'Presence.Read.All',
23 |   'Presence.Read'
24 | ]
25 | 
26 | if (TeamsProvider.isAvailable) {
27 |   provider = new TeamsProvider({
28 |     clientId,
29 |     scopes,
30 |     authPopupUrl: '/teamsauth'
31 |   })
32 | } else {
33 |   provider = new Msal2Provider({
34 |     clientId,
35 |     scopes,
36 |     redirectUri: window.location.origin
37 |   });
38 | }
39 | 
40 | Providers.globalProvider = provider;
41 | 
42 | 
43 | ReactDOM.render(
44 |   <React.StrictMode>
45 |     <App />
46 |   </React.StrictMode>,
47 |   document.getElementById('root')
48 | );
49 | 
50 | // serviceWorker.register();


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta
 8 |       name="description"
 9 |       content="Do you need help moderating small group breakouts in Microsoft Teams online meetings? Look no further!!! ;)"
10 |     />
11 | 
12 |     <script src="%PUBLIC_URL%/vendor/webcomponents-bundle.js"></script>
13 |     <script>if (!window.customElements) { document.write("<!--"); }</script>
14 |     <script src="%PUBLIC_URL%/vendor/custom-elements-es5-adapter.js"></script>
15 |     <!--! DO NOT REMOVE THIS COMMENT, WE NEED ITS CLOSING MARKER -->
16 | 
17 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
18 |     <!--
19 |       manifest.json provides metadata used when your web app is installed on a
20 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
21 |     -->
22 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
23 |     <title>Moderator</title>
24 |   </head>
25 |   <body>
26 |     <noscript>You need to enable JavaScript to run this app.</noscript>
27 |     <div id="root"></div>
28 |   </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/src/images/move.svg:
--------------------------------------------------------------------------------
 1 | <svg width="8" height="18" viewBox="0 0 8 18" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path d="M3 1.5C3 2.32843 2.32843 3 1.5 3C0.671573 3 0 2.32843 0 1.5C0 0.671573 0.671573 0 1.5 0C2.32843 0 3 0.671573 3 1.5Z" fill="#B4B4B4"/>
 3 | <path d="M3 6.5C3 7.32843 2.32843 8 1.5 8C0.671573 8 0 7.32843 0 6.5C0 5.67157 0.671573 5 1.5 5C2.32843 5 3 5.67157 3 6.5Z" fill="#B4B4B4"/>
 4 | <path d="M3 11.5C3 12.3284 2.32843 13 1.5 13C0.671573 13 0 12.3284 0 11.5C0 10.6716 0.671573 10 1.5 10C2.32843 10 3 10.6716 3 11.5Z" fill="#B4B4B4"/>
 5 | <path d="M3 16.5C3 17.3284 2.32843 18 1.5 18C0.671573 18 0 17.3284 0 16.5C0 15.6716 0.671573 15 1.5 15C2.32843 15 3 15.6716 3 16.5Z" fill="#B4B4B4"/>
 6 | <path d="M8 1.5C8 2.32843 7.32843 3 6.5 3C5.67157 3 5 2.32843 5 1.5C5 0.671573 5.67157 0 6.5 0C7.32843 0 8 0.671573 8 1.5Z" fill="#B4B4B4"/>
 7 | <path d="M8 6.5C8 7.32843 7.32843 8 6.5 8C5.67157 8 5 7.32843 5 6.5C5 5.67157 5.67157 5 6.5 5C7.32843 5 8 5.67157 8 6.5Z" fill="#B4B4B4"/>
 8 | <path d="M8 11.5C8 12.3284 7.32843 13 6.5 13C5.67157 13 5 12.3284 5 11.5C5 10.6716 5.67157 10 6.5 10C7.32843 10 8 10.6716 8 11.5Z" fill="#B4B4B4"/>
 9 | <path d="M8 16.5C8 17.3284 7.32843 18 6.5 18C5.67157 18 5 17.3284 5 16.5C5 15.6716 5.67157 15 6.5 15C7.32843 15 8 15.6716 8 16.5Z" fill="#B4B4B4"/>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/.publish/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.6/MicrosoftTeams.schema.json",
 3 |     "manifestVersion": "1.6",
 4 |     "version": "{version}",
 5 |     "showLoadingIndicator": false,
 6 |     "id": "05569668-98ea-434f-9294-9767ec13a513",
 7 |     "packageName": "com.moderator",
 8 |     "developer": {
 9 |         "name": "Contoso",
10 |         "websiteUrl": "{baseUrl0}/",
11 |         "privacyUrl": "{baseUrl0}/",
12 |         "termsOfUseUrl": "{baseUrl0}/"
13 |     },
14 |     "icons": {
15 |         "color": "color.png",
16 |         "outline": "outline.png"
17 |     },
18 |     "name": {
19 |         "short": "{appname}",
20 |         "full": "{fullappname}"
21 |     },
22 |     "description": {
23 |         "short": "Moderate large Microsoft Teams meetings",
24 |         "full": "The app helps you moderate large Microsoft Teams meeting with small group breakouts."
25 |     },
26 |     "accentColor": "#0078D4",
27 |     "configurableTabs": [
28 |         {
29 |             "configurationUrl": "{baseUrl0}/teamsconfig",
30 |             "canUpdateConfiguration": false,
31 |             "scopes": [
32 |                 "groupchat"
33 |             ]
34 |         }
35 |     ],
36 |     "staticTabs": [
37 |         {
38 |             "entityId": "moderator",
39 |             "name": "Moderator",
40 |             "contentUrl": "{baseUrl0}/",
41 |             "scopes": [
42 |                 "personal"
43 |             ]
44 |         }
45 |     ],
46 |     "permissions": [
47 |         "identity",
48 |         "messageTeamMembers"
49 |     ],
50 |     "validDomains": []
51 | }


--------------------------------------------------------------------------------
/src/utils/date.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | export const isToday = (someDate) => {
 3 |     const today = new Date()
 4 |     return someDate.getDate() === today.getDate() &&
 5 |         someDate.getMonth() === today.getMonth() &&
 6 |         someDate.getFullYear() === today.getFullYear()
 7 | }
 8 | 
 9 | export const isTomorrow = (someDate) => {
10 |     const today = new Date()
11 |     today.setDate(today.getDate() + 1);
12 |     return someDate.getDate() === today.getDate() &&
13 |         someDate.getMonth() === today.getMonth() &&
14 |         someDate.getFullYear() === today.getFullYear()
15 | }
16 | 
17 | export const getDateHeader = (someDate) => {
18 |     let weekday = new Intl.DateTimeFormat('en', { weekday: 'short' }).format(someDate)
19 |     
20 |     if (isToday(someDate)) {
21 |         weekday = 'Today';
22 |     } else if (isTomorrow(someDate)) {
23 |         weekday = 'Tomorrow';
24 |     }
25 | 
26 |     const month = new Intl.DateTimeFormat('en', { month: 'short' }).format(someDate)
27 |     const day = new Intl.DateTimeFormat('en', { day: 'numeric' }).format(someDate)
28 | 
29 |     return `${weekday}, ${month} ${day}`;
30 | }
31 | 
32 | export const getDuration = (start: Date, end: Date) => {
33 |     const diff = Math.abs(end.valueOf() - start.valueOf());
34 | 
35 |     let minutes = diff / 1000 / 60;
36 | 
37 |     if (minutes < 60) {
38 |         return `${minutes} minutes`
39 |     }
40 | 
41 |     const hour = minutes / 60;
42 | 
43 |     return `${hour} hr` + (hour > 1 ? 's' : '');
44 | };
45 | 
46 | export const getFormatedTime = (date: Date) => {
47 | 
48 |     date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
49 |     return new Intl.DateTimeFormat('en', { hour: 'numeric', minute: 'numeric' }).format(date)
50 | };


--------------------------------------------------------------------------------
/src/App/TeamsTabConfig/TabConfig.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react';
 2 | 
 3 | import * as MicrosoftTeams from "@microsoft/teams-js";
 4 | import { Icon } from '@fluentui/react';
 5 | 
 6 | import { GraphEvent } from '../../utils/types';
 7 | import { getEvents } from '../../utils/graph.events';
 8 | 
 9 | export const TabConfig = () =>  {
10 |     const [message, setMessage] = useState('Looking for event...');
11 | 
12 |     useEffect(() => {
13 |         MicrosoftTeams.getContext(async (context) => {
14 |             const chatId = context.chatId;
15 |             const events : GraphEvent[] = await getEvents();
16 | 
17 |             if (events) {
18 |                 let filteredEvents = events.filter(e => e.onlineMeeting && unescape(e.onlineMeeting.joinUrl).includes(chatId));
19 |                 
20 |                 if (filteredEvents.length > 0) {
21 |                     setMessage(`Found event ${filteredEvents[0].subject}. Click "Save" to add tab!`)
22 |                     MicrosoftTeams.settings.setSettings({"entityId": 'moderator', "contentUrl": `${window.location.origin}/events/${filteredEvents[0].id}`});
23 |                     MicrosoftTeams.settings.setValidityState(true);
24 |                 } else {
25 |                     setMessage('Event not found :(. This chat might not be a meeting chat.')
26 |                 }
27 |             } else {
28 |                 setMessage('No events found in calendar or there was error getting events...')
29 |             }
30 |         });
31 |     }, [])
32 | 
33 |     return (
34 |         <div>
35 |             <Icon iconName="ConfigurationSolid" className="Logo" />
36 |             <h1>Setting up the Moderator tab</h1>
37 |             {message}
38 |         </div>
39 |     );
40 | }


--------------------------------------------------------------------------------
/src/App/AgendaView/AgendaView.css:
--------------------------------------------------------------------------------
 1 | .AgendaView {
 2 |     display: flex;
 3 |     flex-direction: column;
 4 |     max-width: 720px;
 5 |     margin: 0 auto;
 6 | }
 7 | 
 8 | .AgendaView .Card {
 9 |     margin: 0 20px
10 | }
11 | 
12 | .AgendaView mgt-agenda {
13 |     margin-top: -20px
14 | }
15 | 
16 | .AgendaView .HelloView {
17 |     align-self: center;
18 |     font-weight: normal;
19 |     line-height: 28px;
20 |     margin: 40px 0;
21 |     text-align: center;
22 | }
23 | 
24 | .AgendaView .HelloView .Title {
25 |     font-size: 22px;
26 | }
27 | 
28 | .AgendaHeader {
29 |     margin: 30px 0 10px 0;
30 | }
31 | 
32 | .AgendaEvent {
33 |     height: 100px;
34 |     background: #DEECF9;
35 |     margin-bottom: 10px;
36 |     display: flex;
37 |     align-items: center;
38 |     box-shadow: 0px 0px 14.4px rgba(0, 0, 0, 0.13), 0px 0px 3.6px rgba(0, 0, 0, 0.1);
39 |     margin-left: -40px;
40 |     margin-right: -40px;
41 | }
42 | 
43 | .AgendaEvent.OfflineEvent {
44 |     background: #F3F2F1;
45 |     box-shadow: none;
46 |     margin-right: 0px;
47 |     margin-left: 0px;
48 | }
49 | 
50 | 
51 | 
52 | .AgendaEvent .AgendaEventDetails {
53 |     margin-left: 10px;
54 |     margin-top:5px;
55 |     flex-grow: 1;
56 |     flex-shrink: 0;
57 | }
58 | 
59 | .AgendaEvent.OfflineEvent .AgendaEventDetails {
60 |     opacity: 0.3;
61 | }
62 | 
63 | .AgendaEvent .AgendaEventDetails .EventTime {
64 |     font-weight: 600;
65 |     font-size: 12px;
66 |     line-height: 16px;
67 | }
68 | 
69 | .AgendaEvent .AgendaEventDetails .EventSubject {
70 |     font-weight: 350;
71 |     font-size: 19px;
72 |     line-height: 25px;
73 |     opacity: 0.9;
74 | }
75 | 
76 | .AgendaEvent .AgendaEventDetails .EventAttendees {
77 |     margin-left: -10px;
78 | }
79 | 
80 | .AgendaEvent .AgendaActions {
81 |     margin-right: 20px;
82 | }
83 | 
84 | .AgendaEvent .AgendaActions > button {
85 |     margin-right: 20px;
86 | }
87 | 
88 | @media all and (max-width: 600px) {
89 |     .AgendaActions {
90 |         display: flex;
91 |         flex-direction: column;
92 |     }
93 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "moderator",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@fluentui/react": "^8.14.7",
 7 |     "@microsoft/mgt-element": "2.3.0-preview.16b6ac0",
 8 |     "@microsoft/mgt-msal2-provider": "2.3.0-preview.16b6ac0",
 9 |     "@microsoft/mgt-teams-provider": "2.3.0-preview.16b6ac0",
10 |     "@microsoft/mgt-react": "2.3.0-preview.16b6ac0",
11 |     "@microsoft/microsoft-graph-client": "^2.2.1",
12 |     "@microsoft/microsoft-graph-types": "^1.37.0",
13 |     "@microsoft/teams-js": "^1.8.0",
14 |     "@pwabuilder/pwainstall": "^1.6.7",
15 |     "@testing-library/jest-dom": "^4.2.4",
16 |     "@testing-library/react": "^9.3.2",
17 |     "@testing-library/user-event": "^7.1.2",
18 |     "@types/jest": "^24.0.0",
19 |     "@types/node": "^12.0.0",
20 |     "@types/react": "^17.0.5",
21 |     "@types/react-dom": "^17.0.5",
22 |     "@types/react-router-dom": "^5.1.7",
23 |     "@webcomponents/webcomponentsjs": "^2.4.3",
24 |     "react": "^17.0.2",
25 |     "react-dom": "^17.0.2",
26 |     "react-router-dom": "^5.2.0",
27 |     "react-scripts": "4.0.3",
28 |     "typescript": "~3.7.2",
29 |     "vendor-copy": "^2.0.0"
30 |   },
31 |   "scripts": {
32 |     "start": "react-scripts start",
33 |     "build": "react-scripts build",
34 |     "test": "react-scripts test",
35 |     "eject": "react-scripts eject",
36 |     "postinstall": "vendor-copy",
37 |     "ngrok": "ngrok http 3000 -subdomain=moderator"
38 |   },
39 |   "eslintConfig": {
40 |     "extends": "react-app"
41 |   },
42 |   "browserslist": {
43 |     "production": [
44 |       ">0.2%",
45 |       "not dead",
46 |       "not op_mini all"
47 |     ],
48 |     "development": [
49 |       "last 1 chrome version",
50 |       "last 1 firefox version",
51 |       "last 1 safari version"
52 |     ]
53 |   },
54 |   "vendorCopy": [
55 |     {
56 |       "from": "node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js",
57 |       "to": "public/vendor/custom-elements-es5-adapter.js"
58 |     },
59 |     {
60 |       "from": "node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js",
61 |       "to": "public/vendor/webcomponents-bundle.js"
62 |     }
63 |   ],
64 |   "engines": {
65 |     "node": ">=10.0 <11.0"
66 |   }
67 | }
68 | 


--------------------------------------------------------------------------------
/src/images/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
2 |     <g fill="#61DAFB">
3 |         <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
4 |         <circle cx="420.9" cy="296.5" r="45.7"/>
5 |         <path d="M520.5 78.1z"/>
6 |     </g>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/src/App/EventView/EventDetailsView/EventDetailsView.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
 4 | import { Person, PersonCardInteraction, PersonViewType } from '@microsoft/mgt-react';
 5 | import { ActionButton } from '@fluentui/react';
 6 | 
 7 | import { GraphEvent } from '../../../utils/types';
 8 | import './EventDetailsView.css'
 9 | import { openTeamsUrl } from '../../../utils/helpers';
10 | 
11 | export const EventDetailsView = (props: {event: GraphEvent, participants: MicrosoftGraph.User[]}) => {
12 | 
13 |     const handleJoin = () => {
14 |         openTeamsUrl(props.event.onlineMeeting.joinUrl);
15 |     }
16 | 
17 |     return <div>
18 |         <div className="EventDetailsContainer Card">
19 |             <div className="CardTitle">Details</div>
20 |             <div className="EventDetails">
21 |                 <div className="EventDetail">
22 |                     <div className="EventKey">Subject</div>
23 |                     <div className="EventValue">{props.event.subject}</div>
24 |                 </div>
25 |                 <div className="EventDetail">
26 |                     <div className="EventKey">Date</div>
27 |                     <div className="EventValue">TODO</div>
28 |                 </div>
29 |                 <div className="EventDetail">
30 |                     <div className="EventKey">Time</div>
31 |                     <div className="EventValue">TODO</div>
32 |                 </div>
33 |                 <div className="EventDetail">
34 |                     <div className="EventKey">Body</div>
35 |                     <div className="EventValue">{props.event.bodyPreview}</div>
36 |                 </div>
37 |                 <div className="EventDetail JoinButton">
38 |                     <div className="EventKey"></div>
39 |                     <div className="EventValue">
40 |                         <ActionButton iconProps={{ iconName: 'TeamsLogo16' }} text="Join Meeting" onClick={handleJoin}/>
41 |                     </div>
42 |                 </div>
43 |             </div>
44 | 
45 |         </div>
46 |         <div className="ParticipantsContainer Card">
47 |             <div className="CardTitle">Participants</div>
48 |             <div className="ParticipantsList">
49 |                 {props.participants.map((p,i) => (
50 |                     <div className="Participant" key={i}>
51 |                         <Person personDetails={p} showPresence avatarSize="large" fetchImage view={PersonViewType.oneline} personCardInteraction={PersonCardInteraction.hover} />
52 |                     </div>
53 |                 ))}
54 |             </div>
55 |         </div>
56 |     </div>
57 | }


--------------------------------------------------------------------------------
/src/utils/graph.events.ts:
--------------------------------------------------------------------------------
 1 | import { getClient } from "./graph";
 2 | 
 3 | const extensionName = 'com.moderatorTest'
 4 | 
 5 | export const getEventFromId = async (id: string) => {
 6 |     try {
 7 |         return await getClient()
 8 |             .api(`me/calendar/events/${id}`)
 9 |             .select([
10 |                 'id', 
11 |                 'subject', 
12 |                 'bodyPreview', 
13 |                 'onlineMeeting', 
14 |                 'end', 
15 |                 'start', 
16 |                 'isOnlineMeeting', 
17 |                 'onlineMeetingProvider'])
18 |             .expand(`extensions($filter=id eq '${extensionName}')`)
19 |             .get();
20 |     } catch (e) {
21 |         return null;
22 |     }
23 | }
24 | 
25 | export const getEventExtension = async (eventId: string) => {
26 |     try {
27 |         let extension = await getClient().api(`me/events/${eventId}/extensions/${extensionName}`).get();
28 |         return extension;
29 |     } catch (e) {
30 |         if (e.code === 'ErrorItemNotFound') {
31 |             return await createEventExtension(eventId);
32 |         }
33 |         return null;
34 |     }
35 | }
36 | 
37 | export const createEventExtension = async (eventId: string) => {
38 |     try {
39 |         let extension = await getClient().api(`me/events/${eventId}/extensions`).post({
40 |             "@odata.type": "microsoft.graph.openTypeExtension",
41 |             "extensionName": extensionName,
42 |             "breakouts": ""
43 |         });
44 |         return extension;
45 |     } catch (e) {
46 |         return null;
47 |     }
48 | }
49 | 
50 | export const updateEventExtension = async (eventId: string, breakouts: any) => {
51 |     const content = {
52 |         "@odata.type": "microsoft.graph.openTypeExtension",
53 |         "breakouts": !!breakouts ? JSON.stringify(breakouts) : ''
54 |     };
55 | 
56 |     try {
57 |         let extension = await getClient().api(`me/events/${eventId}/extensions/${extensionName}`).patch(content);
58 |         return extension;
59 |     } catch (e) {
60 |         return null;
61 |     }
62 | }
63 | 
64 | export const getEvents = async (days = 3) => {
65 |     const startDate = new Date();
66 |     startDate.setHours(0, 0, 0, 0);
67 | 
68 |     const endDate = new Date(startDate.getTime());
69 |     endDate.setDate(startDate.getDate() + days); // next 3 days
70 | 
71 |     const sdt = `startdatetime=${startDate.toISOString()}`;
72 |     const edt = `enddatetime=${endDate.toISOString()}`;
73 | 
74 |     try {
75 |         let response =  await getClient()?.api(`me/calendarview?${sdt}&${edt}`).get();
76 |         return response.value;
77 |     } catch (e) {
78 |         return null;
79 |     }
80 | }


--------------------------------------------------------------------------------
/src/App/App.css:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | body {
  4 |   margin: 0px;
  5 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
  6 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
  7 |     sans-serif;
  8 |   -webkit-font-smoothing: antialiased;
  9 |   -moz-osx-font-smoothing: grayscale;
 10 |   background: #F4F4F4;
 11 | }
 12 | 
 13 | 
 14 | 
 15 | .App-logo {
 16 |   height: 40vmin;
 17 |   pointer-events: none;
 18 | }
 19 | 
 20 | 
 21 | .App-header {
 22 |   background-color: #0078D4;
 23 |   display: flex;
 24 |   flex-direction: row;
 25 |   align-items: center;
 26 |   font-size: 16px;
 27 |   color: white;
 28 |   height: 48px;
 29 | }
 30 | 
 31 | .Event-title {
 32 |   flex-grow: 1;
 33 | }
 34 | 
 35 | .App-title {
 36 |   margin-left: 20px;
 37 |   cursor: pointer;
 38 | }
 39 | 
 40 | .AboutButton {
 41 |   color: white;
 42 |   width: 20px;
 43 |   height: 20px;
 44 | }
 45 | 
 46 | .AboutButton:hover {
 47 |   border-radius: 50%;
 48 | }
 49 | 
 50 | .App-content {
 51 |   padding: 0 20px 20px 20px;
 52 | }
 53 | 
 54 | .App-header mgt-login {
 55 |   --button-color: white;
 56 |   --background-color--hover: white;
 57 |   --color-hover: rgb(218, 218, 218);
 58 |   margin: 0 12px 0 0;
 59 | }
 60 | 
 61 | .Card {
 62 |   background: #FFFFFF;
 63 |   box-shadow: 0px 6.4px 14.4px rgba(0, 0, 0, 0.13), 0px 1.2px 3.6px rgba(0, 0, 0, 0.1);
 64 |   border-radius: 2px; 
 65 |   padding: 20px;
 66 | }
 67 | 
 68 | .Card .CardTitle {
 69 |   font-weight: normal;
 70 |   font-size: 22px;
 71 |   line-height: 28px;
 72 | }
 73 | 
 74 | .welcome {
 75 |   margin: 40px 20px 20px 20px;
 76 |   min-height: 40em;
 77 |   height: calc(100vh - 140px);
 78 |   display: flex;
 79 |   flex-direction: column;
 80 |   justify-content: center;
 81 |   align-items: center;
 82 |   padding: 0px 40px;
 83 |   color: #201F1E;
 84 |   min-width: 200px;
 85 | }
 86 | 
 87 | .welcome svg {
 88 |   max-width: 100%;
 89 | }
 90 | 
 91 | .welcome h1 {
 92 |   font-weight: 200;
 93 |   margin: 0.5em 0;
 94 |   line-height: 48px;
 95 |   font-size: 48px;
 96 | }
 97 | 
 98 | .app-description {
 99 |   text-align: center;
100 |   font-size: 12px;
101 |   line-height: 20px;
102 |   max-width: 400px;
103 | }
104 | 
105 | .App-content .welcome mgt-login {
106 |   background: #0078D4;
107 |   border-radius: 2px;
108 |   margin: 2em 0 0 0;
109 |   --button-color: white;
110 |   --background-color--hover: rgb(16, 110, 190);
111 |   --color-hover: #ffffff;
112 | }
113 | 
114 | .HelpIcon {
115 |   font-weight: bold;
116 |   font-size: 12px;
117 |   /* margin-right: -2em; */
118 |   background: #ffffff;
119 |   border-radius: 50%;
120 |   margin-right: 20px;
121 | }
122 | 
123 | .HelpIcon .ms-Icon {
124 |   color: #0078D4;
125 |   font-weight: bold;
126 |   font-size: 12px;
127 | }
128 | 
129 | .InstallButton {
130 |   margin-right: 40px;
131 | }


--------------------------------------------------------------------------------
/src/App/EventView/EventView.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react';
 2 | 
 3 | import { Pivot, PivotItem, MessageBar, MessageBarType, Spinner, SpinnerSize } from '@fluentui/react';
 4 | import { BreakoutView } from './BreakoutView/BreakoutView';
 5 | import { useParams } from 'react-router-dom';
 6 | import { EventDetailsView } from './EventDetailsView/EventDetailsView';
 7 | import { getEventFromId } from '../../utils/graph.events';
 8 | import { getChatParticipantsForOnlineMeeting } from '../../utils/graph.onlineMeetings';
 9 | import { GraphEvent } from '../../utils/types';
10 | 
11 | export function EventView() {
12 |     let { id } = useParams();
13 | 
14 |     const [isLoading, setIsLoading] = useState(true);
15 |     const [error, setError] = useState(null);
16 | 
17 |     const [event, setEvent] = useState<GraphEvent>(null);
18 |     const [participants, setParticipants] = useState(null);
19 | 
20 |     useEffect(() => {
21 |         (async () => {
22 |             if (isLoading) {
23 | 
24 |                 const event: GraphEvent = await getEventFromId(id);
25 | 
26 |                 if (!event) {
27 |                     setError('Event not found!');
28 |                     return;
29 |                 }
30 | 
31 |                 if (event && (!event.isOnlineMeeting || event.onlineMeetingProvider !== 'teamsForBusiness')) {
32 |                     setError('Event is not a Teams meeting');
33 |                     return;
34 |                 }
35 | 
36 |                 let attendees = await getChatParticipantsForOnlineMeeting(event.onlineMeeting.joinUrl);
37 | 
38 |                 // chatparticipant id is different that org id
39 |                 // mgt components expect id to be the actual user id
40 |                 attendees = attendees.map(a => {return {...a, id: a.userId}})
41 |                 
42 |                 setEvent(event);
43 |                 setParticipants(attendees);
44 |                 setIsLoading(false);
45 |             }
46 |         })();
47 |     }, []);
48 | 
49 |     if (error) {
50 |         return <MessageBar messageBarType={MessageBarType.severeWarning}>{error}</MessageBar>;
51 |     }
52 | 
53 |     if (isLoading) {
54 |         return (
55 |         <div>
56 |             <Spinner size={SpinnerSize.large} 
57 |                         labelPosition="bottom"/>
58 |         </div>)
59 |         ;
60 |     }
61 | 
62 |     return (
63 |         <Pivot defaultSelectedKey='0'>
64 |             <PivotItem headerText='Breakouts'>
65 |                 <BreakoutView event={event} attendees={participants}></BreakoutView>
66 |             </PivotItem>
67 |             <PivotItem headerText='Details'>
68 |                 <EventDetailsView event={event} participants={participants}></EventDetailsView>
69 |             </PivotItem>
70 |         </Pivot>
71 |     );
72 | }
73 | 
74 | 


--------------------------------------------------------------------------------
/SECURITY.md:
--------------------------------------------------------------------------------
 1 | <!-- BEGIN MICROSOFT SECURITY.MD V0.0.8 BLOCK -->
 2 | 
 3 | ## Security
 4 | 
 5 | Microsoft takes the security of our software products and services seriously, which includes all source code repositories managed through our GitHub organizations, which include [Microsoft](https://github.com/microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin), and [our GitHub organizations](https://opensource.microsoft.com/).
 6 | 
 7 | If you believe you have found a security vulnerability in any Microsoft-owned repository that meets [Microsoft's definition of a security vulnerability](https://aka.ms/opensource/security/definition), please report it to us as described below.
 8 | 
 9 | ## Reporting Security Issues
10 | 
11 | **Please do not report security vulnerabilities through public GitHub issues.**
12 | 
13 | Instead, please report them to the Microsoft Security Response Center (MSRC) at [https://msrc.microsoft.com/create-report](https://aka.ms/opensource/security/create-report).
14 | 
15 | If you prefer to submit without logging in, send email to [secure@microsoft.com](mailto:secure@microsoft.com).  If possible, encrypt your message with our PGP key; please download it from the [Microsoft Security Response Center PGP Key page](https://aka.ms/opensource/security/pgpkey).
16 | 
17 | You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message. Additional information can be found at [microsoft.com/msrc](https://aka.ms/opensource/security/msrc). 
18 | 
19 | Please include the requested information listed below (as much as you can provide) to help us better understand the nature and scope of the possible issue:
20 | 
21 |   * Type of issue (e.g. buffer overflow, SQL injection, cross-site scripting, etc.)
22 |   * Full paths of source file(s) related to the manifestation of the issue
23 |   * The location of the affected source code (tag/branch/commit or direct URL)
24 |   * Any special configuration required to reproduce the issue
25 |   * Step-by-step instructions to reproduce the issue
26 |   * Proof-of-concept or exploit code (if possible)
27 |   * Impact of the issue, including how an attacker might exploit the issue
28 | 
29 | This information will help us triage your report more quickly.
30 | 
31 | If you are reporting for a bug bounty, more complete reports can contribute to a higher bounty award. Please visit our [Microsoft Bug Bounty Program](https://aka.ms/opensource/security/bounty) page for more details about our active programs.
32 | 
33 | ## Preferred Languages
34 | 
35 | We prefer all communications to be in English.
36 | 
37 | ## Policy
38 | 
39 | Microsoft follows the principle of [Coordinated Vulnerability Disclosure](https://aka.ms/opensource/security/cvd).
40 | 
41 | <!-- END MICROSOFT SECURITY.MD BLOCK -->
42 | 


--------------------------------------------------------------------------------
/src/App/AgendaView/AgendaView.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | import { useHistory } from "react-router-dom";
 4 | import { ActionButton } from '@fluentui/react';
 5 | import { Providers } from '@microsoft/mgt-element';
 6 | import { Agenda, MgtTemplateProps, People, PersonCardInteraction } from '@microsoft/mgt-react';
 7 | 
 8 | import { getDateHeader, getFormatedTime } from '../../utils/date';
 9 | import { GraphEvent } from '../../utils/types';
10 | import './AgendaView.css';
11 | import { openTeamsUrl } from '../../utils/helpers';
12 | 
13 | export function AgendaView() {
14 | 
15 |   const history = useHistory();
16 |     
17 |   const handleEventClick = async (event: GraphEvent) => {
18 | 
19 |     let token = await Providers.globalProvider.getAccessTokenForScopes(
20 |       'Calendars.ReadWrite',
21 |       'Chat.ReadWrite',
22 |       'Group.ReadWrite.All',
23 |       'OnlineMeetings.ReadWrite',
24 |       'GroupMember.ReadWrite.All',);
25 | 
26 |       if (token) {
27 |         history.push(`/events/${event.id}`);
28 |       }
29 |   }
30 | 
31 |   return (
32 |     <div className="AgendaView">
33 | 
34 |       <div className="HelloView">
35 |         <div className="Title">Hello!</div>
36 |         <div>Select a meeting to start moderating!</div>
37 |       </div>
38 | 
39 |       <div className="Card">
40 |         <Agenda days={5} groupByDay>
41 |           <AgendaHeader template="header"></AgendaHeader>
42 |           <AgendaEvent template="event" onClick={handleEventClick}></AgendaEvent>
43 |         </Agenda>
44 |       </div>
45 |     </div>
46 |   );
47 | }
48 | 
49 | let AgendaHeader = (props: MgtTemplateProps) => {
50 |   let date = new Date(props.dataContext.header);
51 |   return <div className="AgendaHeader">{getDateHeader(date)}</div>
52 | }
53 | 
54 | let AgendaEvent = (props: MgtTemplateProps & {onClick: (event: GraphEvent) => void}) => {
55 | 
56 |   const event: GraphEvent = props.dataContext.event;
57 |   const start = new Date(event.start.dateTime)
58 |   const end = new Date(event.end.dateTime);
59 | 
60 |   const handleJoin = () => {
61 |     openTeamsUrl(event.onlineMeeting.joinUrl);
62 | }
63 | 
64 |   return (
65 |     <div className={`AgendaEvent ${event.isOnlineMeeting ? '' : 'OfflineEvent'}`}>
66 |       <div className="AgendaEventDetails">
67 |         <div className="EventTime">{`${getFormatedTime(start)} - ${getFormatedTime(end)}`}</div>
68 |         <div className="EventSubject">{event.subject}</div>
69 |         <div className="EventAttendees">
70 |           <People 
71 |             peopleQueries={event.attendees.map(a => a.emailAddress.address)} 
72 |             personCardInteraction={event.isOnlineMeeting ? PersonCardInteraction.hover : PersonCardInteraction.none}
73 |             showPresence={event.isOnlineMeeting}>
74 |           </People>
75 |         </div>
76 |       </div>
77 |       {event.isOnlineMeeting && 
78 |         <div className="AgendaActions">
79 |           <ActionButton 
80 |             iconProps={{ iconName: 'Group', style: {fontSize: 24} }} 
81 |             text="Moderate" 
82 |             style={{fontWeight: 600}}
83 |             onClick={() => props.onClick(event)}/>
84 |           <ActionButton 
85 |             iconProps={{ iconName: 'TeamsLogo16', style: {fontSize: 24} }}
86 |             text="Join"
87 |             style={{fontWeight: 600}}
88 |             onClick={handleJoin}/>
89 |         </div>
90 |       }
91 |     </div>
92 |   )
93 | }


--------------------------------------------------------------------------------
/src/App/EventView/BreakoutView/BreakoutsCreatorView/BreakoutsCreatorView.css:
--------------------------------------------------------------------------------
  1 | .BreakoutsCreatorView {
  2 |     display: flex;
  3 |     width: 100%;
  4 |     height: calc(100vh - 140px);
  5 | }
  6 | 
  7 | .BreakoutsCreatorView .Breakouts {
  8 |     margin-right: 20px;
  9 |     margin-top: 0px;
 10 |     background: white;
 11 |     flex-grow: 1;
 12 |     overflow-y: auto;
 13 | }
 14 | 
 15 | 
 16 | .BreakoutsCreatorView .Slider {
 17 |     width: 182px;
 18 |     margin-top: 32px;
 19 |     margin-bottom: 42px;
 20 | }
 21 | 
 22 | .BreakoutsCreatorView .Slider .ms-Slider-slideBox {
 23 |     padding: 0;;
 24 | }
 25 | 
 26 | .GroupsCreator {
 27 |     margin-top: 20px;
 28 | }
 29 | 
 30 | .GroupsCreatorTitle {
 31 |     font-size: 20px;
 32 | }
 33 | 
 34 | .GroupSizeInput {
 35 |     width: 250px;
 36 |     margin-bottom: 20px;
 37 | }
 38 | 
 39 | 
 40 | .Breakouts .Groups {
 41 |     margin-right: -20px;
 42 | }
 43 | 
 44 | .Groups {
 45 |     display: flex;
 46 |     flex-wrap: wrap;
 47 | }
 48 | 
 49 | .GroupView {
 50 |     margin-right: 20px;
 51 |     margin-bottom: 30px;
 52 |     width: 200px;
 53 |     display: flex;
 54 |     flex-direction: column;
 55 | }
 56 | 
 57 | .GroupView .GroupTitle {
 58 |     font-size: 18px;
 59 |     line-height: 28px;
 60 |     color: #201F1E;
 61 |     opacity: 0.65;
 62 |     margin-bottom: 5px;
 63 | }
 64 | 
 65 | .GroupView .GroupPeople {
 66 |     box-shadow: 0px 6.4px 14.4px rgba(0, 0, 0, 0.13), 0px 1.2px 3.6px rgba(0, 0, 0, 0.1);
 67 |     border-radius: 2px; 
 68 | }
 69 | 
 70 | .GroupView .GroupPerson {
 71 |     height: 40px;
 72 |     padding: 10px;
 73 |     border: 1px solid #f2f2f2;
 74 |     display: flex;
 75 |     flex-direction: row;
 76 |     flex-wrap: nowrap;
 77 |     align-items: center;
 78 | }
 79 | 
 80 | .GroupView .GroupPerson .GroupPersonMoveIcon {
 81 |     font-size: 14px;
 82 |     height: 14px;
 83 |     width: 14px;
 84 |     align-self: center;
 85 |     margin-right: 8px;
 86 |     flex-shrink: 0;
 87 | }
 88 | 
 89 | .GroupView .GroupPerson mgt-person {
 90 |     --avatar-size: 40px;
 91 |     flex-shrink: 1;
 92 |     overflow: hidden;
 93 | }
 94 | 
 95 | .BreakoutsCreatorView .Moderators {
 96 |     width: 300px;
 97 |     background: white;
 98 |     display: flex;
 99 |     flex-direction: column;
100 | }
101 | 
102 | .ModeratorsList {
103 |     width: 300px;
104 |     margin: 0 -20px;
105 |     padding: 10px 20px;
106 |     overflow-y: auto;
107 |     flex-grow: 1;
108 | }
109 | 
110 | .Moderators .ModeratorPerson {
111 |     margin-bottom: 10px;
112 |     padding: 10px;
113 |     display: flex;
114 |     flex-wrap: nowrap;
115 |     align-items: center;
116 | }
117 | 
118 | .Moderators .ModeratorPerson mgt-person {
119 |     flex-grow: 1;
120 |     overflow: hidden;
121 | }
122 | 
123 | .Moderators .ModeratorPerson .ModeratorCloseIconButton .ms-Icon {
124 |     font-size: 13px;
125 | }
126 | 
127 | @media all and (max-width: 876px) {
128 |     .BreakoutsCreatorView {
129 |         flex-direction: column;
130 |         width: 100%;
131 |         height: unset;
132 |     }
133 |     
134 |     .BreakoutsCreatorView .Breakouts {
135 |         margin-right: 0;
136 |         overflow-y: hidden;
137 |         margin-bottom: 20px;
138 |     }
139 | 
140 |     .BreakoutsCreatorView .Moderators {
141 |         width: unset;
142 |         min-height: 400px;
143 |     }
144 | 
145 |     .ModeratorsList {
146 |         width: unset;
147 |         /* padding: 10px 20px; */
148 |         overflow-y: hidden;
149 |     }
150 | }


--------------------------------------------------------------------------------
/src/App/App.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useState } from 'react';
  2 | import './App.css';
  3 | 
  4 | import { Providers, ProviderState, TeamsHelper } from '@microsoft/mgt-element';
  5 | import { Switch, Route, BrowserRouter, useHistory } from "react-router-dom";
  6 | import { MgtTemplateProps, Login, Person } from '@microsoft/mgt-react';
  7 | import { initializeIcons, IconButton, Spinner, SpinnerSize } from '@fluentui/react';
  8 | import { wrapWc } from 'wc-react';
  9 | import '@pwabuilder/pwainstall';
 10 | 
 11 | import { AgendaView } from './AgendaView/AgendaView';
 12 | import { EventView } from './EventView/EventView';
 13 | import { TeamsAuth } from './TeamsAuth/TeamsAuth';
 14 | import { TabConfig } from './TeamsTabConfig/TabConfig';
 15 | import {ReactComponent as BicycleImage} from '../images/tandem-bicycle.svg';
 16 | 
 17 | function App() {
 18 | 
 19 |   initializeIcons();
 20 | 
 21 |   const [authState, setAuthState] = useState(Providers.globalProvider.state);
 22 |   const PwaInstall = wrapWc('pwa-install');
 23 | 
 24 |   if (window.location.pathname.startsWith('/teamsauth')) {
 25 |     return <TeamsAuth />
 26 |   }
 27 | 
 28 |   Providers.onProviderUpdated(() => {
 29 |     setAuthState(Providers.globalProvider.state)
 30 |   })
 31 | 
 32 |   return (
 33 |     <BrowserRouter>
 34 | 
 35 |     <div className="App">
 36 |       {!TeamsHelper.isAvailable && 
 37 |         <header className="App-header">
 38 |           <HeaderTitle />
 39 |           <div className="InstallButton">
 40 |             <PwaInstall></PwaInstall>
 41 |           </div>
 42 |             <div className="HelpIcon">
 43 |               <IconButton 
 44 |                 className="AboutButton"
 45 |                 iconProps={{iconName: 'Help'}}
 46 |                 onClick={(e) => window.open("https://github.com/microsoftgraph/meeting-moderator-sample", '_blank')}></IconButton>
 47 |           </div>
 48 |           {authState !== ProviderState.SignedOut && 
 49 |             <Login>
 50 |               <SignedInButtonContent template="signed-in-button-content" />
 51 |             </Login>
 52 |           }
 53 |         </header>
 54 |       }
 55 |       <div className="App-content">
 56 |         {authState === ProviderState.SignedIn && <MainContent />}
 57 |         {authState === ProviderState.SignedOut && <LoginPage />}
 58 |         {authState === ProviderState.Loading && <Spinner size={SpinnerSize.large} />}
 59 |       </div>
 60 |     </div>
 61 |     </BrowserRouter>
 62 |   );
 63 | }
 64 | 
 65 | const MainContent = () => {
 66 |   return (
 67 |     <Switch>
 68 |       <Route path="/events/:id">
 69 |         <EventView />
 70 |       </Route>
 71 |       <Route path="/teamsconfig">
 72 |         <TabConfig />
 73 |       </Route>
 74 |       <Route path="/">
 75 |         <AgendaView />
 76 |       </Route>
 77 |     </Switch>
 78 |   )
 79 | }
 80 | 
 81 | const SignedInButtonContent = (props: MgtTemplateProps) => {
 82 |   const {personDetails, personImage} = props.dataContext;
 83 | 
 84 |   return <div className="SignedInButtonContent" >
 85 |     <Person personDetails={personDetails} personImage={personImage}></Person>
 86 |   </div>
 87 | }
 88 | 
 89 | const HeaderTitle = () => {
 90 | 
 91 |   const history = useHistory();
 92 | 
 93 |   const handleTitleClick = () => {
 94 |     if (history.location.pathname !== '/') {
 95 |       history.push(`/`);
 96 |     }
 97 |   }
 98 | 
 99 |   return <div className="Event-title">
100 |     <div className="App-title" onClick={handleTitleClick} >Moderator</div>
101 |   </div>;
102 | }
103 | 
104 | const LoginPage = () => {
105 |   return <div className="Card welcome">
106 |     <BicycleImage />
107 |     <h1>Moderator</h1>
108 |     <div className="app-description">
109 |       Select an online meeting to start moderating. As moderator, you can split your meeting participants into breakout rooms.
110 |     </div>
111 |     <Login />
112 |   </div>
113 | }
114 | 
115 | export default App;
116 | 


--------------------------------------------------------------------------------
/src/utils/graph.onlineMeetings.ts:
--------------------------------------------------------------------------------
  1 | import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
  2 | import {BatchRequestStep, BatchRequestContent} from '@microsoft/microsoft-graph-client'
  3 | import { getClient } from './graph';
  4 | 
  5 | export const getChatIdFromOnlineMeeting = (onlineMeetingUri: string) => {
  6 |     const match = onlineMeetingUri.match(/meetup-join\/(.*)\//);
  7 |     if (match.length > 1) {
  8 |         return match[1];
  9 |     }
 10 | 
 11 |     return null;
 12 | }
 13 | 
 14 | export const getChatParticipantsForOnlineMeeting = async (onlineMeetingUri: string) => {
 15 |     try {
 16 |         let chatId = getChatIdFromOnlineMeeting(onlineMeetingUri);
 17 |         const members = await getClient()?.api(`me/chats/${chatId}/members`).version('beta').get();
 18 |         if (members && members.value) {
 19 |             return members.value;
 20 |         }
 21 |     } catch (e) {
 22 |         return null;
 23 |     }
 24 | 
 25 |     return null;
 26 | }
 27 | 
 28 | export const createOnlineMeeting = async (startDateTime: string, endDateTime: string, subject: string) => {
 29 |     try {
 30 |         return await getClient().api('/me/onlineMeetings').post({
 31 |             startDateTime: startDateTime + '-00:00',
 32 |             endDateTime: endDateTime + '-00:00',
 33 |             subject
 34 |         });
 35 |     } catch (e) {
 36 |         return null;
 37 |     }
 38 | }
 39 | 
 40 | export const createOnlineMeetingsForGroups = async (startDateTime: string, endDateTime: string, numOfGroups: number) => {
 41 |     
 42 |     let requests: BatchRequestStep[] = [];
 43 | 
 44 |     for (let i = 0; i < numOfGroups; i++) {
 45 | 
 46 |         const content = {
 47 |             startDateTime: startDateTime + '-00:00',
 48 |             endDateTime: endDateTime + '-00:00',
 49 |             subject: `Group ${i+1} breakout`
 50 |         }
 51 | 
 52 |         const request = new Request(`/me/onlineMeetings`, {
 53 |             method: 'POST',
 54 |             body: JSON.stringify(content),
 55 |             headers: {
 56 |                 'Content-Type': 'application/json'
 57 |             }
 58 |         });
 59 |         
 60 |         requests.push({
 61 |             id: i.toString(),
 62 |             request
 63 |         })
 64 |     }
 65 | 
 66 |     let responses = [];
 67 | 
 68 |     while (requests.length > 0) {
 69 | 
 70 |         // batch supports 20 requests at a time
 71 |         const currentRequests = requests.splice(0, 20);
 72 |         const content = await (new BatchRequestContent(currentRequests)).getContent()
 73 | 
 74 |         try {
 75 |             const response = await getClient().api('/$batch').post(content);
 76 | 
 77 |             for (const r of response.responses) {
 78 |                 responses[r.id] = r.body;
 79 |             }
 80 |         } catch (e) {
 81 | 
 82 |         }
 83 |     }
 84 | 
 85 |     return responses;
 86 | }
 87 | 
 88 | export const sendMessageToOnlineMeeting = async (onlineMeetingUri: string, message: string, mentioned?: MicrosoftGraph.User[]) => {
 89 |     try {
 90 |         let chatId = getChatIdFromOnlineMeeting(onlineMeetingUri);
 91 |         const messageObj: any = {};
 92 | 
 93 |         if (mentioned) {
 94 |             message += '<br /><br />'
 95 |             let mentions = [];
 96 |             for (let i = 0; i < mentioned.length; i++) {
 97 |                 const person = mentioned[i];
 98 |                 message += ` <at id="${i}">${person.displayName}</at> `;
 99 |                 mentions.push({
100 |                     "id": i,
101 |                     "mentionText": person.displayName,
102 |                     "mentioned": {
103 |                         "user": {
104 |                             "displayName": person.displayName,
105 |                             "id": person.id,
106 |                             "userIdentityType": "aadUser"
107 |                         }
108 |                     }
109 |                 })
110 |             }
111 | 
112 |             messageObj.mentions = mentions;
113 |         }
114 | 
115 |         messageObj.body = {
116 |             content: message,
117 |             contentType: 'html'
118 |         }
119 | 
120 | 
121 |         await getClient()?.api(`/chats/${chatId}/messages`).version('beta').post(messageObj);
122 |     } catch (e) {
123 |         return null;
124 |     }
125 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Microsoft 365 and Graph Code Sample - Meeting Moderator
 2 | 
 3 | ## Overview
 4 | 
 5 | This sample demonstrates usage of Microsoft Graph to implement small group breakouts in a large Microsoft Teams meeting. 
 6 | 
 7 | The sample is a web application built with React and Microsoft Graph Toolkit. The app can run as a web app in the browser, a personal or group tab app in Microsoft Teams, or a Progressive Web app on most modern desktop and mobile operating systems.
 8 | 
 9 | [Watch the live stream where we showed how the app was built](https://www.youtube.com/playlist?list=PLWZJrkeLOrbYL7tFQJ-HY6Q9FZGmqSldH)
10 | 
11 | ## Prerequisites
12 | 
13 | * [NodeJS](https://nodejs.org/en/download/)
14 | * A code editor - we recommend [VS Code](https://code.visualstudio.com/)
15 | * Office 365 Tenant and a Global Admin account - [if you don't have one, get one for free here](https://docs.microsoft.com/en-us/office/developer-program/microsoft-365-developer-program-get-started)
16 | 
17 | ## Run the sample
18 | 
19 | In a terminal:
20 | 
21 | ```bash
22 | git clone https://github.com/microsoftgraph/meeting-moderator-sample
23 | 
24 | cd meeting-moderator-sample
25 | 
26 | npm install
27 | 
28 | npm start
29 | ```
30 | 
31 | The app will launch in your browser at `http://localhost:3000`. Sign in with your  tenant credentials and consent to the permissions (make sure the user has ability to Admin consent).
32 | 
33 | The app will load the current signed in user's calendar with the option to moderate individual events.
34 | 
35 | > Note: Only Microsoft Teams online meetings will be available for moderation. All other events will be grayed out.
36 | 
37 | ## Create an Azure Active Directory (AAD) application
38 | 
39 | The sample already contains a client id for an AAD application to allow you to get started immediately. However, we recommend creating your own so you have full control of the application. 
40 | 
41 | To create your own AAD app and client id, [follow the instructions in this blog post](https://developer.microsoft.com/microsoft-365/blogs/a-lap-around-microsoft-graph-toolkit-day-2-zero-to-hero/), under **Register your application**.
42 | 
43 | This step is required for the next section. The client id is defined in `src\index.tsx`
44 | 
45 | ## Installing the sample as a Teams application
46 | 
47 | This sample is also a Microsoft Teams tab application and you can install it in your instance by following these instructions.
48 | 
49 | ### 1. Run ngrok
50 | 
51 | To install it in your Teams environment, Microsoft Teams requires the app to be publicly accessible using HTTPS endpoint. To accomplish this, you can use `ngrok`, a tunneling software, which creates an externally addressable URL for a port you open locally on your machine:
52 | 
53 | 1. Install ngrok
54 |     ```bash
55 |     npm install -g ngrok
56 |     ```
57 | 
58 | 1. Ensure the app is running locally on `http://localhost:3000`. Start ngrok and attach it to port 3000
59 |     
60 |     ```bash
61 |     ngrok http 3000
62 |     ```
63 | 
64 |     This will generate a public url (similar to `https://455709c1.ngrok.io`) that you can use to access the app. You will use this url in your Teams manifest.
65 | 
66 | ### 2. Add ngrok url to your AAD application
67 | 
68 | Now that ngrok is running, you need to add this url to your AAD application redirect urls. If you have not created a new AAD application, make sure you do that first before continuing (see section above). 
69 | 
70 | ### 3. Update Teams manifest and install application
71 | 
72 | To update the manifest, you will need to install the [Microsoft Team Extension](https://aka.ms/teams-toolkit) in VS code. Once you've installed the extension, open `.publish/Development.env` and replace the `baseUrl0` with your ngrok url. Save the file.
73 | 
74 | Once the file is saved, the `Development.zip` package will be automatically updated. You can now use this package to install the application in Microsoft Teams:
75 | 
76 | 1. In Microsoft Teams, click on `Apps` in the lower left corner
77 | 
78 | 2. Click on `Upload a custom app`. This will open the file picker. Select `Development.zip` to install the application.
79 | 
80 | ## Using the Moderator Bot
81 | 
82 | This sample also includes a helpful bot for helping the moderator keep track of questions from the attendees. See the `bot` branch for description and instructions on deploying and running the bot in your Azure Subscription.
83 | 
84 | 
85 | ## Useful Links
86 | - Microsoft Graph Dev Portal https://graph.developer.com/ 
87 | - Graph Explorer https://aka.ms/GE 
88 | - Microsoft Graph Toolkit https://aka.ms/mgt 
89 | - Microsoft Graph Toolkit Blog Series https://aka.ms/mgtLap
90 | - Microsoft Teams Dev Portal https://developer.microsoft.com/en-us/microsoft-teams
91 | 


--------------------------------------------------------------------------------
/src/App/EventView/BreakoutView/BreakoutsCreatorView/BreakoutsCreatorView.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from 'react';
  2 | 
  3 | import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
  4 | import { PrimaryButton, IconButton, Slider } from '@fluentui/react';
  5 | import { Person, PeoplePicker, PersonCardInteraction, PersonViewType } from '@microsoft/mgt-react';
  6 | 
  7 | import {ReactComponent as MoveIcon} from '../../../../images/move.svg';
  8 | import './BreakoutsCreatorView.css'
  9 | 
 10 | export type BreakoutCreatorViewProps = {
 11 |     participants: MicrosoftGraph.User[], 
 12 |     moderators: MicrosoftGraph.User[],
 13 |     onModeratorsAdded: Function,
 14 |     onModeratorsRemoved: Function,
 15 |     currentSignedInUser: MicrosoftGraph.User,
 16 |     onCreateClick: (groups: MicrosoftGraph.User[][]) => void,
 17 | }
 18 | 
 19 | export const BreakoutsCreatorView = (props: BreakoutCreatorViewProps) => {
 20 | 
 21 |     const [groupSize, setGroupSize] = useState(5);
 22 |     const [groups, setGroups] = useState<MicrosoftGraph.User[][]>(null);
 23 | 
 24 |     useEffect(() => {
 25 |         setGroups(generateGroups(props.participants, groupSize));
 26 |     }, [groupSize, props.participants]);
 27 | 
 28 |     const handleSelectionChanged = (e) => {
 29 |         let person = e.detail[0];
 30 |         e.target.selectedPeople = [];
 31 |         props.onModeratorsAdded(person);
 32 |     };
 33 | 
 34 |     const handleRemoveClicked = (person) => {
 35 |         props.onModeratorsRemoved(person)
 36 |     }
 37 | 
 38 |     return <div className="BreakoutsCreatorView">
 39 |         <div className="Breakouts Card">
 40 |             <div className="CardTitle">Create Breakouts</div>
 41 |             <Slider
 42 |                 className="Slider"
 43 |                 label="Group size"
 44 |                 min={2}
 45 |                 max={10}
 46 |                 step={1}
 47 |                 defaultValue={groupSize}
 48 |                 showValue={true}
 49 |                 onChange={(value: number) => setGroupSize(value)}
 50 |                 snapToStep
 51 |                 />
 52 |             <div className="Groups">
 53 |                 {groups && groups.map((g, i) => (<GroupsCreatorGroupView groupMembers={g} name={`Group ${i + 1}`} key={i} />))}
 54 |             </div>
 55 |             <div className="Actions">
 56 |                 <PrimaryButton text='Create Breakouts' onClick={() => props.onCreateClick(groups)} />
 57 |             </div> 
 58 | 
 59 |         </div>
 60 |         <div className="Moderators Card">
 61 |             <div className="CardTitle">Moderators</div>
 62 |             <div className="ModeratorsList">
 63 |                 {props.moderators.map((p, i) => 
 64 |                     <div className="ModeratorPerson Card" key={i}>
 65 |                         <Person personDetails={p} showPresence avatarSize="large" fetchImage view={PersonViewType.oneline} personCardInteraction={PersonCardInteraction.click} />
 66 |                         {props.currentSignedInUser.id === p.id ? '' : (
 67 |                             <div className="ModeratorCloseIconButton">
 68 |                                 <IconButton  iconProps={{iconName: 'ChromeClose'}} onClick={(e) => handleRemoveClicked(p)}></IconButton>
 69 |                             </div>
 70 |                         )}
 71 |                     </div>
 72 |                 )}
 73 |             </div>
 74 |             <PeoplePicker people={props.participants} selectionChanged={handleSelectionChanged}></PeoplePicker>
 75 |         </div>
 76 |     </div>
 77 | 
 78 | }
 79 | 
 80 | const GroupsCreatorGroupView = (props: {groupMembers: MicrosoftGraph.User[], name: string}) => {
 81 | 
 82 |     return (
 83 |     <div className="GroupView">
 84 |         <div className="GroupTitle">{props.name}</div>
 85 |         <div className="GroupPeople">
 86 |             {props.groupMembers.map((p, i) => 
 87 |                 <div className="GroupPerson" key={i}>
 88 |                     <MoveIcon className="GroupPersonMoveIcon"></MoveIcon>
 89 |                     <Person personDetails={p} showPresence avatarSize="large" fetchImage view={PersonViewType.oneline} personCardInteraction={PersonCardInteraction.click} />
 90 |                 </div>
 91 |             )}
 92 |         </div>
 93 |     </div>
 94 |     );
 95 | }
 96 | 
 97 | /**
 98 |  * Shuffles array in place.
 99 |  * from: https://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array
100 |  * @param {Array} a items An array containing the items.
101 |  */
102 | function shuffle(a) {
103 |     var j, x, i;
104 |     for (i = a.length - 1; i > 0; i--) {
105 |         j = Math.floor(Math.random() * (i + 1));
106 |         x = a[i];
107 |         a[i] = a[j];
108 |         a[j] = x;
109 |     }
110 |     return a;
111 | }
112 | 
113 | const generateGroups = (users: MicrosoftGraph.User[], groupSize: number) => {
114 |     const shuffled = shuffle(users);
115 |     const numberOfGroups = Math.ceil(shuffled.length / groupSize);
116 |     const groups = [];
117 | 
118 |     for (let i = 0; i < numberOfGroups; i++) {
119 |         groups.push([]);
120 |     }
121 | 
122 |     let personCount = 0;
123 |     let groupNumber = 0;
124 | 
125 |     for (const person of shuffled) {
126 |         if (personCount === groupSize) {
127 |             groupNumber++;
128 |             personCount = 0;
129 |         }
130 | 
131 |         groups[groupNumber].push(person);
132 | 
133 |         personCount++;
134 |     }
135 | 
136 |     return groups;
137 | }
138 | 


--------------------------------------------------------------------------------
/src/serviceWorker.ts:
--------------------------------------------------------------------------------
  1 | // This optional code is used to register a service worker.
  2 | // register() is not called by default.
  3 | 
  4 | // This lets the app load faster on subsequent visits in production, and gives
  5 | // it offline capabilities. However, it also means that developers (and users)
  6 | // will only see deployed updates on subsequent visits to a page, after all the
  7 | // existing tabs open on the page have been closed, since previously cached
  8 | // resources are updated in the background.
  9 | 
 10 | // To learn more about the benefits of this model and instructions on how to
 11 | // opt-in, read https://bit.ly/CRA-PWA
 12 | 
 13 | const isLocalhost = Boolean(
 14 |   window.location.hostname === 'localhost' ||
 15 |     // [::1] is the IPv6 localhost address.
 16 |     window.location.hostname === '[::1]' ||
 17 |     // 127.0.0.0/8 are considered localhost for IPv4.
 18 |     window.location.hostname.match(
 19 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 20 |     )
 21 | );
 22 | 
 23 | type Config = {
 24 |   onSuccess?: (registration: ServiceWorkerRegistration) => void;
 25 |   onUpdate?: (registration: ServiceWorkerRegistration) => void;
 26 | };
 27 | 
 28 | export function register(config?: Config) {
 29 |   if ('serviceWorker' in navigator) {
 30 |     // The URL constructor is available in all browsers that support SW.
 31 |     const publicUrl = new URL(
 32 |       process.env.PUBLIC_URL,
 33 |       window.location.href
 34 |     );
 35 |     
 36 |     if (publicUrl.origin !== window.location.origin) {
 37 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 38 |       // from what our page is served on. This might happen if a CDN is used to
 39 |       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
 40 |       return;
 41 |     }
 42 | 
 43 |     window.addEventListener('load', () => {
 44 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 45 | 
 46 |       if (isLocalhost) {
 47 |         // This is running on localhost. Let's check if a service worker still exists or not.
 48 |         checkValidServiceWorker(swUrl, config);
 49 | 
 50 |         // Add some additional logging to localhost, pointing developers to the
 51 |         // service worker/PWA documentation.
 52 |         navigator.serviceWorker.ready.then(() => {
 53 |           console.log(
 54 |             'This web app is being served cache-first by a service ' +
 55 |               'worker. To learn more, visit https://bit.ly/CRA-PWA'
 56 |           );
 57 |         });
 58 |       } else {
 59 |         // Is not localhost. Just register service worker
 60 |         registerValidSW(swUrl, config);
 61 |       }
 62 |     });
 63 |   }
 64 | }
 65 | 
 66 | function registerValidSW(swUrl: string, config?: Config) {
 67 |   navigator.serviceWorker
 68 |     .register(swUrl)
 69 |     .then(registration => {
 70 |       registration.onupdatefound = () => {
 71 |         const installingWorker = registration.installing;
 72 |         if (installingWorker == null) {
 73 |           return;
 74 |         }
 75 |         installingWorker.onstatechange = () => {
 76 |           if (installingWorker.state === 'installed') {
 77 |             if (navigator.serviceWorker.controller) {
 78 |               // At this point, the updated precached content has been fetched,
 79 |               // but the previous service worker will still serve the older
 80 |               // content until all client tabs are closed.
 81 |               console.log(
 82 |                 'New content is available and will be used when all ' +
 83 |                   'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
 84 |               );
 85 | 
 86 |               // Execute callback
 87 |               if (config && config.onUpdate) {
 88 |                 config.onUpdate(registration);
 89 |               }
 90 |             } else {
 91 |               // At this point, everything has been precached.
 92 |               // It's the perfect time to display a
 93 |               // "Content is cached for offline use." message.
 94 |               console.log('Content is cached for offline use.');
 95 | 
 96 |               // Execute callback
 97 |               if (config && config.onSuccess) {
 98 |                 config.onSuccess(registration);
 99 |               }
100 |             }
101 |           }
102 |         };
103 |       };
104 |     })
105 |     .catch(error => {
106 |       console.error('Error during service worker registration:', error);
107 |     });
108 | }
109 | 
110 | function checkValidServiceWorker(swUrl: string, config?: Config) {
111 |   // Check if the service worker can be found. If it can't reload the page.
112 |   fetch(swUrl, {
113 |     headers: { 'Service-Worker': 'script' }
114 |   })
115 |     .then(response => {
116 |       // Ensure service worker exists, and that we really are getting a JS file.
117 |       const contentType = response.headers.get('content-type');
118 |       if (
119 |         response.status === 404 ||
120 |         (contentType != null && contentType.indexOf('javascript') === -1)
121 |       ) {
122 |         // No service worker found. Probably a different app. Reload the page.
123 |         navigator.serviceWorker.ready.then(registration => {
124 |           registration.unregister().then(() => {
125 |             window.location.reload();
126 |           });
127 |         });
128 |       } else {
129 |         // Service worker found. Proceed as normal.
130 |         registerValidSW(swUrl, config);
131 |       }
132 |     })
133 |     .catch(() => {
134 |       console.log(
135 |         'No internet connection found. App is running in offline mode.'
136 |       );
137 |     });
138 | }
139 | 
140 | export function unregister() {
141 |   if ('serviceWorker' in navigator) {
142 |     navigator.serviceWorker.ready
143 |       .then(registration => {
144 |         registration.unregister();
145 |       })
146 |       .catch(error => {
147 |         console.error(error.message);
148 |       });
149 |   }
150 | }
151 | 


--------------------------------------------------------------------------------
/src/utils/graph.teams.ts:
--------------------------------------------------------------------------------
  1 | import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
  2 | import {ResponseType, BatchRequestStep, BatchRequestContent} from '@microsoft/microsoft-graph-client'
  3 | import { GroupInfo } from './types';
  4 | import { getClient } from './graph';
  5 | 
  6 | const timeout = (ms: number) => {
  7 |     return new Promise(resolve => setTimeout(resolve, ms));
  8 | }
  9 | 
 10 | export const createTeamAndChannelsFromGroups = async (groups: MicrosoftGraph.User[][], teamName: string) => {
 11 |     const team = {
 12 |         "template@odata.bind": "https://graph.microsoft.com/beta/teamsTemplates('standard')",
 13 |         "visibility": "private",
 14 |         "displayName": teamName,
 15 |         "description": "This is a team used for breakout discussions",
 16 |         channels: [],
 17 |         // installedApps: [
 18 |         //     {
 19 |         //         // TODO: id here needs to be the one from the Teams store. 
 20 |         //         // Upload the manifest/app to the store (for Contoso)
 21 |         //         // then find the app in the store and click on the ...
 22 |         //         // click copy link - the link will contain the id of the app
 23 |         //         'teamsApp@odata.bind':  "https://graph.microsoft.com/v1.0/appCatalogs/teamsApps('com.microsoft.teams.moderator')"
 24 |         //     }
 25 |         // ]
 26 |     };
 27 | 
 28 |     for (let i = 0; i < groups.length; i++) {
 29 |         // const group = groups[i];
 30 |         team.channels.push({
 31 |             "displayName": `Group ${i+1}`
 32 |         })
 33 |     }
 34 | 
 35 |     let response: Response;
 36 |     try {
 37 |         response =  await getClient().api(`teams`)
 38 |                                     .version('beta')
 39 |                                     .responseType(ResponseType.RAW).post(team);
 40 |     } catch (e) {
 41 |         return null;
 42 |     }
 43 |     
 44 |     if (!response.ok) {
 45 |         return null;
 46 |     }                
 47 |     
 48 |      // need to check the status of our job
 49 |     // https://docs.microsoft.com/en-us/graph/api/resources/teamsasyncoperationstatus?view=graph-rest-beta
 50 |     const location = response.headers.get('Location')
 51 |     let status = 'inProgress';
 52 |     let operationResult = null;
 53 | 
 54 |     
 55 |     while (status === 'inProgress' || status === 'notStarted') {
 56 |         // need to wait to ensure team and channels are created
 57 |         await timeout(10000);
 58 |         try {
 59 |             operationResult = await getClient().api(location).version('beta').get();
 60 |             status = operationResult.status;
 61 |         } catch (e) { }
 62 |     }
 63 | 
 64 |     if (status !== 'succeeded') {
 65 |         // something went wrong creating the team
 66 |         return null;
 67 |     }            
 68 |     
 69 |     return operationResult.targetResourceId;
 70 | }
 71 | 
 72 | export const addUserToTeam = async (teamId: string, userId: string) => {
 73 |     try {
 74 |         await getClient().api(`groups/${teamId}/members/$ref`).post({
 75 |             "@odata.id": `https://graph.microsoft.com/beta/directoryObjects/${userId}`
 76 |         })
 77 |     } catch (e) {
 78 |         return null;
 79 |     }
 80 | }
 81 | 
 82 | export const addUsersToTeam = async (teamId: string, userIds: string[]) => {
 83 | 
 84 |     let requests :BatchRequestStep[] = [];
 85 | 
 86 |     for (const i in userIds) {
 87 |         const id = userIds[i];
 88 | 
 89 |         const content = {
 90 |             "@odata.id": `https://graph.microsoft.com/beta/directoryObjects/${id}`
 91 |         }
 92 | 
 93 |         const request = new Request(`/groups/${teamId}/members/$ref`, {
 94 |             method: 'POST',
 95 |             body: JSON.stringify(content),
 96 |             headers: {
 97 |                 'Content-Type': 'application/json'
 98 |             }
 99 |         });
100 |         
101 |         requests.push({
102 |             id: i,
103 |             request
104 |         })
105 |     }
106 | 
107 |     while (requests.length > 0) {
108 | 
109 |         // batch supports 20 requests at a time
110 |         const currentRequests = requests.splice(0, 20);
111 |         const content = await (new BatchRequestContent(currentRequests)).getContent()
112 | 
113 |         try {
114 |             await getClient().api('/$batch').post(content);
115 |         } catch (e) {}
116 |     }
117 | }
118 | 
119 | // export const addUsersToTeam = async (teamId: string, userIds: string[]) => {
120 | 
121 | //     while (userIds.length > 0) {
122 | //         const currentUsers = userIds.splice(0, 20);
123 | 
124 | //         let content = {
125 | //             'members@odata.bind': currentUsers.map(id => `https://graph.microsoft.com/v1.0/directoryObjects/${id}`)
126 | //         }
127 | 
128 | //         try {
129 | //             await getClient().api(`groups/${teamId}`).patch(content);
130 | //         } catch (e) {}
131 | //     }
132 | // }
133 | 
134 | // export const addUsersToTeam = async (teamId: string, userIds: string[]) => {
135 | //     for (const id of userIds) {
136 | //         await addUserToTeam(teamId, id);
137 | //     }
138 | // }
139 | 
140 | export const getChannelsForTeam: (teamId: string) => Promise<MicrosoftGraph.Channel[]> = async (teamId: string) => {
141 |     try {
142 |         return (await getClient().api(`teams/${teamId}/channels`).get()).value;
143 |     } catch (e) {
144 |         return null;
145 |     }
146 | }
147 | 
148 | export const sendMessageToChannel = async (teamId: string, channelId: string, onlineMeetingUrl: string, mentioned: MicrosoftGraph.User[]) => {
149 |     try {
150 |         const response = await getClient()
151 |             .api(`/teams/${teamId}/channels/${channelId}/messages`)
152 |             .version('beta')
153 |             .post(getMessageContentForChannel(onlineMeetingUrl, mentioned));
154 |         return response;
155 |     } catch (e) {
156 |         return null;
157 |     }
158 | }
159 | 
160 | export const sendMessageToChannels = async (teamId: string, groups: GroupInfo[]) => {
161 |     let requests: BatchRequestStep[] = [];
162 | 
163 |     for (const i in groups) {
164 |         const group = groups[i]
165 | 
166 |         const content = getMessageContentForChannel(group.onlineMeeting, group.members);
167 | 
168 |         const request = new Request(`/teams/${teamId}/channels/${group.id}/messages`, {
169 |             method: 'POST',
170 |             body: JSON.stringify(content),
171 |             headers: {
172 |                 'Content-Type': 'application/json'
173 |             }
174 |         });
175 |         
176 |         requests.push({
177 |             id: i.toString(),
178 |             request
179 |         })
180 |     }
181 | 
182 |     while (requests.length > 0) {
183 | 
184 |         // batch supports 20 requests at a time
185 |         const currentRequests = requests.splice(0, 20);
186 |         const content = await (new BatchRequestContent(currentRequests)).getContent()
187 | 
188 |         try {
189 |             await getClient().api('/$batch').version('beta').post(content);
190 |         } catch (e) {}
191 |     }
192 | }
193 | 
194 | export const archiveTeam = async (teamId) => {
195 |     try {
196 |         await getClient()?.api(`/teams/${teamId}/archive`).post({});
197 |     } catch (e) {
198 |         return null;
199 |     }
200 | }
201 | 
202 | const getMessageContentForChannel = (onlineMeetingUrl: string, mentioned: MicrosoftGraph.User[]) => {
203 |     
204 |     let messageContent = `<h1>Hey everyone!</h1>
205 | Let's use this meeting to have a private breakout!
206 | <br />
207 | <h2><a href="${onlineMeetingUrl}">Join meeting</a></h2>
208 | <br />
209 | `;
210 | 
211 |     let mentions = [];
212 |     for (let i = 0; i < mentioned.length; i++) {
213 |         const person = mentioned[i];
214 |         messageContent += ` <at id="${i}">${person.displayName}</at> `;
215 |         mentions.push({
216 |             "id": i,
217 |             "mentionText": person.displayName,
218 |             "mentioned": {
219 |                 "user": {
220 |                     "displayName": person.displayName,
221 |                     "id": person.id,
222 |                     "userIdentityType": "aadUser"
223 |                 }
224 |             }
225 |         })
226 |     }
227 | 
228 |     return {
229 |         "body": {
230 |             "contentType": "html",
231 |             "content": messageContent
232 |         },
233 |         "mentions": mentions
234 |     }
235 | }


--------------------------------------------------------------------------------
/src/App/EventView/BreakoutView/BreakoutView.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from 'react';
  2 | 
  3 | import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
  4 | import * as FluentUI from '@fluentui/react';
  5 | import { Person, PersonCardInteraction, PersonViewType } from '@microsoft/mgt-react';
  6 | 
  7 | import { GraphEvent, GroupInfo } from '../../../utils/types';
  8 | import { getEventExtension, updateEventExtension } from '../../../utils/graph.events';
  9 | import { getCurrentSignedInUser } from '../../../utils/graph';
 10 | import { createOnlineMeetingsForGroups, sendMessageToOnlineMeeting, getChatIdFromOnlineMeeting } from '../../../utils/graph.onlineMeetings';
 11 | import { createTeamAndChannelsFromGroups, addUsersToTeam, getChannelsForTeam, sendMessageToChannels, archiveTeam } from '../../../utils/graph.teams';
 12 | 
 13 | import { BreakoutsCreatorView } from './BreakoutsCreatorView/BreakoutsCreatorView';
 14 | import './BreakoutView.css';
 15 | import { openTeamsUrl } from '../../../utils/helpers';
 16 | 
 17 | export interface BreakoutsInfo {
 18 |     teamName: string,
 19 |     teamId: string,
 20 |     moderators: MicrosoftGraph.User[],
 21 |     groups: GroupInfo[]
 22 | }
 23 | 
 24 | export interface BreakoutViewProps {
 25 |     event: GraphEvent,
 26 |     attendees: MicrosoftGraph.User[]
 27 | }
 28 | 
 29 | export function BreakoutView(props: BreakoutViewProps) {
 30 | 
 31 |     const [isLoading, setIsLoading] = useState(true);
 32 |     const [loadingMessage, setLoadingMessage] = useState(null);
 33 | 
 34 | 
 35 |     const [moderators, setModerators] = useState(null);
 36 |     const [participants, setParticipants] = useState(null);
 37 |     const [breakouts, setBreakouts] = useState<BreakoutsInfo>(null);
 38 | 
 39 |     const [currentSignedInUser, setCurrentSignedInUser] = useState(null);
 40 | 
 41 |     useEffect(() => {
 42 |         (async () => {
 43 |             setIsLoading(true);
 44 |             
 45 |             const currentSignedInUser = await getCurrentSignedInUser();
 46 |             setCurrentSignedInUser(currentSignedInUser);
 47 | 
 48 |             let moderators = [currentSignedInUser];
 49 | 
 50 |             const extension = await getEventExtension(props.event.id);
 51 |             if (extension && extension.breakouts && extension.breakouts !== '') {
 52 |                 const breakouts : BreakoutsInfo = JSON.parse(extension.breakouts);
 53 |                 moderators = breakouts.moderators;
 54 |                 
 55 |                 setBreakouts(breakouts);
 56 |             } 
 57 | 
 58 |             const participants = props.attendees.filter(p => !moderators.find(m => m.id === p.id))
 59 | 
 60 |             setParticipants(participants);
 61 |             setModerators(moderators);
 62 |             setIsLoading(false);
 63 |         })();
 64 |     }, []);
 65 | 
 66 |     if (isLoading) {
 67 |         return (
 68 |         <div>
 69 |             <FluentUI.Spinner 
 70 |                 size={FluentUI.SpinnerSize.large} 
 71 |                 label={loadingMessage} 
 72 |                 labelPosition="bottom"/>
 73 |         </div>)
 74 |         ;
 75 |     }
 76 | 
 77 |     const handleModeratorsAdded = (person) => {
 78 |         setModerators([...moderators, person]);
 79 |         setParticipants(participants.filter(p => p.id !== person.id))
 80 |     }
 81 | 
 82 |     const handleModeratorsRemoved = (person) => {
 83 |         setModerators(moderators.filter(m => m.id !== person.id));
 84 |         setParticipants([person, ...participants]);
 85 |     }
 86 | 
 87 |     const handleCreateGroups = async (groups: MicrosoftGraph.User[][]) => {
 88 |         setIsLoading(true);
 89 | 
 90 |         const teamName = props.event.subject + ' Breakouts';
 91 | 
 92 |         setLoadingMessage(`Creating Team "${teamName}"` )
 93 |         const teamId = await createTeamAndChannelsFromGroups(groups, teamName);
 94 |         if (!teamId) return;
 95 | 
 96 |         const userIds = [...participants, ...moderators]
 97 |             .filter(u => u.id !== currentSignedInUser.id)
 98 |             .map(u => u.id);
 99 |         setLoadingMessage(`Adding users to team`)
100 |         await addUsersToTeam(teamId, userIds);
101 | 
102 |         const channels = await getChannelsForTeam(teamId);
103 |         if (!channels) return;
104 |         
105 |         setLoadingMessage(`Creating online meetings`)
106 |         const onlineMeetings = await createOnlineMeetingsForGroups(
107 |             props.event.start.dateTime, 
108 |             props.event.end.dateTime,
109 |             groups.length);
110 | 
111 | 
112 |         setLoadingMessage(`Sending messages to each channel`)
113 |         const groupInfo: GroupInfo[] = [];
114 | 
115 |         for (const channel of channels) {
116 | 
117 |             const match = channel.displayName.match(/Group ([0-9]+)/);
118 |             if (match && match.length > 1) {
119 |                 const index = Number.parseInt(match[1]) - 1;
120 |                 const groupName = `Group ${index + 1}`;
121 | 
122 |                 const group = groups[index];
123 |                 const onlineMeeting = onlineMeetings[index];
124 | 
125 |                 groupInfo.push({
126 |                     name: groupName,
127 |                     id: channel.id,
128 |                     onlineMeeting: onlineMeeting.joinUrl,
129 |                     members: group.map(m => {return {id: m.id, displayName: m.displayName}})
130 |                 });
131 |             }   
132 |         }
133 | 
134 |         await sendMessageToChannels(teamId, groupInfo);
135 | 
136 |         const breakouts: BreakoutsInfo = {
137 |             teamName,
138 |             teamId,
139 |             moderators: moderators.map(m => {return {id: m.id, displayName: m.displayName}}),
140 |             groups: groupInfo
141 |         };
142 | 
143 |         updateEventExtension(props.event.id, breakouts);
144 |         setBreakouts(breakouts);
145 |         setIsLoading(false);
146 |     }
147 |     
148 |     const archiveBreakouts = async () => {
149 |         setLoadingMessage('Archiving team');
150 |         setIsLoading(true);
151 |         await archiveTeam(breakouts.teamId);
152 |         await updateEventExtension(props.event.id, null)
153 |         setBreakouts(null);
154 |         setIsLoading(false);
155 |     };
156 | 
157 | 
158 |     return (
159 |     <div className="Breakouts">
160 |         {!breakouts ?
161 |             <BreakoutsCreatorView 
162 |                 participants={participants} 
163 |                 moderators={moderators}
164 |                 onModeratorsAdded={handleModeratorsAdded}
165 |                 onModeratorsRemoved={handleModeratorsRemoved}
166 |                 currentSignedInUser={currentSignedInUser}
167 |                 onCreateClick={handleCreateGroups}/>
168 |         : 
169 |             <Breakouts 
170 |                 breakouts={breakouts} 
171 |                 event={props.event} 
172 |                 onArchive={archiveBreakouts}></Breakouts>
173 |         }
174 |     </div>
175 |     );
176 | }
177 | 
178 | const Breakouts = (props: {breakouts: BreakoutsInfo, event: GraphEvent, onArchive: () => void}) => {
179 | 
180 |     const [message, setMessage] = useState('Hey [group-name], you have five minutes left! [meeting-link]')
181 |     const [isLoading, setIsLoading] = useState(false);
182 |     const [showDialog, setShowDialog] = useState(false);
183 | 
184 |     const sendMessage = async () => {
185 |         setIsLoading(true);
186 | 
187 |         let msg = message.replace('[meeting-link]', `<a href="${props.event.onlineMeeting.joinUrl}">Join main meeting</a>`)
188 |         for (const {onlineMeeting, members, name} of props.breakouts.groups) {
189 |             let groupMsg = msg.replace('[group-name]', name)
190 |             await sendMessageToOnlineMeeting(onlineMeeting, groupMsg, members);
191 |         }
192 |         setIsLoading(false);
193 |     }
194 | 
195 |     return (
196 |         <div className="Breakouts Card">
197 |             <div className="BreakoutsTitleContainer">
198 |                 <div className="CardTitle">Send message to all breakouts</div>
199 |                 <div className="BreakoutsArchiveButton">
200 |                     <FluentUI.DefaultButton text="Archive" onClick={() => setShowDialog(true)} style={{color:'red', borderColor:'red'}} />
201 |                 </div>
202 |             </div>
203 |             <div className="MessageTextField">
204 |                 <FluentUI.TextField 
205 |                     label="Send a message to all breakouts" 
206 |                     multiline rows={3} 
207 |                     value={message}
208 |                     onChange={(e, value) => setMessage(value)} />
209 |             </div>
210 |             <div className="PlacedholderDescription">
211 |                 <FluentUI.Label>The following placeholders will be replaced in the sent message</FluentUI.Label>
212 |                 <div> - [meeting-link]: link to original meeting</div>
213 |                 <div> - [group-name]: name of the group where the message is sent</div>
214 |             </div>
215 |             <div className="MessageSendButtonContainer">
216 |                 {isLoading
217 |                     ? <FluentUI.Spinner className="MessageSpinner" size={FluentUI.SpinnerSize.small} label="Sending Message" labelPosition="right"/>
218 |                     : <FluentUI.PrimaryButton  text="Send" disabled={!message} onClick={sendMessage}></FluentUI.PrimaryButton>
219 |                 }
220 |             </div>
221 |             <div className="BreakoutGroups">
222 |                 {props.breakouts.groups.map((group, i) => 
223 |                     <div key={i}>
224 |                         <BreakoutGroup group={group}></BreakoutGroup>
225 |                     </div>
226 |                 )}
227 |             </div>
228 | 
229 |             
230 | 
231 |             <FluentUI.Dialog
232 |                 hidden={!showDialog}
233 |                 onDismiss={() => setShowDialog(false)}
234 |                 dialogContentProps={{
235 |                     type: FluentUI.DialogType.normal,
236 |                     title: 'Archive Breakout Groups!',
237 |                     closeButtonAriaLabel: 'Archive',
238 |                     subText: 'Are you sure you want to archive the breakout groups?',
239 |                 }}
240 |                 modalProps={{
241 |                     isBlocking: false,
242 |                     styles: { main: { maxWidth: 450 } }
243 |                 }}>
244 |                 <FluentUI.DialogFooter>
245 |                     <FluentUI.PrimaryButton onClick={props.onArchive} text="Archive" style={{background: 'red', border: 'red'}} />
246 |                     <FluentUI.DefaultButton onClick={() => setShowDialog(false)} text="NOOO, don't Archive!" />
247 |                 </FluentUI.DialogFooter>
248 |             </FluentUI.Dialog>
249 |         </div>
250 |     );
251 | }
252 | 
253 | const BreakoutGroup = (props: {group: GroupInfo}) => {
254 | 
255 |     const handleJoin = () => {
256 |         openTeamsUrl(props.group.onlineMeeting);
257 |     }
258 | 
259 |     const handleChat = () => {
260 |         let chatId = getChatIdFromOnlineMeeting(props.group.onlineMeeting);
261 |         let url = `https://teams.microsoft.com/l/chat/${chatId}`;
262 |         openTeamsUrl(url);
263 |     }
264 | 
265 |     return (
266 |         <div className="GroupView">
267 |             <div className="GroupTitle">{props.group.name}</div>
268 |             <div className="GroupPeople">
269 |                 {props.group.members.map((p, i) => 
270 |                     <div className="GroupPerson" key={i}>
271 |                         <Person personDetails={p} showPresence avatarSize="large" fetchImage view={PersonViewType.oneline} personCardInteraction={PersonCardInteraction.hover} />
272 |                     </div>
273 |                 )}
274 |                 <div className="GroupActions">
275 |                     <FluentUI.ActionButton iconProps={{ iconName: 'TeamsLogo16' }} text="Join" onClick={handleJoin}/>
276 |                     <FluentUI.ActionButton iconProps={{ iconName: 'CannedChat' }} text="Chat" onClick={handleChat}/>
277 |                 </div>
278 |             </div>
279 |         </div>
280 |         );
281 | }


--------------------------------------------------------------------------------
/src/images/tandem-bicycle.svg:
--------------------------------------------------------------------------------
  1 | <svg width="416" height="138" viewBox="0 0 416 138" fill="none" xmlns="http://www.w3.org/2000/svg">
  2 | <path d="M285.182 112.242V116.622C285.182 116.622 294.337 118.861 298.585 113.592C299.079 112.966 298.618 112.044 297.828 112.044H290.912L289.595 110.101L285.182 112.242Z" fill="#4F3E33"/>
  3 | <path d="M269.11 61.92L286.762 80.3625L289.595 110.101H284.358L277.936 88.1347L256.398 69.1982L269.11 61.92Z" fill="#5D6377"/>
  4 | <path d="M223.729 61.92L241.381 80.3625L244.18 110.101H239.8L232.555 88.1347L211.016 69.1982L223.729 61.92Z" fill="#939393"/>
  5 | <path d="M244.18 110.101H239.8V112.242L244.18 110.101Z" fill="#FDA84C"/>
  6 | <path d="M239.8 111.155V116.622C239.8 116.622 248.955 118.861 253.204 113.592C253.698 112.966 253.236 112.044 252.446 112.044H245.497L244.18 110.101L239.8 111.155Z" fill="#737373"/>
  7 | <path d="M178.709 61.92L196.361 80.3625L199.16 110.101H194.747L187.535 88.1347L165.964 69.1982L178.709 61.92Z" fill="#5D6377"/>
  8 | <path d="M199.161 110.101H194.748V112.242L199.161 110.101Z" fill="#FDA84C"/>
  9 | <path d="M194.748 110.101V116.622C194.748 116.622 203.903 118.861 208.151 113.592C208.645 112.966 208.184 112.044 207.394 112.044H200.445L199.128 110.101H194.748V110.101Z" fill="black"/>
 10 | <path d="M151.671 110.101H147.291V112.242L151.671 110.101Z" fill="#FDA84C"/>
 11 | <path d="M147.291 111.155V116.622C147.291 116.622 156.446 118.861 160.695 113.592C161.189 112.966 160.728 112.044 159.937 112.044H152.988L151.671 110.101L147.291 111.155Z" fill="#4F3E33"/>
 12 | <path d="M138.577 109.074L137.795 111.277L154.213 117.105L154.995 114.901L138.577 109.074Z" fill="#C2C2C2"/>
 13 | <path d="M186.064 109.068L185.282 111.272L201.7 117.099L202.482 114.896L186.064 109.068Z" fill="#C2C2C2"/>
 14 | <path d="M231.108 109.055L230.326 111.258L246.744 117.086L247.526 114.882L231.108 109.055Z" fill="#C2C2C2"/>
 15 | <path d="M276.758 109.058L275.976 111.262L292.394 117.089L293.176 114.886L276.758 109.058Z" fill="#C2C2C2"/>
 16 | <path d="M57.6603 83.2696H16V81.1619H57.6603C58.2531 81.1619 58.7142 81.623 58.7142 82.2158C58.7142 82.7756 58.2202 83.2696 57.6603 83.2696Z" fill="#E6E6E6"/>
 17 | <path d="M85.9695 53.094H32.5522C31.9594 53.094 31.4983 52.6329 31.4983 52.0401C31.4983 51.4473 31.9594 50.9863 32.5522 50.9863H85.9695C86.5623 50.9863 87.0234 51.4473 87.0234 52.0401C87.0234 52.6329 86.5623 53.094 85.9695 53.094Z" fill="#E6E6E6"/>
 18 | <path d="M343.255 54.6872H143.186C142.594 54.6872 142.133 54.2262 142.133 53.6334C142.133 53.0406 142.594 52.5795 143.186 52.5795H343.255C343.847 52.5795 344.308 53.0406 344.308 53.6334C344.276 54.2262 343.815 54.6872 343.255 54.6872Z" fill="#E6E6E6"/>
 19 | <path d="M31.2843 38.2923H12.0185C11.4257 38.2923 10.9646 37.8312 10.9646 37.2384C10.9646 36.6456 11.4257 36.1846 12.0185 36.1846H31.2843C31.8771 36.1846 32.3381 36.6456 32.3381 37.2384C32.3381 37.8312 31.8441 38.2923 31.2843 38.2923Z" fill="#E6E6E6"/>
 20 | <path d="M70.1948 68.8031H53.4977C52.9049 68.8031 52.4438 68.342 52.4438 67.7492C52.4438 67.1564 52.9049 66.6954 53.4977 66.6954H70.1948C70.7876 66.6954 71.2486 67.1564 71.2486 67.7492C71.2486 68.3091 70.7546 68.8031 70.1948 68.8031Z" fill="#E6E6E6"/>
 21 | <path d="M170.805 71.8H159.18C159.18 72.4257 159.312 73.0515 159.542 73.5784C158.455 73.2491 157.467 72.7221 156.644 71.9647C154.536 70.0216 151.836 68.9678 148.971 68.9678H145.578C144.953 68.9678 144.426 69.4947 144.426 70.1204C144.426 70.7462 144.953 71.2731 145.578 71.2731H148.971C151.243 71.2731 153.416 72.1294 155.063 73.6443C156.874 75.3239 159.312 76.246 161.913 76.246H163.593H166.162H181.113C178.479 73.4137 174.724 71.8 170.805 71.8Z" fill="#043C40"/>
 22 | <path d="M148.872 80.3625L131.22 61.92L118.508 69.1982L121.471 71.8H111.328C111.328 74.2699 113.337 76.2459 115.774 76.2459H126.51L140.013 88.1347L147.258 110.101H151.638L148.872 80.3625Z" fill="#5D6377"/>
 23 | <path d="M58.2071 129.136H334.944C335.734 129.136 336.36 129.762 336.36 130.553C336.36 131.343 335.734 131.969 334.944 131.969H58.2071C57.4167 131.969 56.791 131.343 56.791 130.553C56.791 129.795 57.4167 129.136 58.2071 129.136Z" fill="#D2D2D2"/>
 24 | <path d="M106.849 96.7961L93.0832 110.562L93.676 110.595L92.1281 129.038L90.9755 128.939L92.3257 113.065L84.2242 127.095L83.2362 126.502L91.5683 112.11L79.3831 124.295C86.9906 131.903 99.3405 131.903 106.948 124.295C114.457 116.721 114.457 104.404 106.849 96.7961Z" fill="#C2C2C2"/>
 25 | <path d="M336.524 96.7961L322.758 110.562L323.351 110.595L321.803 129.038L320.651 128.939L322.001 113.065L313.899 127.095L312.878 126.502L321.21 112.11L309.025 124.295C316.633 131.903 328.983 131.903 336.59 124.295C344.132 116.721 344.132 104.404 336.524 96.7961Z" fill="#C2C2C2"/>
 26 | <path d="M322.758 131.804C311.067 131.804 301.516 122.286 301.516 110.562C301.516 98.871 311.034 89.3204 322.758 89.3204C334.449 89.3204 344 98.838 344 110.562C343.967 122.286 334.449 131.804 322.758 131.804ZM322.758 92.8113C312.977 92.8113 305.007 100.781 305.007 110.562C305.007 120.343 312.977 128.313 322.758 128.313C332.539 128.313 340.509 120.343 340.509 110.562C340.509 100.781 332.539 92.8113 322.758 92.8113Z" fill="#043C40"/>
 27 | <path d="M93.0502 89.3533C81.5895 89.3533 72.2365 98.4758 71.8414 109.805H64.6949C64.2668 109.805 63.9045 110.167 63.9045 110.595C63.9045 111.023 64.2668 111.386 64.6949 111.386H71.8414C71.8743 112.703 72.0719 114.02 72.3353 115.272H57.8119C57.3837 115.272 57.0215 115.634 57.0215 116.062C57.0215 116.49 57.3837 116.852 57.8119 116.852H76.419C75.6945 114.909 75.2993 112.835 75.2993 110.661C75.2993 100.88 83.2691 92.9101 93.0502 92.9101C102.831 92.9101 110.801 100.88 110.801 110.661C110.801 120.442 102.831 128.412 93.0502 128.412C86.6612 128.412 81.0955 125.02 77.9669 119.948H82.8739C83.302 119.948 83.6643 119.586 83.6643 119.158C83.6643 118.73 83.302 118.367 82.8739 118.367H74.7724H73.2904C76.3861 126.238 84.0924 131.837 93.0502 131.837C104.741 131.837 114.292 122.319 114.292 110.595C114.292 98.871 104.774 89.3533 93.0502 89.3533Z" fill="#043C40"/>
 28 | <path d="M252.38 71.8C252.38 72.3598 252.479 72.9197 252.677 73.4137C251.788 73.0844 250.964 72.5904 250.273 71.9317C248.165 69.9887 245.464 68.9348 242.599 68.9348H239.207C238.581 68.9348 238.054 69.4617 238.054 70.0875C238.054 70.7132 238.581 71.2401 239.207 71.2401H242.599C244.872 71.2401 247.045 72.0964 248.692 73.6113C250.503 75.2909 252.94 76.213 255.542 76.213H256.793H259.79H274.314V71.7671H252.38V71.8Z" fill="#043C40"/>
 29 | <path d="M311.1 90.7035L308.037 80.8895H266.838L263.38 71.4048L261.206 72.1952L264.368 80.8895H221.292L218.591 73.4466L216.417 74.237L218.854 80.8895H176.239L173.539 73.4466L171.365 74.237L173.802 80.8895H128.881L126.181 73.4466L124.007 74.237L126.444 80.8895H113.732C110.604 80.8895 107.673 82.5691 106.125 85.3025L103.655 89.6826C100.46 88.0689 96.8705 87.1797 93.1161 87.1797C85.6732 87.1797 78.8561 90.6047 74.3772 96.5656C75.6945 97.5536 77.5388 97.4219 78.7244 96.2692C82.5117 92.4161 87.6163 90.2754 93.1161 90.2754C96.3435 90.2754 99.4063 91.0329 102.14 92.3502L91.1401 111.682H276.191L307.807 87.6408L309.19 92.0538C308.334 92.7125 307.543 93.437 306.753 94.2274C301.549 99.5625 299.277 106.841 300.43 114.218C302.043 113.954 303.262 112.538 303.229 110.891C303.097 105.49 305.139 100.32 308.959 96.368C309.354 95.9399 309.783 95.5447 310.244 95.1824C312.582 101.341 316.468 106.775 321.573 110.957L322.1 111.385L323.582 109.607L323.055 109.179C318.082 105.062 314.327 99.7272 312.187 93.7005C317.028 90.4072 323.055 89.3862 328.752 90.9011C330.333 91.3293 332.012 90.506 332.638 88.991C325.393 85.9941 317.456 86.7187 311.1 90.7035ZM95.0592 109.41L104.083 93.5358C106.816 95.3142 109.122 97.7183 110.768 100.682C111.559 102.131 113.337 102.724 114.852 102.131C113.008 97.356 109.714 93.4699 105.631 90.8353L108.101 86.4881C109.253 84.4792 111.394 83.2277 113.699 83.2277H127.268L136.785 109.41H95.0592ZM129.738 83.2277H171.991L138.86 108.29L129.738 83.2277ZM141.231 109.41L174.889 83.9193L184.143 109.41H141.231ZM177.095 83.2277H217.175L186.185 108.224L177.095 83.2277ZM188.457 109.41L219.941 83.9852L229.195 109.41H188.457ZM222.115 83.2277H262.82L231.204 108.257L222.115 83.2277ZM233.51 109.41L265.521 84.0511L274.742 109.41H233.51ZM276.817 108.29L267.694 83.2277H306.358L307.016 85.3355L276.817 108.29Z" fill="#0078D4"/>
 30 | <path d="M78.1975 114.053C77.3412 114.053 76.6497 113.362 76.6497 112.505V108.619C76.6497 107.763 77.3412 107.071 78.1975 107.071C79.0538 107.071 79.7454 107.763 79.7454 108.619V112.505C79.7454 113.362 79.0538 114.053 78.1975 114.053Z" fill="#DF6C47"/>
 31 | <path d="M330.497 123.241C329.905 122.649 329.905 121.661 330.497 121.068L333.231 118.334C333.824 117.742 334.812 117.742 335.404 118.334C335.997 118.927 335.997 119.915 335.404 120.508L332.671 123.241C332.078 123.834 331.09 123.834 330.497 123.241Z" fill="#DF6C47"/>
 32 | <path d="M216.911 71.8H205.286C205.286 72.3928 205.418 72.9527 205.615 73.4796C204.627 73.1503 203.771 72.6233 203.014 71.9647C200.906 70.0216 198.205 68.9678 195.34 68.9678H191.948C191.322 68.9678 190.795 69.4947 190.795 70.1204C190.795 70.7462 191.322 71.2731 191.948 71.2731H195.34C197.613 71.2731 199.786 72.1294 201.433 73.6443C203.244 75.3239 205.681 76.246 208.283 76.246H209.699H212.531H227.219C224.552 73.4137 220.83 71.8 216.911 71.8Z" fill="#043C40"/>
 33 | <path d="M111.328 71.8H109.253V79.3417H111.328V71.8Z" fill="#B2B2B2"/>
 34 | <path d="M109.253 73.1503H107.211V79.0123H109.253V73.1503Z" fill="#DF6C47"/>
 35 | <path d="M282.778 111.254C282.843 110.892 282.876 110.529 282.876 110.167C282.876 106.511 279.912 103.547 276.257 103.547C273.787 103.547 271.646 104.898 270.526 106.874L260.218 103.218L259.428 105.392L269.736 109.047C269.67 109.41 269.637 109.772 269.637 110.134C269.637 113.79 272.601 116.754 276.257 116.754C278.727 116.754 280.867 115.403 281.987 113.427L282.778 111.254Z" fill="#C2C2C2"/>
 36 | <path d="M159.18 116.293L154.997 117.84L150.518 118.137L150.024 115.7L154.207 114.152L158.686 113.856L159.18 116.293Z" fill="#939393"/>
 37 | <path d="M138.169 103.547C135.699 103.547 133.558 104.898 132.438 106.874L122.13 103.218L121.34 105.392L131.648 109.047C131.582 109.41 131.549 109.772 131.549 110.134C131.549 113.79 134.513 116.754 138.169 116.754C141.824 116.754 144.788 113.79 144.788 110.134C144.788 106.479 141.824 103.547 138.169 103.547Z" fill="#C2C2C2"/>
 38 | <path d="M140.079 110.167C140.079 111.221 139.222 112.077 138.168 112.077C137.115 112.077 136.258 111.221 136.258 110.167C136.258 109.113 137.115 108.257 138.168 108.257C139.222 108.257 140.079 109.113 140.079 110.167Z" fill="#F3F3F3"/>
 39 | <path d="M206.669 116.293L202.487 117.84L198.008 118.137L197.514 115.7L201.696 114.152L206.142 113.856L206.669 116.293Z" fill="#939393"/>
 40 | <path d="M185.658 103.547C183.188 103.547 181.047 104.898 179.928 106.874L169.62 103.218L168.829 105.392L179.137 109.047C179.071 109.41 179.038 109.772 179.038 110.134C179.038 113.79 182.002 116.754 185.658 116.754C189.313 116.754 192.277 113.79 192.277 110.134C192.277 106.479 189.313 103.547 185.658 103.547Z" fill="#C2C2C2"/>
 41 | <path d="M187.568 110.167C187.568 111.221 186.712 112.077 185.658 112.077C184.604 112.077 183.748 111.221 183.748 110.167C183.748 109.113 184.604 108.257 185.658 108.257C186.712 108.257 187.568 109.113 187.568 110.167Z" fill="#F3F3F3"/>
 42 | <path d="M251.722 116.293L247.506 117.84L243.06 118.137L242.533 115.7L246.716 114.152L251.195 113.856L251.722 116.293Z" fill="#939393"/>
 43 | <path d="M230.677 103.547C228.207 103.547 226.067 104.898 224.947 106.874L214.639 103.218L213.849 105.392L224.157 109.047C224.091 109.41 224.058 109.772 224.058 110.134C224.058 113.79 227.022 116.754 230.677 116.754C234.333 116.754 237.297 113.79 237.297 110.134C237.297 106.479 234.333 103.547 230.677 103.547Z" fill="#C2C2C2"/>
 44 | <path d="M232.588 110.167C232.588 111.221 231.731 112.077 230.677 112.077C229.624 112.077 228.767 111.221 228.767 110.167C228.767 109.113 229.624 108.257 230.677 108.257C231.731 108.257 232.588 109.113 232.588 110.167Z" fill="#F3F3F3"/>
 45 | <path d="M278.167 110.167C278.167 111.221 277.311 112.077 276.257 112.077C275.203 112.077 274.347 111.221 274.347 110.167C274.347 109.113 275.203 108.257 276.257 108.257C277.311 108.257 278.167 109.113 278.167 110.167Z" fill="#F3F3F3"/>
 46 | <path d="M95.9812 110.562C95.9812 112.176 94.6639 113.493 93.0502 113.493C91.4365 113.493 90.1191 112.176 90.1191 110.562C90.1191 108.948 91.4365 107.631 93.0502 107.631C94.6639 107.631 95.9812 108.948 95.9812 110.562Z" fill="#B2B2B2"/>
 47 | <path d="M325.689 110.562C325.689 112.176 324.372 113.493 322.758 113.493C321.144 113.493 319.827 112.176 319.827 110.562C319.827 108.948 321.144 107.631 322.758 107.631C324.372 107.631 325.689 108.948 325.689 110.562Z" fill="#043C40"/>
 48 | <path d="M297.268 116.293L293.085 117.84L288.607 118.137L288.113 115.7L292.295 114.152L296.741 113.856L297.268 116.293Z" fill="#939393"/>
 49 | <path d="M153.186 67.0247L147.752 64.3901L144.755 62.3482L141.231 64.7852L145.381 68.5396C146.006 69.0995 146.764 69.4288 147.587 69.5605L150.189 69.9228L149.366 70.8449C148.938 71.3389 149.003 72.0964 149.497 72.5245L149.53 72.5574L150.354 72.0634L150.222 72.3269C149.958 72.8209 150.09 73.4137 150.584 73.7101L150.749 73.8089L151.506 72.7221C151.506 73.1502 151.737 73.5454 152.132 73.743L154.24 71.5036L154.371 68.9677C154.339 68.1444 153.91 67.387 153.186 67.0247Z" fill="#DB9C94"/>
 50 | <path d="M247.967 22.3016L246.683 20.2927C246.485 19.9963 246.353 19.634 246.353 19.2718C246.222 17.1311 245.003 9.26013 234.992 9.6224C230.282 9.78706 226.495 13.9366 226.001 18.6131C225.671 21.6759 226.692 24.5081 228.537 26.5829L225.507 30.008L231.599 34.2563L233.641 32.0827C234.893 30.7654 236.605 30.008 238.417 30.008H239.866H242.336C243.818 30.008 245.069 28.9541 245.333 27.538C245.53 26.4841 245.761 25.1997 245.958 23.9153L246.88 24.0471C247.901 24.2447 248.56 23.1249 247.967 22.3016Z" fill="#72594B"/>
 51 | <path d="M244.213 19.8646C244.213 20.3586 243.818 20.7538 243.324 20.7538C242.83 20.7538 242.435 20.3586 242.435 19.8646C242.435 19.3706 242.83 18.9754 243.324 18.9754C243.818 18.9425 244.213 19.3706 244.213 19.8646Z" fill="black"/>
 52 | <path d="M245.86 24.9363L242.336 24.4094C242.336 24.4094 242.797 26.55 245.497 27.0111C245.629 26.3524 245.86 24.9363 245.86 24.9363Z" fill="#4F3E33"/>
 53 | <path d="M240.162 18.4484C240.096 18.4484 239.997 18.4155 239.932 18.3826C239.767 18.2508 239.701 18.0203 239.833 17.8227C239.833 17.7898 241.479 15.4845 244.378 16.9335C244.575 17.0323 244.641 17.2628 244.542 17.4604C244.443 17.658 244.213 17.7239 244.015 17.6251C241.71 16.4725 240.491 18.185 240.459 18.2508C240.426 18.3826 240.294 18.4484 240.162 18.4484Z" fill="black"/>
 54 | <path d="M124.732 19.6341L124.073 19.0413C123.448 18.5144 123.052 17.7898 122.855 16.9994C121.702 12.4217 117.454 9.06258 112.448 9.26018C107.409 9.45777 103.194 13.3768 102.634 18.3826C102.173 22.4663 104.116 26.1548 107.244 28.1967L108.99 31.5558C109.55 32.6097 109.583 33.8941 109.122 34.9809L108.167 37.2862L118.508 36.5617L116.63 32.478C116.136 31.4241 116.729 30.2056 117.849 29.9421C117.849 29.9421 119.463 29.5799 119.627 29.5469C121.669 29.4481 123.283 27.7356 123.25 25.6608C123.25 24.7058 123.217 23.6848 123.217 22.6969C123.217 22.2687 123.546 21.9065 123.974 21.9065C125.127 21.9065 125.621 20.4245 124.732 19.6341Z" fill="#DB9C94"/>
 55 | <path d="M199.193 25.9243L198.337 25.0351C198.008 24.7058 197.876 24.2777 197.876 23.8166C197.876 23.6849 197.876 23.5861 197.876 23.4873C197.876 17.5593 192.903 12.784 186.909 13.1134C181.673 13.3768 177.359 17.6911 177.095 22.9274C176.931 25.8584 178.017 28.559 179.829 30.5349L174.362 34.8821L182.529 38.6035L185.361 36.1994C187.074 34.7174 189.313 33.96 191.586 34.0588L192.936 34.1246L192.804 34.0588C193.134 34.0917 193.43 34.0917 193.759 34.0917C195.406 34.1905 196.855 32.972 197.086 31.3253C197.217 30.3703 197.349 29.2835 197.481 28.1967H198.205C199.424 28.1967 200.017 26.7806 199.193 25.9243Z" fill="#D8B094"/>
 56 | <path d="M226.297 25.6608L227.714 26.2536C230.809 27.5709 233.378 29.8763 235.058 32.7744L233.411 34.8821L232.785 39.9538L233.839 44.0045C234.333 45.8817 233.773 47.8577 232.39 49.208L231.073 50.5253L224.782 28.2955L226.297 25.6608Z" fill="#D2D2D2"/>
 57 | <path d="M307.181 83.2278C306.654 83.2278 306.193 82.8655 306.061 82.3715L304.744 77.201C304.283 75.4226 304.678 73.5784 305.798 72.1293C306.917 70.6803 308.63 69.8569 310.441 69.8569H315.875C318.674 69.8569 320.98 72.1293 320.98 74.9616C320.98 77.7609 318.707 80.0662 315.875 80.0662H314.821C314.196 80.0662 313.669 79.5392 313.669 78.9135C313.669 78.2878 314.196 77.7609 314.821 77.7609H315.875C317.39 77.7609 318.642 76.5094 318.642 74.9945C318.642 73.4796 317.39 72.2281 315.875 72.2281H310.441C309.321 72.2281 308.301 72.7221 307.642 73.6113C306.95 74.5005 306.72 75.6202 307.016 76.6741L308.333 81.8116C308.498 82.4374 308.136 83.0631 307.51 83.2278C307.378 83.1948 307.28 83.2278 307.181 83.2278Z" fill="#043C40"/>
 58 | <path d="M311.89 77.7938C310.244 77.9585 308.959 79.3087 308.959 80.9883C308.959 82.6679 310.244 84.0511 311.89 84.1828V77.7938Z" fill="#B2B2B2"/>
 59 | <path d="M312.845 35.3432C313.01 32.3133 309.321 26.8794 303.328 26.5171C298.585 26.2207 294.337 29.1517 292.954 33.6965C292.394 35.5408 292.394 37.385 292.822 39.0975L286.828 40.349L290.154 47.7589L295.292 46.6721C296.972 46.3099 298.717 46.2769 300.397 46.6063L303.064 47.1002L306.061 47.726C307.806 48.0882 309.519 47.1332 310.145 45.4865L311.166 42.8519C311.297 42.5555 311.627 42.3579 311.923 42.4238L313.01 42.6543C313.537 42.7531 314.031 42.3579 314.031 41.798C314.064 41.4687 312.648 38.8341 312.845 35.3432Z" fill="#CE9C5F"/>
 60 | <path d="M309.947 37.6814C310.276 37.6814 310.606 37.879 310.77 38.1425C310.968 37.9778 311.1 37.7143 311.1 37.4179C311.1 36.891 310.672 36.4629 310.145 36.4629C309.618 36.4629 309.19 36.891 309.19 37.4179C309.19 37.6155 309.256 37.7802 309.354 37.9449C309.519 37.7473 309.717 37.6814 309.947 37.6814Z" fill="black"/>
 61 | <path d="M308.136 35.4419C307.971 35.4419 307.807 35.3431 307.774 35.1785C307.708 34.9809 307.84 34.7503 308.037 34.6845C309.355 34.2893 310.705 34.1575 312.055 34.3551C312.286 34.3881 312.417 34.5857 312.384 34.7833C312.351 35.0138 312.154 35.1455 311.956 35.1126C310.738 34.9479 309.486 35.0467 308.301 35.409C308.202 35.4419 308.169 35.4419 308.136 35.4419Z" fill="#72594B"/>
 62 | <path d="M254.323 66.6624C254.323 70.0875 256.365 73.1832 259.494 74.5664L278.068 82.602L262.886 95.0507L267.431 98.9368L288.178 87.1138C291.834 85.0391 292.328 79.9674 289.133 77.201L276.915 66.6954H254.323V66.6624Z" fill="#282C3B"/>
 63 | <path d="M278.068 82.5691L282.975 79.4404C282.975 79.4404 277.87 78.6171 278.068 82.5691Z" fill="black"/>
 64 | <path d="M267.431 98.9039L265.586 100.221L261.569 97.4549L263.973 95.9399L267.431 98.9039Z" fill="#CE9C5F"/>
 65 | <path d="M261.569 97.4548L257.748 99.6284C257.748 99.6284 260.317 108.685 267.002 109.805C267.793 109.936 268.353 109.08 267.958 108.389L264.532 102.329L265.586 100.221L261.569 97.4548Z" fill="#4F3E33"/>
 66 | <path d="M319.037 71.1084L317.16 67.2552C317.028 66.9918 316.764 66.8271 316.435 66.8271H315.711C314.393 66.8271 309.98 67.2882 308.498 67.4199C308.169 67.4528 307.872 67.387 307.576 67.2552L305.139 66.0696L302.471 67.9139L303.361 70.1863L307.938 71.0096C308.202 71.0425 308.498 71.0755 308.762 71.0425L311.89 70.6803L313.241 71.6024L312.747 72.5245C312.549 72.8539 312.648 73.282 312.944 73.5125C313.175 73.6772 313.471 73.6443 313.636 73.4137L313.866 73.0515C313.899 73.0515 313.899 73.0515 313.932 73.0515L315.579 72.6892C315.546 72.788 315.513 72.9197 315.513 73.0185C315.48 73.3808 315.842 73.6442 316.172 73.4796L318.74 72.0964C319.07 71.8329 319.201 71.4377 319.037 71.1084ZM314.69 70.2851L314.854 71.0425C314.821 70.9437 314.755 70.8779 314.69 70.812L314.097 70.3509L314.69 70.2851ZM314.92 71.306C314.92 71.2731 314.92 71.2731 314.92 71.2401V71.306ZM316.501 71.306L316.303 70.0875H316.435L316.929 71.0755C316.764 71.1413 316.633 71.2401 316.501 71.306Z" fill="#CE9C5F"/>
 67 | <path d="M303.921 26.0231C303.657 25.9572 303.394 25.9243 303.097 25.8913C303.097 25.8913 303.064 25.8913 303.031 25.8913C302.834 25.8584 302.636 25.8584 302.439 25.8255C301.78 25.7596 300.66 25.6937 299.376 25.6608C291.472 25.4303 278.529 27.9003 276.817 21.2148C275.104 24.4093 275.269 28.0649 281.559 29.1188C276.29 31.8851 273.655 36.7922 278.2 40.9417C280.044 36.6275 283.37 35.8371 285.873 37.6484C288.343 39.4268 289.134 39.6903 293.184 40.1843C296.478 40.5795 297.96 38.6364 298.585 36.4958L298.882 34.9809C299.079 34.0258 300.001 33.4001 300.957 33.5977C302.076 33.8282 302.801 34.915 302.57 36.0676L303.492 35.8042C304.151 35.6395 304.645 35.1126 304.744 34.4539L305.402 31.1606C305.567 30.3702 306.325 29.8433 307.148 30.008L308.235 30.2385C308.762 30.3373 309.322 30.2385 309.75 29.9421L310.507 29.4481C310.507 29.4152 308.663 26.9781 303.921 26.0231Z" fill="#72594B"/>
 68 | <path d="M301.417 37.5826L300.891 37.4838C300.001 37.2862 299.409 36.4299 299.606 35.5407C299.738 34.9479 300.298 34.5856 300.891 34.6844C301.483 34.8162 301.846 35.376 301.747 35.9688L301.417 37.5826Z" fill="#BA8C57"/>
 69 | <path d="M208.283 66.6625C208.283 70.0875 210.325 73.1832 213.453 74.5664L232.028 82.6021L215.528 93.8981L221.39 98.9369L242.138 87.1139C245.794 85.0391 246.288 79.9674 243.093 77.2011L226.725 63.3033L208.25 62.8093V66.6625H208.283Z" fill="#B2B2B2"/>
 70 | <path d="M209.172 70.4497C209.172 70.4497 221.95 72.6892 227.911 64.0278C223.004 62.4799 208.316 64.0278 208.316 64.0278C208.316 64.0278 207.525 68.1773 209.172 70.4497Z" fill="#939393"/>
 71 | <path d="M232.028 82.5691L236.935 79.4404C236.935 79.4404 231.83 78.6171 232.028 82.5691Z" fill="#939393"/>
 72 | <path d="M221.39 98.9039L219.546 100.221L215.528 97.4549L217.932 95.9399L221.39 98.9039Z" fill="#EB4F5D"/>
 73 | <path d="M215.528 97.4548L211.708 99.6284C211.708 99.6284 214.277 108.685 220.962 109.805C221.753 109.936 222.312 109.08 221.917 108.389L218.492 102.329L219.546 100.221L215.528 97.4548Z" fill="#737373"/>
 74 | <path d="M163.758 66.6624C163.758 70.0875 165.799 73.1832 168.928 74.5664L187.502 82.602L172.32 95.0507L176.865 98.9368L197.613 87.1138C201.268 85.0391 201.762 79.9674 198.568 77.201L186.35 66.6954H163.758V66.6624Z" fill="#282C3B"/>
 75 | <path d="M187.502 82.5691L192.409 79.4404C192.442 79.4404 187.338 78.6171 187.502 82.5691Z" fill="#043C40"/>
 76 | <path d="M176.865 98.9039L175.053 100.221L171.003 97.4549L173.407 95.9399L176.865 98.9039Z" fill="white"/>
 77 | <path d="M172.946 95.5776L167.183 99.6284C167.183 99.6284 169.784 108.817 176.601 109.805C177.326 109.904 177.919 109.179 177.622 108.487C176.964 106.94 176.107 104.733 175.613 103.35C175.317 102.559 175.383 101.67 175.778 100.946L176.865 98.9368L172.946 95.5776Z" fill="black"/>
 78 | <path d="M115.972 66.6624C115.972 70.0875 118.014 73.1832 121.142 74.5664L139.716 82.602L124.534 95.0507L129.079 98.9368L149.827 87.1139C153.482 85.0391 153.976 79.9674 150.782 77.201L132.965 63.9619L115.972 66.6624Z" fill="#282C3B"/>
 79 | <path d="M139.716 82.5691L144.623 79.4404C144.656 79.4404 139.552 78.6171 139.716 82.5691Z" fill="#043C40"/>
 80 | <path d="M129.079 98.9039L127.268 100.221L123.217 97.4549L125.621 95.9399L129.079 98.9039Z" fill="#BB9167"/>
 81 | <path d="M123.217 97.4548L119.397 99.6284C119.397 99.6284 121.965 108.685 128.651 109.805C129.441 109.936 130.001 109.08 129.606 108.389L126.181 102.329L127.235 100.221L123.217 97.4548Z" fill="#4F3E33"/>
 82 | <path d="M261.206 108.718L258.242 105.359L256.365 101.308L258.44 99.9578L261.404 103.284L263.281 107.335L261.206 108.718Z" fill="#939393"/>
 83 | <path d="M123.151 108.718L120.154 105.359L118.277 101.308L120.352 99.9578L123.316 103.284L125.193 107.335L123.151 108.718Z" fill="#939393"/>
 84 | <path d="M170.608 108.718L167.644 105.359L165.766 101.308L167.841 99.9578L170.805 103.284L172.682 107.335L170.608 108.718Z" fill="#939393"/>
 85 | <path d="M215.66 108.718L212.696 105.359L210.786 101.308L212.861 99.9578L215.825 103.284L217.735 107.335L215.66 108.718Z" fill="#939393"/>
 86 | <path d="M310.968 43.5764L308.399 41.8638C308.399 41.8638 307.938 44.3667 310.342 45.0254C310.606 44.5973 310.902 43.8069 310.968 43.5764Z" fill="#8C6943"/>
 87 | <path d="M231.863 33.6965C230.414 29.1846 225.079 27.3075 221.094 29.8104C217.603 32.0169 213.486 35.8042 210.819 42.3249C207.229 51.0851 207.558 58.9561 205.78 65.7733C213.717 67.6504 228.438 64.9829 229.393 63.0398C229.624 58.9232 231.797 45.3548 232.62 40.9747C232.917 39.328 232.884 37.6484 232.489 36.0347C232.324 35.3102 232.126 34.5198 231.863 33.6965Z" fill="#B2B2B2"/>
 88 | <path d="M251.326 72.0964L250.108 69.4289V68.9349C250.108 68.3421 249.779 67.7822 249.285 67.4529L243.126 63.7644L241.809 62.48L238.614 65.0817L240.524 67.7163C241.315 68.8031 242.5 69.4618 243.818 69.5935L245.827 69.7582L244.476 71.4378C244.18 71.833 244.18 72.3928 244.542 72.7551L244.773 72.9856L247.638 71.339L246.749 72.3599C246.419 72.7222 246.354 73.2491 246.551 73.7101L246.716 74.0395L249.087 73.0515L248.758 73.5126C248.395 74.0066 248.494 74.6652 248.955 75.0604L249.219 75.258L251.228 73.0515C251.392 72.788 251.458 72.4258 251.326 72.0964Z" fill="#72594B"/>
 89 | <path d="M201.63 68.8031L201.565 68.1444C201.532 67.6504 201.202 67.1894 200.741 66.9918L194.682 64.1595L193.265 63.0398L190.236 64.5547L193.364 67.9139C194.22 68.836 195.406 69.33 196.658 69.2641L197.744 69.1983L198.008 70.7132L197.283 71.1413C196.789 71.4707 196.526 72.0634 196.625 72.6562L196.658 72.8538L199.358 71.7341L199.852 69.6923L200.116 71.3719L199.226 72.1952C198.831 72.5904 198.732 73.1832 199.029 73.6772L199.16 73.9077L201.103 72.5574L201.235 73.4137C201.334 74.0065 201.894 74.4346 202.52 74.3029L202.717 74.27V69.5605L201.63 68.8031Z" fill="#D8B094"/>
 90 | <path d="M194.649 24.9363C194.649 25.3974 195.011 25.7596 195.472 25.7596C195.933 25.7596 196.295 25.3974 196.295 24.9363C196.295 24.4752 195.933 24.113 195.472 24.113C195.011 24.113 194.649 24.4752 194.649 24.9363Z" fill="black"/>
 91 | <path d="M197.316 28.1307L196.658 28.0649C195.702 27.999 194.747 28.4601 194.286 29.3163L193.957 29.8762L198.107 30.2384L198.172 29.0858C198.205 28.6247 197.843 28.1966 197.316 28.1307Z" fill="#CE9C5F"/>
 92 | <path d="M190.104 17.4276L193.957 14.5295L190.367 12.8499C187.502 11.4996 184.11 11.829 181.541 13.7391C177.293 16.8677 175.613 22.5322 177.721 27.3734C178.281 28.6907 179.006 29.8433 179.862 30.5349C182.76 30.0409 184.604 28.0979 185.46 26.9452C184.67 26.4842 184.11 25.6938 183.978 24.7387L183.913 24.2447C183.781 23.3555 184.407 22.5322 185.296 22.4005C186.218 22.2687 187.074 22.9274 187.173 23.8495L187.403 25.9572L189.412 25.7596L188.984 21.9723L191.619 19.6012L190.104 17.4276Z" fill="#1AA939"/>
 93 | <path d="M193.233 23.7506C193.134 23.7506 193.035 23.7177 192.936 23.6189C192.772 23.4542 192.804 23.2237 192.936 23.059C193.628 22.4004 195.274 21.4124 196.756 22.4333C196.921 22.565 196.987 22.7956 196.855 22.9932C196.723 23.1578 196.493 23.2237 196.295 23.092C194.978 22.2028 193.496 23.6189 193.463 23.6518C193.43 23.7177 193.331 23.7506 193.233 23.7506Z" fill="#CE9C5F"/>
 94 | <path d="M146.468 61.5907L130.1 50.9863L129.145 49.8336C126.049 43.1153 122.789 38.7352 119.133 35.3101C119.166 34.5527 119.199 33.433 119.199 31.8851C112.448 30.0409 107.475 31.2264 107.475 31.2264L107.541 34.7173C105.993 36.4299 105.367 38.8669 106.059 41.2052C107.771 47.1002 109.945 55.7945 109.122 60.2734C107.804 67.4857 104.544 70.3509 104.544 70.3509C104.544 70.3509 122.756 77.8267 134.381 64.0607C134.25 63.6655 134.151 63.3032 134.019 62.941L141.561 67.7163L146.468 61.5907Z" fill="#0078D4"/>
 95 | <path d="M195.307 63.3033L183.748 52.5671L183.616 51.8755C184.176 47.4625 185.427 43.9387 185.658 43.2471C186.646 40.5466 183.484 34.2234 180.685 33.433C175.811 32.0498 170.607 34.1246 168.072 38.4718C163.856 45.6841 161.189 53.6868 160.234 61.953L159.213 70.845C159.213 70.845 173.967 74.8957 186.382 66.6295C185.46 65.3781 184.802 63.9949 184.341 62.5458L192.442 67.3211L195.307 63.3033Z" fill="#0078D4"/>
 96 | <path d="M180.059 60.0758C177.952 58.8244 176.437 56.7825 175.844 54.3784L174.494 48.6481L173.539 50.9534C172.123 54.3455 173.539 58.2645 176.832 59.9441L184.868 64.0937L184.44 62.6775L180.059 60.0758Z" fill="#022E32"/>
 97 | <path d="M183.221 53.094L178.479 52.1061C178.479 52.1061 181.508 49.6031 183.221 53.094Z" fill="#022E32"/>
 98 | <path d="M125.522 57.54L114.259 44.9925L115.478 48.0553C118.672 56.1239 125.621 62.0847 134.085 63.9949L134.414 64.0937L133.887 62.8751L125.522 57.54Z" fill="#022E32"/>
 99 | <path d="M119.429 18.6461C119.429 19.1071 119.825 19.5023 120.286 19.5023C120.747 19.5023 121.142 19.1071 121.142 18.6461C121.142 18.185 120.747 17.7898 120.286 17.7898C119.792 17.7898 119.429 18.185 119.429 18.6461Z" fill="black"/>
100 | <path d="M119.229 31.4594V31.4594C117.851 30.9332 116.574 30.1255 115.155 29.7202C113.27 29.1813 111.145 29.4291 109.447 30.4635C107.28 31.8142 89.2519 30.8384 61.3225 26.3524C56.7462 25.6173 52.3114 24.1536 48.1643 22.0839V22.0839L44.0081 23.2375L45.7028 27.0036V27.0036C51.7437 28.6064 57.9376 29.6627 64.163 30.2147C98.2017 33.2326 106.484 35.1953 108.155 34.1957L110.375 32.8725C112.352 31.7189 114.894 31.5832 116.992 32.5671L119.229 33.7895V31.4594Z" fill="#DF6C47"/>
101 | <path d="M121.142 24.0471L120.385 24.8374L123.184 25.0021L122.92 24.3764C122.624 23.6848 121.702 23.4872 121.142 24.0471Z" fill="#F3F3F3"/>
102 | <path d="M114.292 18.5473C114.226 17.5593 113.732 16.6701 112.975 16.0773L111.624 15.0564L112.184 14.2989C113.139 12.9816 112.909 11.1044 111.624 10.0835L110.834 9.45774C110.834 9.45774 108.693 7.74522 106.651 8.14042C105.104 8.46975 103.424 8.43681 102.206 8.33801C102.206 7.15242 101.646 4.81418 97.5291 5.01178C99.2745 6.3291 99.8344 6.79016 100.493 8.14042C100.493 8.14042 101.02 10.3799 103.885 10.5775C101.975 12.5534 98.7805 24.574 107.343 28.3942C110.241 26.6159 111.295 23.5202 111.591 22.4663C110.274 22.4663 109.187 21.4783 109.121 20.161L109.089 19.2389C109.056 18.3497 109.714 17.5922 110.603 17.5593C111.493 17.4934 112.25 18.185 112.316 19.0742L112.481 22.0382L114.523 21.9064L114.292 18.5473Z" fill="#D2D2D2"/>
103 | <path d="M117.915 17.5923C117.882 17.5923 117.882 17.5923 117.849 17.5923C117.684 17.5593 117.552 17.3947 117.585 17.1971C117.585 17.1641 117.816 16.2091 118.639 15.6821C119.166 15.3528 119.825 15.254 120.615 15.4187C120.78 15.4516 120.912 15.6163 120.879 15.8139C120.846 15.9785 120.648 16.1103 120.484 16.0773C119.891 15.9456 119.397 16.0115 119.002 16.242C118.409 16.6043 118.244 17.3288 118.244 17.3288C118.211 17.4605 118.079 17.5923 117.915 17.5923Z" fill="#D2D2D2"/>
104 | <path d="M186.942 36.7263C182.892 31.7863 177.655 30.2714 177.655 30.2714L174.395 34.882L184.9 39.7561L186.942 36.7263Z" fill="#043C40"/>
105 | <path d="M185.658 38.6035C185.658 38.6035 186.646 40.0526 186.646 41.6663C183.188 45.6512 174.033 41.6663 170.41 46.9026H166.03L166.787 42.2262C166.787 42.2262 171.431 39.6903 177.095 40.7771C186.942 42.6872 185.23 39.1963 185.23 39.1963L185.658 38.6035Z" fill="#46CF23"/>
106 | <path d="M185.263 39.1963C185.263 39.1963 182.398 35.9359 179.763 34.9808C182.957 35.5407 185.658 38.5705 185.658 38.5705L185.263 39.1963Z" fill="#022E32"/>
107 | <path d="M241.512 10.6104C240.195 6.59255 234.3 6.65842 233.18 9.55652C229.722 7.11948 223.202 11.8289 226.034 16.3407C225.112 16.7689 224.552 17.4275 224.255 18.1191C223.63 17.7239 222.806 17.4934 221.884 17.4934C219.941 17.4934 218.393 18.5472 218.393 19.8316C218.393 20.8526 219.414 21.7417 220.797 22.0381C219.842 22.8615 219.381 23.9812 220.106 24.9363C220.995 26.0889 222.214 25.9901 223.202 25.562C223.333 25.8913 223.531 26.1877 223.827 26.4841C225.342 27.9332 229.492 27.538 229.986 25.1668C231.995 25.2985 234.168 24.08 234.86 22.1369C233.674 21.9723 232.752 20.8855 232.884 19.667L232.983 18.4155C233.081 17.4604 233.872 16.7689 234.827 16.8347C235.815 16.9006 236.539 17.7898 236.408 18.7448V18.8436C237.527 18.5802 238.878 17.8227 239.602 15.6821C242.039 16.4725 244.542 15.2869 244.937 13.5085C245.267 11.763 243.093 10.0176 241.512 10.6104Z" fill="black"/>
108 | <path d="M294.073 60.01L295.127 46.705C295.292 44.8278 294.765 42.9177 293.579 41.3369C291.735 38.8999 288.672 37.8131 285.708 38.4059C272.996 40.9418 255.18 56.0909 254.323 66.6624C262.293 71.8 276.718 77.7938 276.718 77.7938L280.637 68.342C281.262 66.7942 282.119 65.3451 283.14 64.0278L286.466 59.7794V60.6357C286.499 63.0398 287.717 65.2793 289.726 66.5966L300.034 73.4796C302.471 72.0964 304.25 69.7582 304.875 67.0577L305.106 66.0038L294.073 60.01Z" fill="#0078D4"/>
109 | <path d="M286.499 59.3843L286.268 46.5404C286.268 46.5404 281.888 54.0821 284.358 62.5129C284.753 61.9201 286.499 59.3843 286.499 59.3843Z" fill="#043C40"/>
110 | <path d="M221.39 39.4268V52.5012C221.39 55.1359 222.806 57.5729 225.079 58.8573L239.8 67.354L242.533 62.447L229.986 52.2707L230.48 39.5915C230.579 36.9239 228.405 34.7503 225.738 34.8491C223.3 34.9809 221.39 36.9898 221.39 39.4268Z" fill="#B2B2B2"/>
111 | <path d="M229.986 52.3036L230.48 39.6244C230.513 38.9986 230.414 38.4058 230.183 37.846C231.106 38.307 231.962 38.9657 232.653 39.822L232.752 39.9537C232.884 38.6364 232.785 37.319 232.489 36.0347C232.225 34.9808 231.896 33.6964 231.402 32.445C230.019 28.8223 225.737 27.2086 222.345 29.0858C218.624 31.1276 213.783 35.0137 210.786 42.3578C207.69 49.8665 207.493 56.7166 206.406 62.8092C209.995 59.6147 212.696 55.531 214.211 50.9204C215.627 46.6062 218.097 42.7201 221.39 39.6244V52.5341C221.39 55.1688 222.806 57.6058 225.079 58.8902L239.8 67.3869L242.533 62.4799L229.986 52.3036Z" fill="#C2C2C2"/>
112 | <path d="M229.195 52.5671L224.75 51.9085C224.75 51.9085 227.878 49.669 229.195 52.5671Z" fill="#B2B2B2"/>
113 | <path d="M239.8 64.917C239.8 64.423 239.405 64.0608 238.944 64.0608C238.483 64.0608 238.087 64.456 238.087 64.917C238.087 65.3781 238.483 65.7733 238.944 65.7733C239.405 65.7733 239.8 65.3781 239.8 64.917Z" fill="#D2D2D2"/>
114 | <path d="M246.353 18.0204L244.048 17.724C244.015 17.724 243.982 17.724 243.949 17.724L242.632 17.5593C242.599 17.5593 242.533 17.5593 242.5 17.5593L235.749 17.3288L236.177 17.8887L241.348 18.0533C241.15 18.2509 241.018 18.5144 240.985 18.8437L240.755 20.4904C240.656 21.2808 241.216 22.0382 242.006 22.137L243.818 22.4005C243.883 22.4005 243.916 22.4005 243.982 22.4005C244.246 22.4005 244.509 22.3017 244.74 22.137C245.003 21.9394 245.168 21.643 245.234 21.3137L245.53 19.2389C245.563 18.9754 245.497 18.6791 245.365 18.4485L246.255 18.5473H246.288C246.419 18.5473 246.518 18.4485 246.551 18.3168C246.617 18.1521 246.518 18.0204 246.353 18.0204ZM244.74 21.2149C244.707 21.4125 244.608 21.5772 244.476 21.676C244.312 21.8077 244.147 21.8406 243.949 21.8077L242.138 21.5442C241.611 21.4784 241.282 21.0173 241.348 20.4904L241.578 18.8437C241.644 18.3827 242.039 18.0204 242.5 18.0204C242.533 18.0204 242.599 18.0204 242.632 18.0204L244.443 18.2839C244.641 18.3168 244.806 18.4156 244.904 18.5473C245.036 18.712 245.069 18.8767 245.036 19.0742L244.74 21.2149Z" fill="black"/>
115 | </svg>
116 | 


--------------------------------------------------------------------------------