diff options
Diffstat (limited to 'src/client/views/nodes/ComparisonBox.tsx')
| -rw-r--r-- | src/client/views/nodes/ComparisonBox.tsx | 62 |
1 files changed, 43 insertions, 19 deletions
diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx index 02ab76c2a..9eb5f6ca2 100644 --- a/src/client/views/nodes/ComparisonBox.tsx +++ b/src/client/views/nodes/ComparisonBox.tsx @@ -43,9 +43,8 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>() @observable private _inputValue = ''; @observable private _outputValue = ''; @observable private _loading = false; - @observable private _errorMessage = ''; - @observable private _outputMessage = ''; @observable private _isEmpty = false; + @observable _yRelativeToTop: boolean = true; public addToCollection: ((doc: Doc | Doc[], annotationKey?: string | undefined) => boolean) | undefined; @@ -76,8 +75,8 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>() componentDidMount() { this._props.setContentViewBox?.(this); reaction( - () => this._props.isSelected(), - selected => !selected && (this.childActive = false) + () => this._props.isSelected(), // when this reaction should update + selected => !selected && (this.childActive = false) // what it should update to ); } protected createDropTarget = (ele: HTMLDivElement | null, fieldKey: string, disposerId: number) => { @@ -283,8 +282,8 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>() }) } style={{ - background: usepath === 'alternate' ? 'white' : 'black', - color: usepath === 'alternate' ? 'black' : 'white', + background: this.revealOp === 'hover' ? 'gray' : usepath === 'alternate' ? 'white' : 'black', + color: this.revealOp === 'hover' ? 'black' : usepath === 'alternate' ? 'black' : 'white', display: 'inline-block', }}> <div key="alternate" className="formattedTextBox-flip"> @@ -303,7 +302,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>() this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate' ? ( <div className="dash-tooltip">Flip to front side to use GPT</div> ) : ( - <div className="dash-tooltip">Ask GPT to create an answer on the back side of the flashcard</div> + <div className="dash-tooltip">Ask GPT to create an answer on the back side of the flashcard based on your question on the front</div> ) }> <div style={{ position: 'absolute', bottom: '3px', right: '56px', cursor: 'pointer' }} onPointerDown={e => (!this.layoutDoc[`_${this._props.fieldKey}_usePath`] ? this.askGPT(GPTCallType.CHATCARD) : null)}> @@ -314,16 +313,17 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>() <div style={{ position: 'absolute', bottom: '3px', right: '80px', cursor: 'pointer' }} onPointerDown={e => { + // this.displayLabelHandler(e.target.value, e.clientY); const collectionArr: Doc[] = []; collectionArr.push(this.Document); const newCol = Docs.Create.CarouselDocument(collectionArr, { - _width: NumCast(this.layoutDoc['_' + this._props.fieldKey + '_width'], 250), - _height: NumCast(this.layoutDoc['_' + this._props.fieldKey + '_width'], 200), + _width: NumCast(this.layoutDoc['_' + this._props.fieldKey + '_width'], 250) + 50, + _height: NumCast(this.layoutDoc['_' + this._props.fieldKey + '_width'], 200) + 50, _layout_fitWidth: false, _layout_autoHeight: true, }); - newCol['x'] = e.clientX - 820; - newCol['y'] = e.clientY - 640; + newCol['x'] = this.layoutDoc['x']; + newCol['y'] = NumCast(this.layoutDoc['y']) + 50; this._props.addDocument?.(newCol); this._props.removeDocument?.(this.Document); this.Document.embedContainer = newCol; @@ -332,9 +332,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>() </div> </Tooltip> <Tooltip title={<div className="dash-tooltip">Hover to reveal</div>}> - <div - style={{ position: 'absolute', bottom: '3px', right: '25px', cursor: 'pointer' }} - onClick={e => (this.revealOp === 'hover' ? (this.layoutDoc[`_${this._props.fieldKey}_revealOp`] = 'flip') : (this.layoutDoc[`_${this._props.fieldKey}_revealOp`] = 'hover'))}> + <div style={{ position: 'absolute', bottom: '3px', right: '25px', cursor: 'pointer' }} onClick={e => this.handleHover()}> <FontAwesomeIcon color={this.revealOp === 'hover' ? 'blue' : 'black'} icon="layer-group" size="xl" /> </div> </Tooltip> @@ -361,6 +359,17 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>() if (this._inputValue) this.askGPT(GPTCallType.QUIZ); }; + @action handleHover = () => { + if (this.revealOp === 'hover') { + this.layoutDoc[`_${this._props.fieldKey}_revealOp`] = 'flip'; + this.Document.forceActive = false; + } else { + this.layoutDoc[`_${this._props.fieldKey}_revealOp`] = 'hover'; + this.Document.forceActive = true; + } + //this.revealOp === 'hover' ? (this.layoutDoc[`_${this._props.fieldKey}_revealOp`] = 'flip') : (this.layoutDoc[`_${this._props.fieldKey}_revealOp`] = 'hover'); + }; + @action handleRenderClick = () => { // Call the GPT model and get the output this.layoutDoc[`_${this._props.fieldKey}_usePath`] = undefined; @@ -448,6 +457,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>() const whichDoc = DocCast(this.dataDoc[whichSlot]); const targetDoc = DocCast(whichDoc?.annotationOn, whichDoc); const layoutString = targetDoc ? '' : this.testForTextFields(whichSlot); + // whichDoc['backgroundColor'] = this.layoutDoc['backgroundColor']; return targetDoc || layoutString ? ( <> @@ -500,20 +510,32 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>() // add text box to each side when comparison box is first created // (!this.dataDoc[this.fieldKey + '_0'] && this.dataDoc[this._props.fieldKey + '_0'] !== 'empty') if (!this.dataDoc[this.fieldKey + '_0'] && !this._isEmpty) { - const dataSplit = StrCast(this.dataDoc.data).split('Answer'); + const dataSplit = StrCast(this.dataDoc.data).split('Answer: '); const newDoc = Docs.Create.TextDocument(dataSplit[1]); // if there is text from the pdf ai cards, put the question on the front side. // eslint-disable-next-line prefer-destructuring - newDoc[DocData].text = dataSplit[1]; + // newDoc.text = dataSplit[1]; + newDoc['backgroundColor'] = 'lightgray'; this.addDoc(newDoc, this.fieldKey + '_0'); + // DocCast(this.dataDoc[this.fieldKey + '_0'])[DocData].text = dataSplit[1]; + // DocCast(this.dataDoc[this.fieldKey + '_0']).text = dataSplit[1]; + // console.log('HI' + DocCast(this.dataDoc[this.fieldKey + '_0']).text); + console.log('HEREEE' + StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_0']).text)?.Text)); } + if (!this.dataDoc[this.fieldKey + '_1'] && !this._isEmpty) { - const dataSplit = StrCast(this.dataDoc.data).split('Answer'); + const dataSplit = StrCast(this.dataDoc.data).split('Answer: '); const newDoc = Docs.Create.TextDocument(dataSplit[0]); + this.addDoc(newDoc, this.fieldKey + '_1'); // if there is text from the pdf ai cards, put the answer on the alternate side. // eslint-disable-next-line prefer-destructuring - newDoc[DocData].text = dataSplit[0]; - this.addDoc(newDoc, this.fieldKey + '_1'); + + // newDoc[DocData].text = dataSplit[0]; + // console.log('HEREEE' + StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text)); + // console.log('HI' + DocCast(this.dataDoc[this.fieldKey + '_1']).text); + // DocCast(this.dataDoc[this.props.fieldKey + '_1'])[DocData].text = dataSplit[0]; + // console.log('HEREEE' + StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_0']).text)?.Text)); + // DocCast(this.dataDoc[this.fieldKey + '_1'])[DocData].text = dataSplit[0]; } // render the QuizCards @@ -552,6 +574,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>() ); } + console.log('HEREEE2' + StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text)); // render a normal flashcard when not a QuizCard return ( <div @@ -566,6 +589,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>() }} // onPointerUp={() => (this._isAnyChildContentActive = true)} > + {StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text) === '' && !this.childActive ? <p className="explain">Enter text in the flashcard. </p> : null} {displayBox(`${this.fieldKey}_${side === 0 ? 1 : 0}`, side, this._props.PanelWidth() - 3)} {this._loading ? ( <div className="loading-spinner" style={{ position: 'absolute' }}> |