\n {contents}\n {callwindow}\n
\n );\n }\n\n async populateMatchData() {\n const response = await fetch('api/matchresult/' + this.props.match.params.id);\n const data = await response.json();\n let hashedData = {};\n data.forEach(element => {\n hashedData[element.pairId] = element;\n });\n console.log(data);\n console.log(hashedData);\n this.setState({ matches: data, hashedMatches: hashedData, loading: false });\n }\n}\n","import React, { Component } from 'react';\nimport ReactBootstrapSlider from 'react-bootstrap-slider';\n\nexport class SliderQuestion extends Component {\n static displayName = SliderQuestion.name;\n\n constructor(props) {\n super(props);\n this.state = {\n ...this.props,\n currentValue: props.question.response || this.props.default || 0\n };\n this.handleChange = this.handleChange.bind(this);\n \n //Workaround\n if (this.state.currentValue == 0) {\n this.state.onValueChange(this.props.question.questionText, this.state.currentValue);\n }\n }\n\n handleChange(event) {\n this.setState({currentValue: event.target.value}, () => {\n this.state.onValueChange(this.props.question.questionText, this.state.currentValue);\n });\n //this.forceUpdate();\n }\n\n render() {\n\n if (this.props.mode == \"view\") {\n return (\n \n {this.props.question.questionText}\n
\n );\n }\n else {\n \n return (\n\n {this.state.showText?\n \n :null}\n \n
\n \n )\n }\n }\n\n\n}","import React, { Component } from 'react';\nimport { faTrashAlt } from \"@fortawesome/free-regular-svg-icons\";\nimport { faPlus } from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\nexport class SuggestionQuestion extends Component {\n static displayName = SuggestionQuestion.name;\n\n constructor(props) {\n super(props);\n this.state = {\n ...this.props,\n currentValue: props.question.response || \"\"\n };\n this.handleChange = this.handleChange.bind(this);\n this.handleNewSuggestion = this.handleNewSuggestion.bind(this);\n this.handleDelete = this.handleDelete.bind(this);\n \n //Workaround\n if (this.state.currentValue == 0) {\n this.state.onValueChange(this.props.question.questionText, this.state.currentValue);\n }\n }\n\n handleChange(event) {\n this.setState({currentValue: event.target.value}, () => {\n this.state.onValueChange(this.props.question.questionText, this.state.currentValue);\n });\n \n //this.forceUpdate();\n }\n\n handleDelete(event) {\n // This is a bit of a workaround currently as the array in which these elements is presented is causing a React state leak.\n this.state.onDelete(this.state.question.questionText);\n // this.setState({currentValue: \"DELETED\"}, () => {\n // this.state.onValueChange(this.props.question.questionText, this.state.currentValue);\n // });\n }\n\n handleNewSuggestion(event) {\n this.state.handleNewSuggestion(event);\n }\n\n render() {\n if (this.state.currentValue == \"DELETED\") {\n return null;\n }\n if (this.state.mode == \"view\") {\n return (\n \n Suggestion: {this.state.question.response}\n
\n )\n }\n return (\n \n
\n \n )\n }\n\n\n}","import React, { useState, useEffect, useRef } from 'react';\nimport { Modal } from 'reactstrap';\n\nfunction ProfileEditModal(props) {\n\n const [myProfile, _setMyProfile] = useState(props.myProfile);\n const myProfileRef = useRef(props.myProfile);\n\n const handleNicknameChange = (e) => {\n let newProfile = {...myProfileRef.current, nickname: e.currentTarget.value}\n myProfileRef.current = newProfile;\n _setMyProfile(newProfile);\n }\n\n const handleSummaryChange = (e) => {\n let newProfile = {...myProfileRef.current, summary: e.currentTarget.value}\n myProfileRef.current = newProfile;\n _setMyProfile(newProfile);\n }\n\n const handleWantsToTalkChange = (e) => {\n let newProfile = {...myProfileRef.current, wantsToTalk: e.currentTarget.value}\n myProfileRef.current = newProfile;\n _setMyProfile(newProfile);\n }\n\n const handleSaveProfile = (e) => {\n console.log(myProfile);\n props.onClose(myProfile);\n }\n\n const handleAutoSave = (e) => {\n if (props.autosave) handleSaveProfile(e);\n }\n\n const form = <>\n \n
\n \n {this.state.currentValue.length == this.state.maxLength?\n Maximum text length reached\n : null}\n \n Suggestion\n
\n\n \n {this.state.currentValue.length?\n \n \n \n
\n \n \n
\n \n \n
\n ;\n\n const fullContents = <>\n \n
\n Edit Profile
\n {!props.inline && }\n\n {form}\n
\n {!(props.autosave && props.inline) && }\n ;\n\n if (myProfile) {\n if (props.inline){\n return {fullContents}
;\n } else {\n return {if (props.clickable) setProfileEditModalVisible(true)}}>\n 
{e.target.onError=null; e.target.src = process.env.PUBLIC_URL + '/guest.png'}} />\n {props.myProfile.nickname || props.myProfile.username}\n {props.myProfile.summary ? props.myProfile.summary : Enter your role}\n
\n \n {profileEditModalVisible &&\n \n
\n );\n }\n\n renderQuestions(parentQuestion) {\n let elements = [];\n if (parentQuestion == \"Suggestion_1BE117\") console.log(\"RENDERING Suggestion_1BE117\");\n // Find each question at this level (or all root question if this is the top level)\n this.state.response.questionResponses.filter(qr => (qr.parent == parentQuestion)).map(qr => {\n let childElements = this.renderQuestions(qr.questionText);\n if (qr.type == 'slider') {\n // Create the slider for this question\n elements.push(\n this.setState({myProfile})}\n />\n }\n
\n \n
\n {this.state?.myProfile &&\n Water Climate Discussion interests
\n\n
\n \n {this.state?.myProfile &&\n
\n \n
\n \n Please use the sliders below to show your interest in discussing the\n listed topics. This information will be used to match you to similar\n participants during the conference networking.\n
\n\n Turning up some of the sliders may reveal additional sub-categories.\n If something isn't listed which you think should be, use the '+'\n button after increasing a slider, and add a suggested sub-category.\n You can add as many of these as you'd like, including adding\n suggestions under those which you have already created.\n
\n\n When you are finished, press Submit, and your inputs and suggestions\n will be stored.\n
\n\n {this.renderQuestions(null)}\n \n
\n \n \n {qr.response > 8 ? \n \n
);\n \n } else if (qr.type == 'suggestion') {\n elements.push(\n
)\n } else if (qr.type == 'deleted') {\n elements.push(null);\n }\n // Run this algorithm recursively to get the sliders for sub-categories\n let childSuggestions = this.state.response.questionResponses.filter(r => (r.parent == qr.questionText && r.type == 'suggestion' && r.response != \"DELETED\"))\n if (childElements && (qr.type != \"slider\" || qr.response > 8 || childSuggestions.length)) {\n elements.push(childElements);\n }\n else {\n elements.push(null);\n }\n });\n if (this.state.creatingNew && this.state.creatingNew == parentQuestion) {\n elements.push();\n }\n\n // Create a suggestion button for the root node\n // if (!parentQuestion) {\n // elements.push(Suggest another topic
)\n // }\n if (elements.filter(e => (e != null)).length) {\n return{elements}
;\n } else { return null; }\n }\n\n async submitSurveyResponse(event){\n event.preventDefault();\n let responseToSubmit = Object.assign({}, this.state.response);\n responseToSubmit.questionResponses = responseToSubmit.questionResponses.filter((qr) => (qr.type != \"deleted\"));\n const requestOptions = {\n method: 'PUT',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(responseToSubmit)\n }\n console.log(responseToSubmit);\n const response = await fetch('/api/surveyresponse/' + this.state.response.id, requestOptions);\n \n this.setState({redirectToResults: true});\n }\n\n render() {\n if (this.state.redirectToResults) {\n // Temporary change to the matcher\n return (\n
);\n // return Your results and suggestions have been saved. You can return to this page at any time to view or update your response.
\n\n
\n : this.renderResponseData(this.state.response);\n\n return (\n Loading Networking Survey. This should only take a moment...
\n {this.state.error?\n{this.state.error}
\n :null}\n\n\n {contents}\n
\n );\n }\n\n async populateResponseData() {\n \n const response = await fetch('api/surveyresponse/' + this.props.match.params.id);\n if (!response.ok) {\n let message = There was an unexpected error. Please refresh, try again later or contact andeye at info@andeye.com for assistance\n if (response.status == 401) {\n message = We couldn't find your login credentials. Go to the registration page, ensure you are logged in, and return to this event.\n }\n this.setState({error: message})\n }\n const data = await response.json();\n const surveyResponse = await fetch('api/survey/' + data.survey);\n const surveyData = await surveyResponse.json();\n\n let newResponses = {};\n if (!data.questionResponses) {\n newResponses = surveyData.questions.map(question => {\n return {\n questionText: question.questionText,\n type: question.type,\n response: \"0\",\n parent: question.parent\n }\n })\n } else {\n newResponses = surveyData.questions.map(question => {\n return {\n questionText: question.questionText,\n type: question.type,\n response: data.questionResponses.find(qr => qr.questionText == question.questionText)?.response || \"0\",\n parent: question.parent\n }\n })\n }\n data.questionResponses = newResponses;\n\n console.log(data);\n this.setState({ response: data, survey: surveyData, loading: false });\n }\n}\n","import React, { Component } from 'react';\n\nimport { Link, Redirect } from 'react-router-dom';\n\nexport class NewSurveyResponse extends Component {\n static displayName = NewSurveyResponse.name;\n\n constructor(props) {\n super(props);\n this.state = { loading: true};\n this.createSurveyResponse = this.createSurveyResponse.bind(this);\n }\n\n componentDidMount() {\n this.createSurveyResponse();\n }\n\n render () {\n if (this.state.createdSurveyResponse) {\n return Creating new survey response...
;\n\n return (\n\n {contents}\n {this.state.error?\n
\n );\n }\n\n\n\n async createSurveyResponse() {\n const requestOptions = {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\"survey\": this.props.match.params.id})\n }\n const response = await fetch('/api/surveyresponse', requestOptions);\n if (!response.ok) {\n let message = There was an unexpected error. Please refresh, try again later or contact andeye at info@andeye.com for assistance\n if (response.status == 401) {\n message = We couldn't find your login credentials. Go to the registration page, ensure you are logged in, and return to this event.\n }\n this.setState({error: message})\n }\n else {\n const surveyResponse = await response.json();\n this.setState({createdSurveyResponse: surveyResponse.id});\n }\n \n }\n}\n","import React from 'react';\n\nexport default function TreeLink(props) {\n\n console.log(props);\n if (props.href.charAt(0) === '#') {\n return {e.preventDefault(); props.handleLinkToQuestion(decodeURI(props.href.substr(1)).replace('_',' '))}}>{props.children}\n }\n return (\n \n )\n}","import React, { useState, useEffect } from 'react';\nimport { faPaperPlane, faThumbsUp as faSolidThumbsUp, faTrashAlt }\n from \"@fortawesome/free-solid-svg-icons\";\n import { faThumbsUp as faRegularThumbsUp }\n from \"@fortawesome/free-regular-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport ReactMarkdown from 'react-markdown';\nimport TreeLink from '../markdown/TreeLink';\n\nfunction CommentViewer(props) {\n\n const [comments, setComments] = useState([]);\n const [newComment, setNewComment] = useState(\"\");\n const handleLinkToQuestion = props.handleLinkToQuestion;\n\n useEffect(() => {\n\n setComments(props.comments);\n \n },[props.comments]);\n\n const handleInputChange = (e) => {\n e.preventDefault();\n setNewComment(e.target.value);\n }\n\n const handleNewItem = (e) => {\n e.preventDefault();\n props.hubConnection && props.hubConnection.\n invoke('newComment', props.docId, {\n location: props.location,\n content: newComment\n });\n setNewComment(\"\")\n }\n\n const handleLike = (e) => {\n e.preventDefault();\n props.hubConnection && props.hubConnection.\n invoke('likeComment', e.currentTarget.dataset.comment, e.currentTarget.dataset.like)\n }\n\n const handleDelete = (e) => {\n e.preventDefault();\n props.hubConnection && props.hubConnection.\n invoke('deleteComment', props.roomId, e.currentTarget.dataset.comment)\n }\n\n return (\n {this.state.error}
\n :null}\n\n {props.comments.length?\n
\n )\n}\n\nexport default CommentViewer; ","import React, { useEffect, useRef, useState } from 'react';\nimport Player from '@vimeo/player';\nfunction VimeoPlayer(props) {\n \n const playerRef = useRef(null)\n const player = useRef(null);\n const [muted, setMuted] = useState(true);\n \n useEffect(() => {\n const options = {...props.options};\n player.current = new Player(playerRef.current, options);\n player.current.on('playing', (data) => {\n player.current.getMuted().then(function(m) {\n setMuted(m); \n }).catch(function(error) {\n console.log(error)\n });\n })\n }, [])\n\n return {props.comments.length} comment{props.comments.length != 1? 's' : null} on this item
\n :null}\n {props.comments.map(c => {\n let thisTranslation = (!['[','*','_'].some(char => c.content.includes(char)) && props.language && props.language != 'en' && c.translations?.find(tr => tr.language == props.language)) || null;\n return\n {!!props.thisUser && \n {c.likes?.length? {c.likes?.length} : null }\n \n {\n c.displayAsMarkdown && ['[','*','_'].some(char => c.content.includes(char))?\n
}\n )}\n {props.canAddComments && }\n \n {c.author}
\n\n \n\n {props.options?.url.includes(\"event\") && muted && }\n
\n\n}\n\nexport default VimeoPlayer;","import React, { useState, useEffect, useRef } from 'react';\nimport { Modal } from 'reactstrap';\n//import styles from './RecorderLinkButtonAndModal.module.css';\n//import classNames from 'classnames/bind';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faDropbox } from '@fortawesome/free-brands-svg-icons';\nimport { faAt, faVideo } from '@fortawesome/free-solid-svg-icons';\n\n//let cx = classNames.bind(styles);\n\nexport default function GuestLoginModal(props) {\n \n const [showModal, setShowModal] = useState(props.show || null);\n const [email, setEmail] = useState(null);\n const [displayName, setDisplayName] = useState(null);\n const [agree, setAgree] = useState(false);\n\n const isValidEmail = (test) => {\n return !!test && test.includes('@');\n }\n\n const getToken = () => {\n fetch(`/api/user/guestkey`, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({email: email, username: displayName})\n })\n .then(() => {\n if (props.afterToken) {\n setShowModal(false);\n props.afterToken();\n } else {\n fetch(`/api/user`)\n .then(() => {\n window.location.reload();\n })\n }\n })\n }\n\n const fullContents = <>\n \n
\n Access as a guest
\n {props.allowClose && }\n\n {props.children || \n <>\n
\n \n;\n\n return (\n You are not logged in.
\nYou can access this page as a guest. Please enter your name and email below
\n }\n\n \n setDisplayName(e.target.value)}\n />\n {!displayName && \n Enter your name\n }\n
\n \n \n setEmail(e.target.value)}\n />\n {!isValidEmail(email) && \n Enter a valid email.\n }\n
\n \n {setAgree(e.currentTarget.checked)}} checked={agree}/>\n \n
\n \n
\n Correct This Translation
\n \n\n
\n \n;\n\n return (\n {langName(props.item.language || 'en')}: {props.item.questionText}
\n\n \n setTranslation(e.target.value)}\n />\n
\n \n
\n )\n}","import React from 'react';\nimport cx from 'classnames';\n\nexport default function renderTreeSearchOption(props, option, snapshot, className) {\n\n if (!option.value) return null;\n\n let subtext = \"\";\n option.question.parent && !option.translated && (subtext += `Under: ${option.question.parent} `);\n\n return \n}","import React, { useState, useEffect, useRef } from 'react';\nimport SelectSearch, { fuzzySearch } from 'react-select-search';\nimport renderTreeSearchOption from './renderTreeSearchOption';\nimport Fuse from 'fuse.js';\n\nexport default function TreeSearch(props) {\n\n const [value, setValue] = useState(null);\n\n useEffect(() => {\n value && props.onChanges(value);\n setValue(null);\n }, [value])\n\n return (\n \n
\n Water Climate Discussion
\n\n
\n )\n}\n\nexport default YouTubePlayer;","import React, { useState, useEffect } from 'react';\nimport { useParams } from 'react-router';\nimport styles from './QuestionPlayer.css'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faCheck, faPaperPlane, faTimes } from '@fortawesome/free-solid-svg-icons';\n\nfunction QuestionPlayer(props) {\n\n // the \"Response\" we will deliver to the server and the admin\n // Initially set with the questionID and the username but nothing else\n const [questionResponse, setQuestionResponse] = useState({question: props.question.id, username: props.username});\n // Whether we've yet sent an answer. Used only to display confirmation messages\n const [sent, setSent] = useState(false);\n\n\n // Current method of sending responses using a POST request\n useEffect(() => {\n console.log(questionResponse);\n if (questionResponse.needsUpdate) {\n fetch(`/api/quizquestion/${props.question.id}/response`, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify(questionResponse)\n })\n .then(() =>\n {setQuestionResponse(prev=> ({...prev, needsUpdate: false}));\n setSent(true)}\n )\n }\n },[questionResponse]);\n\n\n\n // \"questionResponse?\" ensures that the initial response has been set up.\n return (questionResponse?\n \n
\n // Potentially never hit: If no questionresponse is set, show loading text.\n : \n {/* Main question text */}\n 
\n }\n
\n {/* The various ways to respons to the question */}\n {props.question.questionText}
\n {/* Images not currently supported on this app, can be skipped */}\n {props.question.image &&\n\n {/* If a text question */}\n {props.question.type == \"text\" &&\n <>\n {/* Essentially a text box with a send button. */}\n Correct\n :\n <> Incorrect.\n {/* If wrong, show all the right answer options, comma separated (say 'answers' instead of 'answer' if there are multiple) */}\n Correct answer{props.question.answers.length > 1 && 's'}: {props.question.answers.join(', ')}\n \n }\n \n :\n // Add this message below the textbox if the current answer has been submitted\n sent && questionResponse.answer && Answer submitted. You may still change your answer\n }\n \n \n }\n {/* if a Multi-choice question */}\n {props.question.type == \"mcq\" &&\n
\n \n {setSent(false); let answer = e.target.value; setQuestionResponse({...questionResponse, answer})}}\n // Set needsUpdate if the enter key is pressed, meaning this answer will get sent by the useEffect\n onKeyUp={e => {if (e.key !== \"Enter\") return; setQuestionResponse({...questionResponse, needsUpdate: true}); e.preventDefault();}}\n placeholder=\"Enter your answer\"\n // If revealAnswer is set, then this input is greyed out\n disabled={props.revealAnswer}\n />\n
\n {/* If revealAnswer is set */}\n {props.revealAnswer ?\n \n {/* If, with whitespace trimmed and set to lowercase, this answer matches one of the correct answers sent back, show a tick, else show a cross */}\n {questionResponse.answer && props.question.answers.map(a => a.trim().toLowerCase()).includes(questionResponse.answer.trim().toLowerCase())?\n <>\n setQuestionResponse({...questionResponse, needsUpdate: true})}\n >\n
\n \n {/* Map each possible answer to a button */}\n {props.question.mcqOptions.map(o => {\n return (\n setQuestionResponse({...questionResponse, answer: o, needsUpdate: true})}\n >\n {o} {props.revealAnswer && props.question?.answers?.includes(o) &&\n // Add a tick if the answer is revealed and this is the right one.\n \n }\n \n )\n })}\n
\n }\n Loading...
);\n\n}\n\nexport default QuestionPlayer;","import React, { Component, useContext } from 'react';\n\n\nimport {\n HubConnectionBuilder,\n LogLevel,\n HubConnectionState\n} from '@microsoft/signalr';\n\nimport cx from 'classnames'\nimport ReactMarkdown from 'react-markdown';\n\nimport { faPaperPlane, faPlus, faCheckCircle, faExclamationCircle,\n faLayerGroup, faCut, faPaste, faChessPawn, faChessKing,\n faBullseye, faLevelUpAlt, faRedo, faCommentDots,\n faVideoSlash, faMicrophoneSlash, faVideo, faSortDown, faMinus, faExchangeAlt, faExternalLinkSquareAlt, faThumbsUp as faSolidThumbsUp, faPlay, faChevronRight, faChevronCircleRight, faLanguage, faSearch, faLevelDownAlt, faClipboard, faCaretDown, faCaretUp }\n from \"@fortawesome/free-solid-svg-icons\";\nimport { faTrashAlt, faThumbsUp as faRegularThumbsUp } from \"@fortawesome/free-regular-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { ConsoleLogger } from '@microsoft/signalr/dist/esm/Utils';\nimport { SliderQuestion } from '../survey/SliderQuestion';\nimport CommentViewer from './CommentViewer';\nimport { Redirect } from 'react-router';\nimport Diff from 'text-diff';\nimport SelectSearch, { fuzzySearch } from 'react-select-search';\nimport './TreeSearch.css';\nimport VimeoPlayer from '../vimeo/VimeoPlayer';\nimport ReactTooltip from 'react-tooltip';\nimport GuestLoginModal from '../auth/GuestLoginModal';\nimport CorrectTranslationModal from '../translate/CorrectTranslationModal';\nimport WCDHeader from '../branding/WCDHeader';\nimport TreeLink from '../markdown/TreeLink';\nimport TreeSearch from './TreeSearch';\nimport LanguageSelect, { langName } from './LanguageSelect';\nimport { Alert } from 'reactstrap';\nimport YouTubePlayer from '../vimeo/YouTubePlayer';\nimport * as microsoftTeams from \"@microsoft/teams-js\";\nimport QuestionPlayer from '../quiz/QuestionPlayer';\n\n\nexport class SharedTree extends Component {\n static displayName = SharedTree.name;\n\n constructor(props) {\n super(props);\n this.handleNewItem = this.handleNewItem.bind(this);\n this.handleInputChange = this.handleInputChange.bind(this);\n this.handleRenameChange = this.handleRenameChange.bind(this);\n this.handleRenameQuestion = this.handleRenameQuestion.bind(this);\n this.handleSelectItem = this.handleSelectItem.bind(this);\n this.handleSelectEditModeItem = this.handleSelectEditModeItem.bind(this);\n this.handleDeleteItem = this.handleDeleteItem.bind(this);\n this.handleModifyItem = this.handleModifyItem.bind(this);\n this.handleViewComments = this.handleViewComments.bind(this);\n this.handleVote = this.handleVote.bind(this);\n this.handleCutItem = this.handleCutItem.bind(this);\n this.handlePasteItem = this.handlePasteItem.bind(this);\n this.handleUpdateViewRoot = this.handleUpdateViewRoot.bind(this);\n this.handleSliderChange = this.handleSliderChange.bind(this);\n this.handleSlideStop = this.handleSlideStop.bind(this);\n this.createConnection = this.createConnection.bind(this);\n this.renderQuestions = this.renderQuestions.bind(this);\n this.populateSurveyData = this.populateSurveyData.bind(this);\n this.populateResponseData = this.populateResponseData.bind(this);\n this.populateUserData = this.populateUserData.bind(this);\n this.switchModes = this.switchModes.bind(this);\n this.getQuestionAncestors = this.getQuestionAncestors.bind(this);\n this.ensureSubscribed = this.ensureSubscribed.bind(this);\n this.handleRankUser = this.handleRankUser.bind(this);\n this.handleRefreshUser = this.handleRefreshUser.bind(this);\n this.handleUserVisible = this.handleUserVisible.bind(this);\n this.handleAllocateRooms = this.handleAllocateRooms.bind(this);\n this.handlePullToHub = this.handlePullToHub.bind(this);\n this.handleRoomOpenStatus = this.handleRoomOpenStatus.bind(this);\n this.handleVideoClipStatus = this.handleVideoClipStatus.bind(this);\n this.handleChangeTreeMode = this.handleChangeTreeMode.bind(this);\n this.handleVideoClipClose = this.handleVideoClipClose.bind(this);\n this.handleRedirectAll = this.handleRedirectAll.bind(this);\n this.handleTwistyClick = this.handleTwistyClick.bind(this);\n this.handleLinkToQuestion = this.handleLinkToQuestion.bind(this);\n this.handleOpenTranslateModal = this.handleOpenTranslateModal.bind(this);\n this.handleCloseTranslateModal = this.handleCloseTranslateModal.bind(this);\n }\n\n componentDidMount() {\n console.log(\"mounted\");\n const params = new URLSearchParams(window.location.search);\n const eventUrl = params.get('event')\n const treeOnly = params.get('tree-only')\n const branding = params.get('branding')\n const allowDark = params.get('dark')\n microsoftTeams.initialize();\n microsoftTeams.getContext(context => {\n if (context) {\n fetch(`/api/user/teamskey`, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({email: context.loginHint, username: context.loginHint})\n })\n .then((response) => {\n if (response.ok) {\n window.location.reload();\n }\n })\n }\n })\n this.setState({\n newItemUnder: -1,\n editModeItem: -1,\n newItemContent: \"\",\n newItemType: null,\n newItemMaxLength: 50,\n viewingComments: null,\n newCommentContent: \"\",\n editModeRename: \"\",\n cutting: null,\n userList: [],\n redirect: null,\n userListOpen: false,\n videoClipOpen: false,\n callEndpoint: \"https://interactive.andeye.com:9443\",\n eventUrl,\n errors: [],\n showGuestModal: false,\n onGuestModalLogin: null,\n branding,\n language:null,\n viewRootOverride: false,\n openTranslationModal: null,\n searchSuggestionsOnly: false,\n allowDark,\n treeOnlyParam: (treeOnly != null)}, () => {\n this.populateUserData(this.createConnection);\n this.populateRoomData();\n \n });\n }\n\n componentDidUpdate() {\n \n ReactTooltip.rebuild();\n }\n\n\n createConnection() {\n const hubConnection = new HubConnectionBuilder()\n .withUrl('/controlHub')\n .withAutomaticReconnect([0, 3000, 5000, 10000, 15000, 30000])\n .configureLogging(LogLevel.Information)\n .build();\n this.setState({hubConnection: hubConnection}, () => {\n this.state.hubConnection\n .start()\n .then(() => {\n console.log(\"Connected to SignalR\");\n if (this.state.eventUrl) {\n this.state?.user && this.state.hubConnection.\n invoke('eventArrival', this.state.eventUrl)\n .catch(err => this.addError({type: \"warning\", header: \"Real-time connection\", message: `There was an error while arriving in this room.`}));\n }\n this.forceUpdate();\n console.log(\"ALLOCATE\");\n this.allocateMeIfRequired();\n })\n .catch(err => this.addError({type: \"warning\", header: \"Real-time connection\", message: \"We encountered a problem establishing a real-time connection to the server\"}));\n this.state.hubConnection.onreconnected(() => {\n this.populateRoomData();\n })\n this.state.hubConnection.on('newQuestion', (id, receivedQuestion) => {\n if (id == this.state?.survey?.id) {\n const survey = this.state.survey;\n survey.questions.push(receivedQuestion)\n this.setState({ survey });\n }\n });\n this.state.hubConnection.on('deleteQuestion', (id, receivedQuestion) => {\n if (id == this.state?.survey?.id) {\n const survey = this.state.survey;\n survey.questions = survey.questions.filter(q => q.questionText !== receivedQuestion.questionText);\n this.setState({ survey });\n }\n });\n this.state.hubConnection.on('modifyQuestion', (id, receivedQuestion) => {\n if (id == this.state?.survey?.id) {\n const survey = this.state.survey;\n survey.questions = survey.questions.filter(q => q.questionText !== receivedQuestion.questionText);\n survey.questions.push(receivedQuestion);\n this.setState({ survey });\n }\n });\n this.state.hubConnection.on('renameQuestion', (id, oldQuestionText, newQuestionText) => {\n if (id == this.state?.survey?.id) {\n const survey = this.state.survey;\n survey.questions = this.state.survey.questions.map(q => {\n if (q.questionText == oldQuestionText){\n return {...q, questionText: newQuestionText, translations: null}\n } else if (q.parent == oldQuestionText) {\n return {...q, parent: newQuestionText}\n } else {\n return q;\n }\n });\n const comments = this.state.comments.map(c => {\n if (c.location == oldQuestionText){\n return {...c, location: newQuestionText}\n } else {\n return c;\n }\n })\n this.setState({ survey, comments });\n }\n });\n this.state.hubConnection.on('changeStatus', (id, status) => {\n if (id == this.state?.room?.id) {\n const room = this.state.room;\n room.status = status;\n this.setState({ room }, () => {\n if (this.state.room.status == \"ranking\") {\n this.populateResponseData();\n }\n });\n }\n });\n this.state.hubConnection.on('changeOpenStatus', (id, isOpen) => {\n if (id == this.state?.room?.id) {\n const room = this.state.room;\n room.isOpen = isOpen;\n this.setState({ room }, () => {\n console.log(this.state.room)\n });\n }\n });\n this.state.hubConnection.on('modifyRoom', (id, room) => {\n if (id == this.state?.room?.id) {\n this.setState(prevState => ({ room, viewTreeUser: (room.treeMode == 'show' && true) || (room.treeMode == 'hide' && false) || prevState.viewTreeUser, revealAnswer: false }), () => {\n this.populateQuizQuestion();\n });\n }\n });\n this.state.hubConnection.on('changeVideoOpenStatus', (id, isOpen) => {\n if (id == this.state?.room?.id) {\n this.setState({ videoClipOpen: isOpen });\n }\n });\n this.state.hubConnection.on('changeTreeMode', (id, mode) => {\n if (id == this.state?.room?.id) {\n this.setState({ room: {...this.state.room, treeMode: mode} });\n }\n });\n this.state.hubConnection.on('updateAssignedMods', (roomId, assignedMods) => {\n if (roomId == this.state?.room?.id) {\n const room = this.state.room;\n room.assignedMods = assignedMods;\n this.setState({ room });\n }\n });\n this.state.hubConnection.on('updateViewList', (roomId, visibleUsers) => {\n if (roomId == this.state?.room?.id) {\n const room = this.state.room;\n room.visibleUsers = visibleUsers;\n this.setState({ room });\n }\n });\n this.state.hubConnection.on('changeViewRoot', (id, viewRoot) => {\n if (id == this.state?.room?.id) {\n const room = this.state.room;\n room.viewRoot = viewRoot;\n this.setState({ room }, () => this.forceUpdate());\n }\n });\n this.state.hubConnection.on('moveRoom', (roomId, userOverride) => {\n if (userOverride && this.state.user?.redirectOverride) {\n window.top.location = this.state.user.redirectOverride;\n }\n else {\n let redirect = `/sharedtree/${roomId}`\n // if (window.top.location != window.self.location) {\n window.top.location = redirect;\n // }\n // this.setState({ redirect });\n }\n });\n this.state.hubConnection.on('redirectTo', (roomId, url) => {\n if (roomId == this.state?.room?.id) {\n setTimeout(() => {\n window.top.location = url;\n }, Math.random()*20000);\n }\n });\n this.state.hubConnection.on('userList', (userList) => {\n this.setState({ userList });\n console.log(userList);\n });\n this.state.hubConnection.on('userUpdate', (user) => {\n this.setState({ user });\n if (user.rank == \"mod\") {\n this.state.hubConnection\n .invoke(\"confirmInModGroup\");\n }\n });\n this.state.hubConnection.on('refreshPage', () => {\n window.location.reload();\n });\n this.state.hubConnection.on('surveyUpdate', (id, survey) => {\n if (id == this.state?.room?.id) {\n this.setState({ survey });\n }\n });\n this.state.hubConnection.on('newComment', (docId, comment) => {\n if (docId == this.state?.survey?.id) {\n let comments = this.state.comments;\n comments.push(comment);\n this.setState({comments});\n }\n });\n this.state.hubConnection.on('updateComment', (comment) => {\n if (comment.document == this.state?.survey?.id) {\n // Grab the comment list and update the existing one\n let comments = this.state.comments.map((c) => {\n return (c.id == comment.id\n ? comment\n : c)\n });\n this.setState({comments});\n }\n });\n this.state.hubConnection.on('deleteComment', (id) => {\n console.log(this.state.comments);\n let comments = this.state.comments;\n comments = comments.filter(c => c.id !== id);\n console.log(comments)\n this.setState({ comments }, () => console.log(this.state.comments));\n });\n this.state.hubConnection.on('videoClip', (id, status) => {\n if (id == this.state?.room?.id) {\n this.setState({ videoClip: status == true });\n }\n });\n this.state.hubConnection.on('updateQuizQuestion', (updatedQuestion) => {\n if (this.state?.activeQuizQuestion?.id == updatedQuestion.id) {\n this.setState({activeQuizQuestion: updatedQuestion});\n }\n });\n this.state.hubConnection.on('revealAnswer', (roomId) => {\n if (roomId == this.state?.room?.id) {\n this.setState({revealAnswer: true});\n }\n });\n });\n } \n\n allocateMeIfRequired() {\n if (this.state?.room?.status == \"hub\" && this.state.room.onAssignment && this.state.hubConnection?.state == HubConnectionState.Connected) {\n this.state?.user && this.state.hubConnection.invoke(\"allocateMe\", this.state.room.event);\n } \n }\n\n clearErrors() {\n this.setState({errors: []});\n }\n\n addError(e) {\n this.setState({errors: [...this.state.errors, e]})\n }\n\n ensureSubscribed(group) {\n this.state.hubConnection.invoke('subscribe', group);\n }\n\n readOnly() {\n return this.state?.room?.readOnlyMode == true || !this.state?.user\n }\n\n treeMode() {\n if (this.state?.treeOnlyParam) return 'treeOnly';\n return this.state?.room?.treeMode || 'show';\n }\n\n isMod() {\n return (this.state?.user?.rank == \"mod\" || this.state?.room?.assignedMods?.includes(this.state?.user?.username));\n }\n\n\n handleNewItem(event) {\n event.preventDefault();\n console.log(this.state.newItemUnder);\n console.log(this.state.newItemContent);\n if (!this.state.newItemContent) return false;\n if (this.state.newItemUnder == -1) return false;\n if (this.state.survey.questions.filter(q => q.questionText == this.state.newItemContent).length) return false;\n const newItem = {\n parent: this.state.newItemUnder,\n questionText: `${this.state.newItemContent}`,\n type: this.state.newItemType || this.state.room.status,\n language: this.state?.language || 'en',\n sortPriority: (Math.min(...this.state.survey.questions.filter(q=>q.parent == this.state.newItemUnder)?.map(q=>q.sortPriority), 0) - 1e6)\n }\n this.setState({newItemUnder: -1, newItemContent: \"\", newItemType: null});\n this.state.hubConnection\n .invoke('newQuestion', this.state.survey.id, newItem)\n .catch(err => console.error(err));\n }\n\n handleInputChange(event) {\n this.setState({newItemContent: event.target.value});\n }\n handleRenameChange(event) {\n event.currentTarget.style.height = \"\";event.currentTarget.style.height = (event.currentTarget.scrollHeight+3) + \"px\"\n this.setState({editModeRename: event.target.value.replaceAll('\\n',' ')});\n }\n \n switchModes(event) {\n event.preventDefault();\n this.state.hubConnection\n .invoke('changeStatus', this.state.room.id, event.currentTarget.dataset.mode)\n }\n\n handleTwistyClick(e, showOverride, questionText) {\n const survey = this.state.survey;\n const thisQuestionText = questionText || e?.currentTarget.dataset.question;\n const open = showOverride || e.currentTarget.dataset.open == \"true\";\n survey.questions = survey.questions.map(q => {\n if (q.questionText == thisQuestionText) {\n return {...q, twistedOpen: open}\n } else {\n return q;\n }\n });\n this.setState({ survey, linkHighlight: null });\n }\n\n handleLinkToQuestion(questionText) {\n let openers = [];\n let nextQuestion = questionText;\n while (nextQuestion != null) {\n openers.push(nextQuestion);\n nextQuestion = this.state?.survey?.questions?.find(q => q.questionText == nextQuestion)?.parent;\n }\n const survey = this.state.survey;\n console.log(openers)\n survey.questions = survey.questions.map(q => {\n if (openers.includes(q.questionText)) {\n \n console.log(q.questionText);\n return {...q, twistedOpen: true}\n } else {\n return q;\n }\n });\n console.log(survey);\n console.log(questionText);\n let viewRootOverride = (this.state.room?.viewRoot && !openers.includes(this.state.room.viewRoot))\n this.setState({survey, linkHighlight: questionText, viewRootOverride}, () => {\n setTimeout(() => {\n document.getElementById('linked').scrollIntoView(true);\n }, 100);\n })\n \n }\n\n handleSelectItem(event, _dataset) {\n const dataset = event?.currentTarget?.dataset || _dataset;\n console.log(dataset);\n if (!this.state?.user) {\n this.setState({\n showGuestModal: true,\n onGuestModalLogin: () => {\n this.handleSelectItem(null, dataset);\n }\n });\n return;\n }\n if (dataset.question === this.state.newItemUnder) {\n this.setState({\n newItemUnder: -1,\n newItemContent: \"\",\n editModeItem: null,\n cutting: null,\n viewingComments: null,\n newCommentContent: \"\",\n });\n } else {\n this.state.room?.enableTwisties && this.handleTwistyClick(null, true, dataset.question);\n let newItemContent = \"\";\n if (dataset.nodetype == 'amendment') {\n newItemContent = dataset.question;\n }\n this.setState({\n newItemUnder: dataset.question || null,\n newItemContent,\n editModeItem: null,\n newItemType: this.state.room.status == \"document\"? dataset.nodetype : null,\n cutting: null,\n viewingComments: null,\n newCommentContent: \"\",\n });\n }\n }\n\n handleSelectEditModeItem(event) {\n var question = this.state.survey.questions.find(q => q.questionText == event.currentTarget.dataset.question);\n console.log(question);\n\n if (this.isMod() || (question.author != null && question.author == this.state.user?.username && (!this.readOnly() || question.type=='suggestion')))\n this.setState({\n editModeItem: event.currentTarget.dataset.question || null,\n newItemUnder: -1,\n cutting: null,\n viewingComments: null,\n newCommentContent: \"\",\n editModeRename: question.questionText\n });\n }\n\n handleCutItem(event) {\n this.setState({\n cutting: event.currentTarget.dataset.question,\n viewingComments: null,\n newCommentContent: \"\",\n });\n }\n\n handleViewComments(event) {\n if (event.currentTarget.dataset.question === this.state.viewingComments) {\n this.setState({\n newItemUnder: -1,\n newItemContent: \"\",\n editModeItem: null,\n cutting: null,\n viewingComments: null,\n newCommentContent: \"\",\n });\n } else {\n this.setState({\n newItemUnder: -1,\n editModeItem: null,\n cutting: null,\n viewingComments: event.currentTarget.dataset.question\n });\n }\n }\n\n handleVote(e) {\n const myComment = this.state.comments.find(c =>\n c.author == this.state.user.username && c.location == e.currentTarget.dataset.question && c.content.startsWith('_'));\n e.preventDefault();\n if (myComment) {\n this.state.hubConnection\n .invoke('deleteComment', this.state.room?.id, myComment.id)\n }\n if (!myComment || myComment.content !== e.currentTarget.dataset.vote) {\n this.state.hubConnection\n .invoke('newComment', this.state.survey.id, {\n location: e.currentTarget.dataset.question,\n content: e.currentTarget.dataset.vote\n });\n }\n\n }\n\n handlePasteItem(event) {\n event.preventDefault();\n const modifyItem = {\n questionText: this.state.cutting\n };\n modifyItem.parent = event.currentTarget.dataset.parent || null;\n if (event.currentTarget.dataset.above) {\n console.log(\"pasting above\");\n let aboveSortPri = this.state.survey.questions.find(q => q.questionText == event.currentTarget.dataset.above).sortPriority;\n let nextSortPri = Math.min(...this.state.survey.questions.filter(q=>q.parent == modifyItem.parent && q.sortPriority > aboveSortPri)?.map(q=>q.sortPriority), aboveSortPri + 1e6);\n \n console.log(aboveSortPri);\n \n console.log(nextSortPri);\n modifyItem.sortPriority = (aboveSortPri+nextSortPri)/2;\n } else if (event.currentTarget.dataset.below) {\n let belowSortPri = this.state.survey.questions.find(q => q.questionText == event.currentTarget.dataset.below).sortPriority;\n let nextSortPri = Math.max(...this.state.survey.questions.filter(q=>q.parent == modifyItem.parent && q.sortPriority < belowSortPri)?.map(q=>q.sortPriority), belowSortPri - 1e6);\n modifyItem.sortPriority = (belowSortPri+nextSortPri)/2;\n } else {\n modifyItem.sortPriority = (Math.min(...this.state.survey.questions.filter(q=>q.parent == modifyItem.parent)?.map(q=>q.sortPriority), 0) - 1e6)\n }\n console.log(modifyItem);\n this.state.hubConnection\n .invoke('modifyQuestion', this.state.survey.id, this.state.room?.id, modifyItem);\n this.setState({\n cutting: null\n })\n if(this.state.editModeRename == this.state.editModeItem) {\n this.setState({\n editModeItem: null\n })\n }\n }\n\n handleDeleteItem(event) {\n event.preventDefault();\n const deleteItem = {\n questionText: event.currentTarget.dataset.question\n };\n\n this.state.hubConnection\n .invoke('deleteQuestion', this.state.survey.id, this.state.room?.id, deleteItem);\n }\n\n getQuestionAncestors(questionText) {\n let question = this.state.survey.questions\n ?.find(q => q.questionText == questionText);\n if (!question.parent) return [];\n return [...this.getQuestionAncestors(question.parent), question.parent];\n }\n\n handleModifyItem(event) {\n event.preventDefault();\n const modifyItem = {\n questionText: event.currentTarget.dataset.question,\n parent: \"UNCHANGED\"\n };\n if (event.currentTarget.dataset.nodetype) {\n modifyItem.type = event.currentTarget.dataset.nodetype;\n }\n \n\n this.state.hubConnection\n .invoke('modifyQuestion', this.state.survey.id, this.state.room?.id, modifyItem);\n }\n\n handleRankUser(event) {\n event.preventDefault();\n this.state.hubConnection\n .invoke('rankUser', event.currentTarget.dataset.user, event.currentTarget.dataset.rank);\n }\n\n handleRefreshUser(event) {\n event.preventDefault();\n this.state.hubConnection\n .invoke('refreshUser', event.currentTarget.dataset.user);\n }\n\n handleUserVisible(event) {\n event.preventDefault();\n console.log(event.currentTarget.dataset.user);\n console.log(event.currentTarget.dataset.show);\n this.state.hubConnection\n .invoke('userVisible',\n this.state.room.id,\n event.currentTarget.dataset.user,\n event.currentTarget.dataset.show === \"true\");\n }\n\n handleUpdateViewRoot(event) {\n event.preventDefault();\n this.setState({viewRootOverride: false});\n this.state.hubConnection\n .invoke('changeViewRoot', this.state.room.id, event.currentTarget.dataset.root)\n }\n handleRenameQuestion(event) {\n event.preventDefault();\n\n\n if (this.state.editModeRename && this.state.editModeRename.length\n && !(this.state.editModeRename != this.state.editModeItem && this.state.survey.questions?.find(q => q.questionText == this.state.editModeRename))) {\n this.state.hubConnection\n .invoke('renameQuestion', this.state.survey.id, this.state.editModeItem, this.state.editModeRename);\n this.setState({\n newItemUnder: -1,\n newItemContent: \"\",\n editModeItem: null,\n cutting: null,\n viewingComments: null,\n newCommentContent: \"\",\n });\n }\n\n }\n \n handleAllocateRooms(event) {\n event.preventDefault();\n this.state.hubConnection\n .invoke('allocateToGroups', this.state.room.event);\n }\n\n handlePullToHub(event) {\n event.preventDefault();\n this.state.hubConnection\n .invoke('returnToHub', this.state.room.event);\n }\n \n handleSliderChange(questionText, value) {\n let response = this.state.response;\n response.questionResponses.find(q => q.questionText == questionText).response = value.toString();\n this.setState({ response }, async () => {\n const fetchResponse = await fetch(`/api/surveyresponse/${response.id}`, {\n method: 'PUT',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(response)\n })\n })\n \n this.forceUpdate();\n }\n \n handleSlideStop(questionText, value) {\n console.log(`${questionText}: ${value}`);\n }\n\n handleRoomOpenStatus(event) {\n console.log(event.currentTarget.dataset.open);\n this.state.hubConnection\n .invoke('changeOpenStatus', this.state.room.id, (event.currentTarget.dataset.open == 'true'))\n }\n\n handleVideoClipStatus(event) {\n console.log(event.currentTarget.dataset.open);\n this.state.hubConnection\n .invoke('changeVideoOpenStatus', this.state.room.id, (event.currentTarget.dataset.open == 'true'))\n }\n\n handleVideoClipClose(event) {\n this.setState({ videoClipOpen: false });\n }\n\n handleChangeTreeMode(event) {\n this.state.hubConnection\n .invoke('changeTreeMode', this.state.room.id, (event.currentTarget.dataset.mode))\n }\n\n handleRedirectAll(event) {\n console.log(event.currentTarget.dataset.open);\n this.state.hubConnection\n .invoke('RedirectAll', this.state.room.id, '/matcher/61099db59a86841439a48c58')\n }\n\n handleOpenTranslateModal(event, questionTextOverride) {\n let questionText = questionTextOverride || event.currentTarget.dataset.question;\n if (!this.state?.user) {\n this.setState({\n showGuestModal: true,\n onGuestModalLogin: () => {\n this.handleOpenTranslateModal(null, questionText);\n }\n });\n return;\n }\n this.setState({openTranslationModal: this.state?.survey?.questions?.find(q => q.questionText == questionText)});\n }\n\n handleCloseTranslateModal(translatedText) {\n if (translatedText) {\n const translation = {\n translatedText,\n language: (this.state.language || 'en')\n };\n this.state.hubConnection\n .invoke('newTranslation', this.state?.survey?.id, this.state.openTranslationModal.questionText, translation);\n // this.setState(prevState => ({\n // ...prevState,\n // openTranslationModal: null,\n // survey: {\n // ...prevState.survey,\n // questions: prevState.survey.questions.map(q => {\n // if (q.questionText == prevState.openTranslationModal){\n // return ({\n // ...q,\n // translations: q.translations.map(tr => {\n // if (tr.language == prevState.language) {\n // return ({\n // ...tr,\n // translatedText: translatedText\n // })\n // } else {\n // return tr;\n // }\n // })\n // })\n // } else {\n // return q;\n // }\n // })\n // }\n // }));\n }\n // else {\n // this.setState({openTranslationModal: null})\n // }\n this.setState({openTranslationModal: null})\n }\n\n // reSortItems() {\n\n // let votes = ((b.upvotes?.length || 0) - (b.downvotes?.length || 0)) - ((a.upvotes?.length || 0) - (a.downvotes?.length || 0))\n // if (votes != 0) return votes;\n // }\n\n renderQuestions(parentQuestion, renderParent) {\n let elements = [];\n if (!this.state.survey) return null;\n this.state.survey.questions\n .filter(q => (renderParent? q.questionText == parentQuestion : q.parent == parentQuestion))\n .map(q => {\n if (['document','vanilla'].includes(this.state.room.status) || q.type=='suggestion') {\n \n q.upvotes = this.state.comments?.filter(c => (c.location == q.questionText && c.content == '_upvote'));\n q.downvotes = this.state.comments?.filter(c => (c.location == q.questionText && c.content == '_downvote'));\n }\n return q\n })\n .sort((a,b) => {\n if (this.state.room.status == 'document') {\n const typeOrder = ['document', 'amendment','solution','issue','suggestion'];\n const typeOrderScore = typeOrder.indexOf(a.type) - typeOrder.indexOf(b.type);\n if (typeOrderScore != 0) return typeOrderScore;\n }\n\n // Sort by score\n if (b.sortPriority > a.sortPriority) return 1;\n if (b.sortPriority < a.sortPriority) return -1;\n \n if (b.created < a.created) return 1;\n if (b.created > a.created) return -1;\n\n return b.questionText < a.questionText ? 1 : -1\n })\n .map(q => {\n let amendment = null;\n if (q.type === 'amendment' && q.parent) {\n const diff = new Diff();\n const textDiff = diff.main(q.parent, q.questionText);\n diff.cleanupSemantic(textDiff);\n amendment = ;\n console.log(amendment);\n }\n let qr = this.state.response?.questionResponses?\n this.state.response.questionResponses.find(thisqr => thisqr.questionText == q.questionText)\n :null;\n // Checks before rendering this item, currently disabled as suggestions were the only thing filtered out and now they're visible.\n if (true /* q.type != 'suggestion' || q.author == this.state?.user?.username || this.isMod() */) {\n let childElements = this.renderQuestions(q.questionText);\n let itemComments = this.state.comments?.filter(c => (c.location == q.questionText && !c.content.startsWith('_')));\n // If the user wants a translation, and there is one, put it here, else null\n let thisTranslation = ((this.state?.language || 'en') != (q.language || 'en') && q.translations?.find(tr => tr.language == (this.state?.language || 'en'))) || null;\n elements.push(\n {this.state.editModeItem == q.questionText && \n \n ||\n <>\n {this.state.room.enableTwisties &&\n \n \n {amendment ||\n (q.displayAsMarkdown && ['[','*','_'].some(char => q.questionText.includes(char))? // Temp fix to prevent \n \n : null}\n \n \n \n
);\n if (childElements && (!this.state.room?.enableTwisties || q.twistedOpen)) {\n elements.push(childElements);\n }\n if (this.state.newItemUnder == q.questionText) {\n elements.push(\n \n )\n }\n }\n });\n if (parentQuestion == null && this.isMod()) {\n\n elements.push(\n this.state.newItemUnder == null? \n \n :\n \n );\n }\n if (elements.filter(e => (e != null)).length) {\n return \n {/* \"Add\" button for if issue/solution/vanilla mode is picked and we're not in read-only, or suggestion mode is picked*/}\n {\n (\n (\n (\n ['issue', 'solution', 'vanilla'].includes(this.state.room.status)\n &&\n (!this.readOnly() || this.isMod())\n )\n ||\n (this.state.room.status == 'suggestion')\n )\n &&\n (!this.state.room.enableTwisties || q.twistedOpen || !childElements)\n )\n ?\n \n \n \n\n :null}\n\n {thisTranslation?\n \n c.author == this.state.user.username) && faSolidThumbsUp || faRegularThumbsUp} color=\"#888\"/>\n {q.upvotes?.length? {q.upvotes.length} : null}\n \n \n c.author == this.state.user.username) && faSolidThumbsUp || faRegularThumbsUp} color=\"#888\"/>\n {q.downvotes?.length? {q.downvotes.length} : null}\n \n \n }\n \n {!['document', 'vanilla'].includes(this.state.room.status) && (!this.readOnly() || itemComments?.length || this.isMod() || (q.author && q.author == this.state?.user?.username)) &&\n \n \n {itemComments?.length? {itemComments.length} : null}\n \n }\n\n {(q.questionText != this.state.room.viewRoot && this.isMod())?\n \n \n \n : null}\n\n {(q.type != \"solution\") && this.isMod()?\n \n \n \n : null}\n\n {(q.type != \"category\") && this.state?.room?.status != \"document\" && this.isMod()?\n \n \n \n {[\"issue\",\"solution\"].includes(this.state.room.status) &&\n <>\n \n \n \n \n \n \n \n }\n \n : null}\n\n {this.state.editModeItem === q.questionText && this.isMod() && q.author && }\n
\n\n {this.state.room.status == \"ranking\" && ['issue','solution'].includes(q.type) && qr?\n \n
\n : null}\n\n {this.state.viewingComments == q.questionText?\n {elements}
\n }\n }\n\n async populateRoomData() {\n const response = await fetch('api/room/' + this.props.match.params.id);\n const data = await response.json();\n this.setState({room: data}, () => {\n if (this.state.room.status == 'document' || this.state.room.bypassLengthLimit) {\n this.setState({newItemMaxLength: null});\n }\n if (this.state.room.onAssignment) {\n this.allocateMeIfRequired();\n }\n else {\n this.populateSurveyData();\n this.populateQuizQuestion();\n this.forceUpdate();\n }\n })\n }\n\n async populateSurveyData() {\n const response = await fetch('api/survey/' + this.state.room.survey + (this.state?.language? \"?lang=\"+this.state.language : ''));\n const data = await response.json();\n this.setState({survey: data}, () => {\n if (this.state.room.status == \"ranking\") {\n this.populateResponseData();\n }\n this.populateCommentData();\n this.forceUpdate();\n })\n }\n\n async populateCommentData() {\n const response = await fetch(`api/survey/${this.state.room.survey}/comment`+ (this.state?.language? \"?lang=\"+this.state.language : ''));\n const comments = await response.json();\n this.setState({comments})\n }\n\n async populateUserData(cb) {\n const response = await fetch('api/user/');\n \n console.log(response);\n if (response.ok) {\n const data = await response.json();\n this.setState({user: data}, () => {\n \n this.forceUpdate();\n cb && cb();\n })\n } else {\n cb && cb()\n }\n \n //setTimeout(this.populateUserData, (Math.random() + 1) * 60000)\n }\n\n async populateQuizQuestion(cb) {\n if (this.state?.room?.activeQuizQuestion) {\n fetch(`/api/quizquestion/${this.state.room.activeQuizQuestion}`)\n .then(response => response.json())\n .then(activeQuizQuestion => this.setState({activeQuizQuestion}))\n } else if (this?.state?.room) {\n this.setState({activeQuizQuestion: null, revealAnswer: false});\n }\n }\n\n async populateResponseData() {\n \n const response = await fetch('api/surveyresponse', {\n method: \"POST\",\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({survey: this.state.survey.id})\n });\n const data = await response.json();\n if (data.questionResponses == null) {\n data.questionResponses = [];\n }\n if (this.state.survey?.questions) {\n this.state.survey.questions.forEach(q => {\n if (!data.questionResponses.find(qr => qr.questionText == q.questionText)) {\n data.questionResponses.push({\n questionText: q.questionText,\n type: \"slider\",\n response: \"10\"\n })\n }\n })\n }\n console.log(data);\n this.setState({ response: data });\n }\n\n\n\n render() {\n\n // if (this.state?.redirect) {\n // console.log(this.state.redirect);\n // let redirect = \n
\n }\n let contents = null;\n if (this.state?.room?.status == \"hub\") {\n contents = \n {this.isMod()?\n
\n }\n else {\n let intro = null;\n if (this.state?.room?.header) {\n intro = \n
\n :\n You are a moderator and can control this event
\n {this.state?.hubConnection?.state == \"Connected\"?\n\n
\n :null}\n \n Push all event attendees to their favourite room:\n \n
\n\n Pull all event attendees back to the event page from which they were taken:\n \n
\n {this.state.user.userID == \"73295\" /* TODO <--- this needs removing */ &&\n \n }\nThis page is listening for andeye Interactive control messages.
\n }\n\n Water Climate Issues Hierarchy\n
\n \n }*/\n intro =\n
\n } \n let modTools = null;\n if (this.isMod() && this.state?.room && this.state?.hubConnection?.state == \"Connected\") {\n modTools = {introText}
\n {!this.state.room?.vimeo && this.treeMode() != 'treeOnly' &&If you cannot see a video call on the right of your screen, visit our help page, where you can find potential solutions or live support from our team.
}\n\n \n {([\"solution\",\"ranking\"].includes(this.state.room.status))?\n \n : null}\n {([\"issue\",\"ranking\"].includes(this.state.room.status))?\n \n : null}\n {([\"issue\",\"solution\"].includes(this.state.room.status)) && !this.state.room.disableRankingMode?\n \n : null}\n \n {this.state.user.userID == \"73295\" /* TODO <--- this needs removing */ && this.state.room.assignmentSurvey && ((this.state.room.isOpen)?\n \n : \n \n )}\n {this.state.user.userID == \"73295\" /* TODO <--- this needs removing */ &&\n \n }\n {!this.state.room?.vimeo && this.treeMode() != 'treeOnly' && (\n this.state.room?.visibleUsers === null ?\n \n :\n \n )}\n {this.state.room.videoClip && \n \n }\n\n {['show','user'].includes(this.treeMode()) && [\"73295\", \"113624\"].includes(this.state.user?.userID) &&\n \n }\n \n {this.state.user?.rank == \"mod\" &&
\n }\n const toSearchOption = (q) => {\n let thisTranslation = (this.state?.language && this.state.language != 'en' && q.translations?.find(tr => tr.language == this.state.language)) || null;\n return ({\n name: thisTranslation?.translatedText || q.questionText,\n value: q.questionText,\n question: q,\n translated: !!thisTranslation\n })\n };\n const treeSearchOptions = [{name: \"\", value: \"\"}];\n if (!this.state?.searchSuggestionsOnly){\n treeSearchOptions.push(\n {\n type: 'group',\n name: 'Hierarchy items',\n items:\n this.state?.survey?.questions.filter(q => q.type != 'suggestion').map(toSearchOption).sort((a,b) => a.value.localeCompare(b.value))\n }\n );\n }\n treeSearchOptions.push(\n {\n type: 'group',\n name: 'Suggestions',\n items:\n this.state?.survey?.questions.filter(q => q.type == 'suggestion').map(toSearchOption).sort((a,b) => {\n let aScore = (a.question.upvotes?.length || 0) - (a.question.downvotes?.length || 0);\n let bScore = (b.question.upvotes?.length || 0) - (b.question.downvotes?.length || 0);\n return bScore - aScore;\n }\n )\n }\n );\n contents = \n
}\n \n this.setState({userListOpen: !this.state.userListOpen})}\n >\n User list
\n {\n this.state.userListOpen &&\n \n \n {this.state.userList.filter(u => u.lastRoom == this.state.room?.id)\n .map(u => {\n return (\n
\n }\n
\n this.setState({userListOpen: !this.state.userListOpen})}\n >\n User list
\n {\n this.state.userListOpen &&\n | {u.username} | \n\n {(u.username != this.state.user.username)?\n \n | \n
\n {this.treeMode() != 'hide' && \n
;\n }\n \n return (\n contents\n );\n }\n\n \n}","import React, { useState, useEffect } from 'react';\nimport { useHistory } from 'react-router-dom';\nimport { useParams } from 'react-router';\n\nfunction GuestRoom(props) {\n\n const [username, setUsername] = useState([\"\"]);\n const [joining, setJoining] = useState(false);\n let history = useHistory();\n let { roomId } = useParams();\n\n const handleInputChange = (e) => {\n e.preventDefault();\n setUsername(e.target.value);\n }\n\n const handleJoin = (e) => {\n const params = new URLSearchParams(window.location.search);\n const treeOnly = params.get('tree-only')\n e.preventDefault();\n setJoining(true);\n fetch('/api/user/guestkey/'+encodeURIComponent(username))\n .then(\n setTimeout(() => {\n history.push('/sharedtree/' + roomId + (treeOnly? \"?tree-only\" : \"\"))\n }, 500)\n )\n }\n\n return (\n \n {this.state?.branding == \"wcd\" &&
}\n \n \n {this.state?.room?.treeMode == \"user\" && this.setState({viewTreeUser: false})}\n className=\"btn btn-info mr-1 mt-3\"\n >\n Hide Tree\n }\n {intro}\n {modTools}\n {this.state?.showGuestModal &&\n this.setState({showGuestModal: false, onGuestModalLogin: null})}\n afterToken={() => {\n this.populateUserData(() => {\n this.createConnection();\n this.state.onGuestModalLogin && this.state.onGuestModalLogin();\n this.setState({showGuestModal: false, onGuestModalLogin: null});\n });\n }}\n >\n \n You're currently viewing part of the tree outside of the focus set by the moderators.\n You can return to the focused part of the tree by clicking {e.preventDefault(); this.setState({viewRootOverride: false})}}>here.\n \n }\n {this.state?.survey?\n (this.state.room.viewRoot && !this.state.viewRootOverride)?\n this.renderQuestions(this.state.room.viewRoot, true)\n :\n this.renderQuestions(null)\n :\n <>\n
\n To add to or change the document, you must log in as a guest.
\n \n }\n { this.state?.survey &&\n\n
\n }\n {this.state?.viewRootOverride &&\n \n {this.state?.room?.enableSearch &&\n <>\n \n \n }\n
\n {this.state?.room?.enableTranslations && \n {console.log(value); this.setState({language: value}, () => {this.populateSurveyData();})}}\n />\n {this.state?.openTranslationModal && \n tr.language == (this.state.language || 'en'))}\n item={this.state.openTranslationModal}\n saveAndClose={this.handleCloseTranslateModal}\n bypassLengthLimit={this.state.room?.bypassLengthLimit}\n />\n }\n
}\n Loading the room...
\nThis may take a few seconds. If you're still having trouble seeing this tree after a few seconds, try refreshing the page.
\nIf you continue to see this message, then visit our help page, where you may find a workaround, or live support from our team.
\n {this.state?.errors?.map(e =>{e.header && {e.header}} {e.message}
)}\n \n \n }\n {this.state?.language && this.state.language != 'en' && (\n \n \n
\n )}\n {this.state?.room?.status == 'suggestion' &&\n \n Use the
pressing
\n \n }\n \n { this.state?.room?.treeMode == \"user\" && !this.state.viewTreeUser &&\n \n }\n { (this.treeMode() == 'hide' || (this.treeMode() == 'user' && !this.state.viewTreeUser)) && [\"73295\", \"113624\"].includes(this.state.user?.userID) &&\n \n }\n { this.treeMode() == 'hide' && [\"73295\", \"113624\"].includes(this.state.user?.userID) &&\n \n }\n
\n {this.treeMode() == 'treeOnly' || (\n (this.state?.room?.vimeo && \n \n {(this.state?.user?.username && this.state?.room?.id)?\n \n :null}\n \n
\n )}\n \n
\n )\n}\n\nexport default GuestRoom; ","import React, { useState, useEffect, useRef } from 'react';\nimport { FormGroup, FormText, Input, Label, Modal } from 'reactstrap';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faDropbox } from '@fortawesome/free-brands-svg-icons';\nimport { faAt, faVideo } from '@fortawesome/free-solid-svg-icons';\nimport SelectSearch, { fuzzySearch } from 'react-select-search';\n\nexport default function ChangeModeModal(props) {\n \n const [room, setRoom] = useState(props.room);\n\n const save = (e) => {\n props.saveAndClose(room);\n }\n const close = (e) => {\n props.saveAndClose();\n }\n\n const fullContents = <>\n Guest login
\n {joining?\nPlease wait while we log you in...
\n :\n\n
\n }\n \n To join this room without an andeye account, enter a guest username and press Join
\n \n \n\n
\n Change settings for this room
\n \n \n \n \n
\n setRoom(prev => ({...prev, survey, viewRoot: null}))}\n />\n
\n \n \n \n {let vimeo = e.target.value || null; setRoom(prev => ({...prev, vimeo}))}}\n id=\"vimeoInput\"\n aria-describedby=\"vimeoInputHelp\"\n />\n \n Adds a Vimeo player instead of a Twilio call\n \n \n \n \n {let youTube = e.target.value || null; setRoom(prev => ({...prev, youTube}))}}\n id=\"youTubeInput\"\n aria-describedby=\"youTubeInputHelp\"\n />\n \n Adds a YouTube player. Note that Vimeo takes priority if also set.\n \n \n
\n \n;\n\n return (\n \n
\n
\n
\n \n {let readOnlyMode = e.target.value; setRoom(prev => ({...prev, readOnlyMode}))}}\n id=\"readOnlyCheck\"\n aria-describedby=\"readOnlyCheckHelp\"\n />\n \n \n Prevents non-mods from adding items, except suggestions.\n \n
\n \n
\n \n {let enableTwisties = e.target.value; setRoom(prev => ({...prev, enableTwisties}))}}\n id=\"enableTwistiesCheck\"\n aria-describedby=\"enableTwistiesCheckHelp\"\n />\n \n \n Changes the navigation of the tree to 'twisties' which can be expanded.\n \n
\n \n
\n \n {let enableTranslations = e.target.value; setRoom(prev => ({...prev, enableTranslations}))}}\n id=\"translationsCheck\"\n aria-describedby=\"translationsCheckHelp\"\n />\n \n \n Allows users to change the language in the room and view translations.\n \n
\n \n
\n \n {let enableSearch = e.target.value; setRoom(prev => ({...prev, enableSearch}))}}\n id=\"searchCheck\"\n aria-describedby=\"searchCheckHelp\"\n />\n \n \n Display the search box for users to find items in the tree\n \n
\n \n
\n \n {let disableRankingMode = e.target.value; setRoom(prev => ({...prev, disableRankingMode}))}}\n id=\"disableRankingModeCheck\"\n aria-describedby=\"disableRankingModeCheckHelp\"\n />\n \n \n Removes the ability for mods to switch the room to ranking mode\n \n
\n \n \n \n {let treeMode = e.target.value; setRoom(prev => ({...prev, treeMode}))}}\n aria-described-by=\"treeModeSelectHelp\"\n >\n \n \n \n \n \n \n Sets the mode for the tree. Change this on the room page for it to be pushed to all clients immediately.\n \n
\n \n \n \n {let status = e.target.value; setRoom(prev => ({...prev, status}))}}\n aria-described-by=\"statusSelectHelp\"\n >\n \n \n \n \n \n \n \n Sets the mode for the room. Don't set to Hub mode unless you know the implications\n \n
\n \n
;\n}\n\n\nexport default TwilioInfo;","import { faEdit } from '@fortawesome/free-regular-svg-icons';\nimport { faLanguage, faPencilAlt, faPlus, faQuestion, faRedoAlt, faTrash } from '@fortawesome/free-solid-svg-icons';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport React, { useState, useEffect } from 'react';\nimport { useParams } from 'react-router';\nimport { useHistory, Link } from 'react-router-dom';\nimport { Badge, Button } from 'reactstrap';\nimport ChangeModeModal from './ChangeModeModal';\nimport TwilioInfo from './TwilioInfo';\n\nfunction Admin(props) {\n\n const [rooms, setRooms] = useState([]);\n const [twilioRooms, setTwilioRooms] = useState([]);\n const [surveys, setSurveys] = useState([]);\n const [editingRoom, setEditingRoom] = useState(null);\n let history = useHistory();\n\n useEffect(() => {\n loadSurveys();\n loadRooms();\n loadTwilioRooms();\n },[]);\n\n const loadRooms = () => {\n fetch(`/api/room`, {credentials: \"include\"})\n .then(response => response.json())\n .then(data => {\n console.log(data);\n setRooms(data);\n });\n }\n\n useEffect(() => {\n if (rooms) {\n rooms.filter(r => r.needsUpdate).forEach(r => {\n return fetch(`/api/room/${r.id}`, {\n method: 'PUT',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify(r)\n })\n .then (res => {\n if (res.ok) {\n r.needsUpdate = false;\n setRooms(prev => ([...prev.filter(room=>room.id != r.id), r]));\n }\n })\n });\n }\n },[rooms]);\n \n const loadTwilioRooms = () => {\n fetch(`https://interactive.andeye.com:9443/twilio/rooms`)\n .then(response => response.json())\n .then(data => {\n console.log(data);\n setTwilioRooms(data);\n });\n }\n\n const loadSurveys = () => {\n fetch(`/api/survey`, {credentials: \"include\"})\n .then(response => response.json())\n .then(data => {\n console.log(data);\n setSurveys(data);\n });\n }\n const handleDupeSurvey = (e) => {\n let survey = surveys.find(s => s.id == e.currentTarget.dataset.survey);\n let newSurvey = {...survey, id: null, event: survey.event += \" (Copy)\"}\n \n fetch(`/api/survey`, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify(newSurvey)\n })\n .then(loadSurveys)\n }\n\n const handleMakeRoom = (e) => {\n let surveyId = e.currentTarget.dataset.survey;\n let room = {survey: surveyId, status: \"issue\"}\n \n fetch(`/api/room`, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify(room)\n })\n .then(loadRooms)\n }\n\n const handleNewAssignedMod = (roomId, username) => {\n let thisRoom = rooms.find(r => r.id == roomId);\n thisRoom.assignedMods || (thisRoom.assignedMods = []);\n if (!thisRoom.assignedMods.includes(username)) thisRoom.assignedMods.push(username);\n thisRoom.needsUpdate = true;\n setRooms(prev => ([...prev.filter(r=>r.id != roomId), thisRoom]))\n }\n\n const handleRemoveAssignedMod = (roomId, username) => {\n let thisRoom = rooms.find(r => r.id == roomId);\n thisRoom.assignedMods || (thisRoom.assignedMods = []);\n thisRoom.assignedMods = thisRoom.assignedMods.filter(u => u != username);\n thisRoom.needsUpdate = true;\n setRooms(prev => ([...prev.filter(r=>r.id != roomId), thisRoom]))\n }\n const applyRoomChange = (roomId, change) => {\n console.log(change)\n if (change){\n let thisRoom = rooms.find(r => r.id == roomId);\n thisRoom = {...thisRoom, ...change, needsUpdate: true}\n setRooms(prev => ([...prev.filter(r=>r.id != roomId), thisRoom]))\n }\n setEditingRoom(null);\n }\n\n return (\n {participants?.length}
\n {participants?.map(p => \n{p.identity}
\n )}\n \n \n \n
\n \n \n
\n {editingRoom &&\n r.id == editingRoom)}\n saveAndClose={(changedRoom) => {applyRoomChange(editingRoom,changedRoom)}}\n treeList={surveys.map(s => ({name: `${s.event} (...${s.id.substr(-6)})`, value: s.id}))}\n />}\n
\n )\n}\n\nexport default Admin;","\nimport { useParams } from 'react-router';\n\nimport React, { useState, useEffect } from 'react';\n\n\nfunction SuggestionsTable(props) {\n\n \n let { surveyId } = useParams();\n\n const [suggestions, setSuggestions] = useState([]);\n\n useEffect(() => {\n fetch(`/api/survey/${surveyId}/suggestions`)\n .then(response => response.json())\n .then(suggestions => setSuggestions(suggestions));\n },[]);\n\n return (\n Admin Dashboard
\nSurveys/Documents
\n| ID | \nName | \nDuplicate | \nMake an issues room | \n
|---|---|---|---|
| \n {survey.id}\n | \n\n {survey.event}\n | \n\n {/* {survey.questions.find(q => [\"issue\",\"solution\", \"category\"].includes(q.type))? */}\n \n {/* :null} */}\n | \n\n {/* {survey.questions.find(q => [\"issue\",\"solution\", \"category\"].includes(q.type))? */}\n \n {/* :null} */}\n | \n
Rooms\n \n
\n| ID | \nSurvey | \nAssignment | \nTwilio | \nEst. Assignments | \nAssigned Mods | \n
|---|---|---|---|---|---|
| \n {room.id}\n \n \n {room.status == \"issue\" && | \n \n {survey? \n `${survey.event} (...${survey.id.substr(-6)})`\n : \"None\"}\n | \n\n {room.topic?\n room.isOpen?\n {room.topic} \n :\n{room.topic} (closed) \n :null}\n | \n \n {twilioRooms.find(tr => tr.uniqueName == room.id) && \n | \n \n {room.testAssignedUsers?.length}\n | \n\n \n \n \n \n \n
| \n
\n \n \n
\n
\n )\n}\n\nexport default SuggestionsTable;","import React, { useState, useEffect, useRef } from 'react';\nimport { Modal } from 'reactstrap';\nimport styles from './ExternalCallInfoModal.module.css';\nimport classNames from 'classnames/bind';\n\nlet cx = classNames.bind(styles);\n\nfunction ExternalCallInfoModal(props) {\n\n const [myProfile, _setMyProfile] = useState(props.myProfile);\n const [linkError, setLinkError] = useState(null);\n const myProfileRef = useRef(props.myProfile);\n\n const handleUseExternalVideoChange = (e) => {\n let newProfile = {...myProfileRef.current, useExternalVideo: e.currentTarget.checked}\n myProfileRef.current = newProfile;\n _setMyProfile(newProfile);\n console.log(newProfile);\n }\n const handleExternalCallLinkChange = (e) => {\n let newProfile = {...myProfileRef.current, externalCallLink: e.currentTarget.value}\n myProfileRef.current = newProfile;\n try {\n let url = new URL(e.currentTarget.value)\n setLinkError(null);\n } catch (e) {\n console.log(e);\n setLinkError(true);\n }\n _setMyProfile(newProfile);\n console.log(newProfile);\n }\n const handleSaveProfile = (e) => {\n console.log(myProfile);\n props.onClose(myProfile);\n }\n\n const handleAutoSave = (e) => {\n if (props.autosave) handleSaveProfile(e);\n }\n\n const form = <>\n Suggestions
\n\n| User | \nSuggestion | \nParent | \n
|---|---|---|
| \n {s.user}\n | \n\n {s.response}\n | \n\n {s.parent.includes('Suggestion_') && suggestions.find(p => p.questionText == s.parent)?.response + ' (also a suggestion)' || s.parent}\n | \n
\n If you can’t use andeye Video you can switch to requesting that others\n join you on Zoom, Teams, or another platform\n
\n\n \n \n
\n {myProfile.useExternalVideo && \n \n
\n }\n\n ;\n\n const fullContents = <>\n \n 1. Open a Teams/Zoom/other call and start your video\n
\n\n 2. Copy the link to the call\n
\n\n \n
\n \n Please enter a meeting room link before saving, or uncheck this feature.\n
\n }\n {!!myProfile.externalCallLink?.length && linkError &&\n \n Your link is invalid. Please try pasting the link again\n
\n }\n \n 4. Click save changes below\n
\n\n 5. Click 'Invite to {props.meetingInfo(myProfile.externalCallLink)?.serviceName || 'external'} call' for each person you'd like to join your call\n
\n\n 6. Important: Ensure you click 'Mark Call as Ended' on the system when you finish your {props.meetingInfo(myProfile.externalCallLink)?.serviceName || 'external'} call so others aren't sent to an empty room\n
\n\n
\n Change video platform
\n {!props.inline && }\n\n {form}\n
\n {!(props.autosave && props.inline) && }\n ;\n\n if (myProfile) {\n if (props.inline){\n return {fullContents}
;\n } else {\n return \n
\n Join external call
\n\n
\n \n ;\n\n return \n {props.creatorInfo?.nickname || props.callRoom.creator}'s room is hosted outside of the\n andeye platform. They have provided the following link:\n
\n\n {props.callRoom.externalLink}\n
\n\n andeye and event organisers are not responsible for external links,\n please satisfy yourself that the link is genuine before clicking.\n
\n\n Leave this pop-up open while in the call, and you will be shown as 'in a call'\n to other event participants. If you have left the call, click below\n
\n\n {e.target.onError=null; e.target.src = process.env.PUBLIC_URL + '/guest.png'}}\n />\n \n {props.isMyRoom? (props.callRoom.isExternal? \"Mark Call as Ended\" : \"End Call\") : \"Leave Call\"}\n \n }\n {props.isInvite && !props.isCurrentlyInAnyCall && \n \n {thisMeetingInfo?.icon && \n Join ongoing call\n \n :\n Call {props.myProfile?.useExternalVideo && `(${props.meetingInfo(props.myProfile.externalCallLink)?.serviceName || 'external'})`}\n )}\n {props.isCurrentlyInAnyCall && props.currentlyOngoingCall?.creator == props.myProfile?.username && (\n props.currentlyOngoingCall?.invitees?.includes(props.match.user)?\n \n Uninvite\n \n :\n \n Invite {props.myProfile?.useExternalVideo && `(${props.meetingInfo(props.myProfile.externalCallLink)?.serviceName || 'external'})`}\n \n )}\n
\n )\n}\nexport default CallRoomItem;","import React, { useState, useEffect, useRef } from 'react';\nimport { Modal } from 'reactstrap';\n//import styles from './RecorderLinkButtonAndModal.module.css';\n//import classNames from 'classnames/bind';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faDropbox } from '@fortawesome/free-brands-svg-icons';\nimport { faAt, faVideo } from '@fortawesome/free-solid-svg-icons';\n\n//let cx = classNames.bind(styles);\n\nexport default function RecorderLinkButtonAndModal(props) {\n \n const [showModal, setShowModal] = useState(null);\n\n const fullContents = <>\n \n
\n {props.isCurrentlyInCall &&\n \n \n {props.isMyRoom? \"Your room\" : `${ownerProfile?.nickname || ownerProfile?.username || props.callRoom?.creator}`} \n \n {!props.isMyRoom && ownerProfile?.summary &&\n {ownerProfile?.summary}\n }\n
\n {!props.isMyRoom && ownerProfile?.wantsToTalk?.length >0 &&\n \n Wants to discuss {ownerProfile?.wantsToTalk}\n \n }\n {!props.isMyRoom && ownerProfile?.reason?.length >0 &&\n \n {ownerProfile?.reason}\n \n }\n \n {filteredParticipants?.length > 0 &&\n \n also with {filteredParticipants.map(p => (props.userProfileIfExist(p)?.nickname) || p).join(', ')}\n \n }\n {\n props.matchIsInOtherCall && !props.existingInviteWithUser &&\n \n In another call\n \n }\n {\n props.existingInviteWithUser && props.existingInviteWithUser.creator != props.match?.user &&\n \n Currently in a call with {props.userProfileIfExist(props.existingInviteWithUser.creator)?.nickname || props.existingInviteWithUser.creator} where you are invited\n \n }\n {\n props.existingInviteWithUser && props.existingInviteWithUser.creator == props.match?.user &&\n \n {props.userProfileIfExist(props.existingInviteWithUser.creator)?.nickname || props.existingInviteWithUser.creator} has already invited you\n \n }\n \n
\n Record your Action Pledge
\n {!props.inline && }\n\n
\n {!(props.autosave && props.inline) && }\n;\n\n return (\n <>\n Please try to keep your pledge as succinct as possible (<1 minute)
\nYou may want to start your Action Pledge by saying \"I’m [name] and I pledge to...”
\nYou can record your pledge directly on the andeye system here:
\n\n
\n Otherwise you can upload your pledge:\n
\n If neither work for you, get in touch:\n
\n By submitting a pledge you give andeye Productions Ltd permission to edit, collate and distribute your pledge via any medium\n
\n\n {showTree &&\n <>\n \n
\n {callRoom && !callRoom.isExternal && myProfile && myProfile.username && (\n \n
\n \n }\n \n \n
\n \n userProfileIfExist(username, matches)}\n meetingInfo={meetingInfo}\n joinCall={joinCall}\n leaveCall={leaveCall}\n enableRealTimeButtons={(hub?.state === HubConnectionState.Connected)}\n isCurrentlyInCall={callRoom.isOpen && callRoom.currentParticipants?.includes(myProfile?.username)}\n />\n userProfileIfExist(username, matches)}\n meetingInfo={meetingInfo}\n joinCall={joinCall}\n leaveCall={leaveCall}\n isInvite={true}\n isCurrentlyInCall={false}\n isCurrentlyInAnyCall={!!callRoom}\n enableRealTimeButtons={(hub?.state === HubConnectionState.Connected)}\n />\n );\n \n })}\n \n }\n
\n \n
\n \n {callRoom?.isOpen && \n <>\n \n
\n {myProfile &&\n \n \n Help\n \n {/* \n Open the Call to Action\n */}\n {setShowExternalModal(true)}}\n >\n Can't access andeye Video?\n \n
\n Your current call:
\nIn your calls, please ask:
\n- \n
- What climate action do you want to take? \n
- How can we support each other? \n
- What’s the next step? \n
..and then repeat in other calls. When you're done, press the red button above and record your Action Pledge.
\n \n }\n {calls.filter(i => i.id != callRoom?.id && i.isOpen && i.invitees?.includes(myProfile?.username)).length > 0 && \n <>\nYou have invite(s):
\n {calls\n .filter(i => i.id != callRoom?.id && i.isOpen && i.invitees?.includes(myProfile?.username))\n .sort((a,b) => {\n // If one is a current call, bump it up\n if (a.isExternal - b.isExternal != 0) return a.isExternal - b.isExternal;\n // Else, keep the sort consistent by sorting by hash\n return a.id < b.id && 1 || -1;\n })\n .map(invite => {\n let filteredParticipants = invite.currentParticipants?.filter(i => i != myProfile?.username && i != invite.creator);\n let thisMeetingInfo = invite.externalLink? meetingInfo(invite.externalLink) : null;\n return (\nThese are your matches:
\n\n {\n matches\n ?.filter(m => m.lastSeen && m.lastSeen > new Date(new Date().getTime() - (6*60*1000)).toISOString())\n ?.map(m => ({\n ...m,\n inACall: (calls.find(c => c.isOpen && c.currentParticipants?.includes(m.user)) != null)\n }))\n ?.sort((a,b) => {\n // If one is a current call, bump it up\n // if (a.inACall) return 1;\n // if (b.inACall) return -1;\n // Else, if one has a higher score, bump it up\n if (a.score < b.score) return 1;\n if (b.score < a.score) return -1;\n // Else, keep the sort consistent by sorting by hash\n return a.user < b.user && 1 || -1;\n })\n .map(m => {\n // Find an invite from this user\n let userOtherCall = calls?.find(i => i.isOpen && (i.creator == m.user || i.currentParticipants?.includes(m.user)))\n // TODO rework this line to make efficient use of a subquery of above\n let existingInviteWithUser = calls?.find(i => i.isOpen && i.invitees?.includes(myProfile?.username) && (i.creator == m.user || i.currentParticipants?.includes(m.user)))\n return (\n userProfileIfExist(username, matches)}\n meetingInfo={meetingInfo}\n joinCall={joinCall}\n createWithUser={createWithUser}\n enableRealTimeButtons={(hub?.state === HubConnectionState.Connected)}\n isCurrentlyInAnyCall={!!callRoom}\n matchIsInOtherCall={!!userOtherCall}\n currentlyOngoingCall={callRoom}\n inviteToCall={inviteToCall}\n uninviteFromCall={uninviteFromCall}\n existingInviteWithUser={existingInviteWithUser}\n />\n )\n \n //
\n \n // 
{e.target.onError=null; e.target.src = process.env.PUBLIC_URL + '/guest.png'}} />\n // Join ongoing call\n // :\n // Call {myProfile?.useExternalVideo && `(${meetingInfo(myProfile.externalCallLink)?.serviceName || 'external'})`}\n // )}\n // {callRoom && callRoom.creator == myProfile?.username && (\n // callRoom?.invitees?.includes(m.user)?\n // \n // Uninvite\n // \n // :\n // \n // Invite {myProfile?.useExternalVideo && `(${meetingInfo(myProfile.externalCallLink)?.serviceName || 'external'})`}\n // \n // )}\n //
;\n }\n )\n }\n \n // {m.nickname || m.user} \n // {m.inACall && (in a call)}\n // {m.summary?.length > 0 && {m.summary}}\n // \n // {m.wantsToTalk?.length && Wants to talk about {m.wantsToTalk}}\n // {(existingInviteWithUser && existingInviteWithUser.creator != m.user) &&\n // \n // Currently in a call with {matches?.find(m => m.user == existingInviteWithUser.creator)?.nickname || existingInviteWithUser.creator} where you are invited\n // \n // }\n // {m.reason}\n //
\n // {!callRoom && (\n // existingInviteWithUser ? \n // \n \n
\n )}\n {callRoom && callRoom.isExternal && myProfile && myProfile.username && callRoom.creator != myProfile.username && (\n \n {myProfile &&\n
\n {myProfile && Action Pledge Recorder
\nPlease try to keep your pledge as succinct as possible - ideally 5-10 seconds.
\nPlease start your Action Pledge by saying \"I’m [name] and I pledge to...”
\nTo record:
\n- \n
- Ensure the system on the right of the page can see and hear you \n
- Click 'Join Now' \n
- When you're ready to record your Pledge, use the 'Start Recording' button \n
- Compose yourself for ~1 second then make your pledge \n
- Press 'Stop Recording' ~1 second after you're finished. The recording will be saved to our system. \n
- If you'd like to have another go, repeat steps 3-5 until you're happy with your Pledge. \n
\n If you cannot access the video handler to record, you can upload your pledge:\n
\n If neither work for you, please get in touch:\n
\n By submitting a pledge you give andeye Productions Ltd and their assigns permission in perpetuity to edit, collate and distribute your pledge via any medium.\n
\n\n \n
}\n \n )\n}\n","\nimport React, { useState } from 'react';\n\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faPlus, faTrash, faCheck, faTimes, faTrashAlt, faPlay } from '@fortawesome/free-solid-svg-icons';\n\nimport { Button, Input } from 'reactstrap';\n\nfunction QuestionRow(props) {\n\n const [newMcqOption, setNewMcqOption] = useState(\"\");\n const [newAnswer, setNewAnswer] = useState(\"\");\n\n const runQuestion = () => {\n return fetch(`/api/room/${props.roomId}/quiz`, {\n credentials: 'include',\n method: 'PATCH',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({\n id: props.roomId,\n activeQuizQuestion: props.question.id\n })\n })\n }\n\n // Change the question type (handles the dropdown change) and clear the options/answers fields\n const changeType = (e) => {\n let newType = e.currentTarget.value;\n console.log(newType);\n props.setQuestion({...props.question, type: newType, mcqOptions: [], answers: [], changed: true});\n }\n\n // Add an option to an MCQ question (handles the submission of the input box for MCQs)\n const handleNewMcqOption = (e) => {\n e.preventDefault();\n let mcqOptions = props.question.mcqOptions || [];\n mcqOptions.push(newMcqOption);\n setNewMcqOption(\"\");\n props.setQuestion({...props.question, mcqOptions, changed: true})\n }\n\n // Remove an option (runs on click of the delete button)\n const handleRemoveMcqOption = (a) => {\n let mcqOptions = props.question.mcqOptions || [];\n mcqOptions = mcqOptions.filter(ans => ans != a);\n props.setQuestion({...props.question, mcqOptions, changed: true})\n }\n\n // Mark an MCQ option as correct by adding it to the answer array\n const handleCorrectMCQ = (a) => {\n let answers = props.question.answers || [];\n if (!answers.includes(a)) answers.push(a);\n props.setQuestion({...props.question, answers, changed: true})\n }\n\n // Mark an MCQ option as incorrect by removing from the answer array\n const handleInorrectMCQ = (a) => {\n let answers = props.question.answers || [];\n answers = answers.filter(ans => ans != a);\n props.setQuestion({...props.question, answers, changed: true})\n }\n\n // Add an answer (for text questions), handles the submission of the input field\n const handleNewAnswer = (e) => {\n e.preventDefault();\n let answers = props.question.answers || [];\n if (!answers.includes(newAnswer)) answers.push(newAnswer);\n setNewAnswer(\"\");\n props.setQuestion({...props.question, answers, changed: true})\n }\n\n // Remove an answer (text questions)\n const handleRemoveAnswer = (a) => {\n let answers = props.question.answers || [];\n answers = answers.filter(ans => ans != a);\n props.setQuestion({...props.question, answers, changed: true})\n }\n\n return (\n \n
\n \n : null}\n {/* If a text-based question */}\n {props.question.type == \"text\"?\n - \n {props.question.mcqOptions?.map(a => {\n return (\n
- \n {a} {props.question.answers?.includes(a)?\n // Cross to mark as incorrect if it is currently correct\n handleInorrectMCQ(a)}>\n
\n \n :\n // Tick to mark as correct if currently not correct\n handleCorrectMCQ(a)}>\n\n \n } handleRemoveMcqOption(a)}>\n\n \n {/* Above: trash icon to remove the options */}\n )\n })}\n
\n
\n : null}\n - \n {props.question.answers.map(a => {\n return (\n
- \n {/* List the possible answers with a trash icon to remoev them */}\n {a}\n handleRemoveAnswer(a)}>\n
\n \n )\n })}\n
\n \n \n
\n \n
\n )\n}\n\nexport default RoundEditor;","import React, { useState, useEffect, useRef } from 'react';\nimport { useParams } from 'react-router';\n\nimport * as microsoftTeams from \"@microsoft/teams-js\";\n\nexport default function TeamsConfig(props) {\n\n const [log, setLog] = useState([\"Test log\"]);\n const [context, setContext] = useState(null);\n\n let { surveyId } = useParams();\n\n useEffect(() => {\n microsoftTeams.initialize();\n microsoftTeams.appInitialization.notifySuccess();\n microsoftTeams.settings.registerOnSaveHandler(function (saveEvent) {\n microsoftTeams.settings.setSettings({\n entityID: \"andeye\",\n contentUrl: `${window.location.origin}/sharedtree/61b32661604b6b9a2d527201`,\n suggestedTabName: \"andeye\",\n websiteUrl: `${window.location.origin}/sharedtree/61b32661604b6b9a2d527201`,\n });\n saveEvent.notifySuccess();\n });\n microsoftTeams.settings.setValidityState(true);\n microsoftTeams.getContext(setContext)\n \n }, []);\n\n\n\n\n\n if (context) {\n return Editing quiz questions
\n {// Only run this section if there is a room ID in the URL\n roomId && (\n <>\nSelected room
\n {!room &&\nLoading room information
\n }\n {room && !room.activeQuizQuestion &&\nNo quiz question currently running. Run one from below.
\n }\n {// If there is an active quiz question, display it and its responses\n room?.activeQuizQuestion && activeQuestion() &&\n <>\n{activeQuestion()?.questionText}
\n- \n {questionResponses\n .filter(qr => qr.question == room.activeQuizQuestion)\n .map(qr => (\n
- {qr.answer} ({qr.username}) \n {activeQuestion().answers.map(a=>a.trim().toLowerCase()).includes(qr.answer.trim().toLowerCase())?\n
\n :\n <>\n \n \n Mark correct\n \n \n }\n \n \n ))}\n
Questions
\n| Question | \nType | \nAnswer | \n {/*Points | */}\n\n |
|---|