From f75f15ae58b57644c28d42446c176289bbe55dd4 Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 10 Oct 2024 18:27:25 -0400 Subject: adjusted hiding chrome for carousel. cleaned up some comparisonBox quiz code. removed create flashcard pile button from flashcard - would prefer carousel being added to marquee menu. --- src/client/views/nodes/ComparisonBox.tsx | 109 +++++++++++++++---------------- 1 file changed, 52 insertions(+), 57 deletions(-) (limited to 'src/client/views/nodes/ComparisonBox.tsx') diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx index 9852228fa..ccbe98257 100644 --- a/src/client/views/nodes/ComparisonBox.tsx +++ b/src/client/views/nodes/ComparisonBox.tsx @@ -1,7 +1,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Tooltip } from '@mui/material'; import axios from 'axios'; -import { IReactionDisposer, action, computed, makeObservable, observable, reaction } from 'mobx'; +import { IReactionDisposer, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import ReactLoading from 'react-loading'; @@ -30,6 +30,7 @@ import './ComparisonBox.scss'; import { DocumentView } from './DocumentView'; import { FieldView, FieldViewProps } from './FieldView'; import { FormattedTextBox } from './formattedText/FormattedTextBox'; +import { practiceMode } from '../collections/FlashcardPracticeUI'; const API_URL = 'https://api.unsplash.com/search/photos'; @@ -122,18 +123,11 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() )} {DocCast(this.Document.embedContainer)?.type_collection !== CollectionViewType.Freeform ? null : ( - <> - Create a flashcard pile}> -
this.createFlashcardPile([this.Document], false)}> - -
- - Create new flashcard stack based on text}> -
- -
- - + Create new flashcard stack based on text}> +
+ +
+ )} )} @@ -153,7 +147,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() this._frontSide = !this._frontSide; }; - @action handleRenderGPTClick = async () => { + @action handleRenderGPTClick = () => { const phonTrans = DocCast(this.Document.audio) ? DocCast(this.Document.audio).phoneticTranscription : undefined; if (phonTrans) { this._inputValue = StrCast(phonTrans); @@ -490,20 +484,22 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() } try { const res = await gptAPICall(questionText, GPTCallType.FLASHCARD); - if (!res) { - console.error('GPT call failed'); - return; - } - if (callType == GPTCallType.CHATCARD) { - DocCast(this.dataDoc[this.props.fieldKey + '_0'])[DocData].text = res; - } else if (callType == GPTCallType.QUIZ) { - this._frontSide = true; - this._outputValue = res.replace(/UserAnswer/g, "user's answer").replace(/Rubric/g, 'rubric'); - } else if (callType === GPTCallType.FLASHCARD) { + runInAction(() => { + if (!res) { + console.error('GPT call failed'); + return; + } + if (callType == GPTCallType.CHATCARD) { + DocCast(this.dataDoc[this.props.fieldKey + '_0'])[DocData].text = res; + } else if (callType == GPTCallType.QUIZ) { + this._frontSide = true; + this._outputValue = res.replace(/UserAnswer/g, "user's answer").replace(/Rubric/g, 'rubric'); + } else if (callType === GPTCallType.FLASHCARD) { + this._loading = false; + return res; + } this._loading = false; - return res; - } - this._loading = false; + }); return res; } catch (err) { console.error('GPT call failed', err); @@ -725,24 +721,33 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() if (this.Document._layout_isFlashcard) { const side = this._frontSide ? 1 : 0; + const dataSplit = StrCast(this.dataDoc.data).includes('Keyword: ') ? StrCast(this.dataDoc.data).split('Keyword: ') : StrCast(this.dataDoc.data).split('Answer: '); + const textCreator = (which: number, title: string, text: string) => { + const newDoc = Docs.Create.TextDocument(text, { + title, // + _layout_autoHeight: true, + _layout_centered: true, + text_align: 'center', + _layout_fitWidth: true, + }); + this.addDoc(newDoc, this.fieldKey + '_' + which); + return newDoc; + }; // add text box to each side when comparison box is first created if (!this.dataDoc[this.fieldKey + '_0'] && !this._isEmpty) { - const dataSplit = StrCast(this.dataDoc.data).includes('Keyword: ') ? StrCast(this.dataDoc.data).split('Keyword: ') : StrCast(this.dataDoc.data).split('Answer: '); - const newDoc = Docs.Create.TextDocument(dataSplit[1], { title: 'answer', _layout_autoHeight: true, _layout_centered: true, text_align: 'center', _layout_fitWidth: true }); - this.addDoc(newDoc, this.fieldKey + '_0'); + textCreator(0, 'answer', dataSplit[1]); } if (!this.dataDoc[this.fieldKey + '_1'] && !this._isEmpty) { - const dataSplit = StrCast(this.dataDoc.data).includes('Keyword: ') ? StrCast(this.dataDoc.data).split('Keyword: ') : StrCast(this.dataDoc.data).split('Answer: '); - const newDoc = Docs.Create.TextDocument(dataSplit[0], { title: 'question', _layout_autoHeight: true, _layout_centered: true, text_align: 'center', _layout_fitWidth: true }); - this.addDoc(newDoc, this.fieldKey + '_1'); + const question = textCreator(1, 'question', dataSplit[0] || 'hint: Enter a topic, select this document and click the stack button to have GPT create a deck of cards'); + Doc.SelectOnLoad = dataSplit[0] ? undefined : question; } - if (DocCast(this.Document.embedContainer) && DocCast(this.Document.embedContainer).practiceMode === 'quiz') { + if (DocCast(this.Document.embedContainer).practiceMode === practiceMode.QUIZ) { const text = StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text); return ( -
+

{text}

Return to all flashcards and add text to both sides.

@@ -757,38 +762,28 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() readOnly={this._frontSide}> {this._loading ? ( -
+
) : null}
-
-
this.openContextMenu(e.clientX, e.clientY, false)} - style={{ position: 'absolute', top: '5px', left: '11px', zIndex: '100', width: '5px', height: '5px', cursor: 'pointer' }}> - +
+
this.openContextMenu(e.clientX, e.clientY, false)}> +
- -
this.openContextMenu(e.clientX, e.clientY, true)} style={{ position: 'absolute', top: '5px', left: '50px', zIndex: '100', cursor: 'pointer' }}> - +
this.openContextMenu(e.clientX, e.clientY, true)} style={{ left: '50px', zIndex: '100' }}> +
- - - {!this._frontSide ? ( - - ) : ( - - )} +
@@ -804,7 +799,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() onMouseLeave={() => this.hoverFlip(false)}> {displayBox(`${this.fieldKey}_${side === 0 ? 1 : 0}`, side, this._props.PanelWidth() - 3)} {this._loading ? ( -
+
) : null} -- cgit v1.2.3-70-g09d2