diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/collections/CollectionCarouselView.tsx | 207 | ||||
| -rw-r--r-- | src/client/views/nodes/ComparisonBox.tsx | 4 |
2 files changed, 153 insertions, 58 deletions
diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx index 8da808065..979f7ea2a 100644 --- a/src/client/views/collections/CollectionCarouselView.tsx +++ b/src/client/views/collections/CollectionCarouselView.tsx @@ -2,7 +2,7 @@ /* eslint-disable jsx-a11y/click-events-have-key-events */ /* eslint-disable react/jsx-props-no-spreading */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { computed, makeObservable, observable } from 'mobx'; +import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { StopEvent, returnFalse, returnOne, returnTrue, returnZero } from '../../../ClientUtils'; @@ -22,11 +22,16 @@ import { CollectionSubView } from './CollectionSubView'; import { Tooltip } from '@mui/material'; enum cardMode { - PRACTICE = 'practice', + // PRACTICE = 'practice', STAR = 'star', - QUIZ = 'quiz', + // QUIZ = 'quiz', ALL = 'all', } +enum practiceMode { + PRACTICE = 'practice', + QUIZ = 'quiz', + NORMAL = 'normal', +} enum practiceVal { MISSED = 'missed', CORRECT = 'correct', @@ -34,7 +39,8 @@ enum practiceVal { @observer export class CollectionCarouselView extends CollectionSubView() { private _dropDisposer?: DragManager.DragDropDisposer; - @observable private _message = 'Drag a document'; + @observable private _practiceMessage: string | undefined; + @observable private _filterMessage: string | undefined; get practiceField() { return this.fieldKey + "_practice"; } // prettier-ignore get sideField() { return "_" + this.fieldKey + "_usePath"; } // prettier-ignore get starField() { return this.fieldKey + "_star"; } // prettier-ignore @@ -43,6 +49,7 @@ export class CollectionCarouselView extends CollectionSubView() { super(props); makeObservable(this); this.layoutDoc.filterOp = cardMode.ALL; + this.layoutDoc.practiceMode = practiceMode.NORMAL; this.layoutDoc._carousel_index = 0; } @@ -64,6 +71,13 @@ export class CollectionCarouselView extends CollectionSubView() { return NumCast(this.layoutDoc.caption_xMargin, 50); } + @action setPracticeMessage = (mes: string | undefined) => { + this._practiceMessage = mes; + }; + @action setFilterMessage = (mes: string | undefined) => { + this._filterMessage = mes; + }; + move = (dir: number) => { const moveToCardWithField = (match: (doc: Doc) => boolean): boolean => { let startInd = (NumCast(this.layoutDoc._carousel_index) + dir) % this.carouselItems.length; @@ -76,26 +90,69 @@ export class CollectionCarouselView extends CollectionSubView() { } return match(this.carouselItems?.[NumCast(this.layoutDoc._carousel_index)].layout); }; - switch (StrCast(this.layoutDoc.filterOp)) { - case cardMode.STAR: // go to a flashcard that is starred, skip the ones that aren't - if (!moveToCardWithField((doc: Doc) => !!doc[this.starField])) { - // this.layoutDoc._carousel_index - this.layoutDoc.filterOp = undefined; // if there aren't any starred, show all cards - this._message = 'No starred items. Return to All to star documents.' - } - break; - case cardMode.PRACTICE: // go to a new index that is missed, skip the ones that are correct - if (!moveToCardWithField((doc: Doc) => doc[this.practiceField] !== practiceVal.CORRECT)) { - this.layoutDoc.filterOp = undefined; // if all of the cards are correct, show all cards and exit practice mode - this._message = 'Finished! Return to All.' - this.carouselItems.forEach(item => { // reset all the practice values - item.layout[this.practiceField] = undefined; - }); - // this.layoutDoc._carousel_index = -1; - } - break; - default: moveToCardWithField(returnTrue); - } // prettier-ignore + + if (this.layoutDoc.practiceMode === practiceMode.PRACTICE && this.layoutDoc.filterOp !== cardMode.STAR) { + if (!moveToCardWithField((doc: Doc) => doc[this.practiceField] !== practiceVal.CORRECT)) { + //this.layoutDoc.filterOp = undefined; // if all of the cards are correct, show all cards and exit practice mode + this._practiceMessage = 'Finished! Return to All - BUTTONS??.'; + this.carouselItems.forEach(item => { + // reset all the practice values + item.layout[this.practiceField] = undefined; + }); + // this.layoutDoc._carousel_index = -1; + } + } else if (this.layoutDoc.practiceMode !== practiceMode.PRACTICE && this.layoutDoc.filterOp === cardMode.STAR) { + if (!moveToCardWithField((doc: Doc) => !!doc[this.starField])) { + //this.layoutDoc.filterOp = undefined; // if there aren't any starred, show all cards + this._filterMessage = 'No starred items. Unselect this view to see all flashcards and star them.'; + } + } else if (this.layoutDoc.practiceMode === practiceMode.PRACTICE && this.layoutDoc.filterOp === cardMode.STAR) { + if (!moveToCardWithField((doc: Doc) => doc[this.practiceField] !== practiceVal.CORRECT && doc[this.starField] === true)) { + this._practiceMessage = 'New message.'; + } + } else { + moveToCardWithField(returnTrue); + } + + // if (this.layoutDoc.practiceMode === practiceMode.PRACTICE && this.layoutDoc.filterOp === cardMode.STAR) { + // if (!moveToCardWithField((doc: Doc) => doc[this.practiceField] !== practiceVal.CORRECT) && !moveToCardWithField((doc: Doc) => doc[this.starField] === true)) { + // this._practiceMessage = 'New message.'; + // } else moveToCardWithField(returnTrue); + // return; + // } + // switch (StrCast(this.layoutDoc.practiceMode)) { + // // case practiceMode.QUIZ: // go to a flashcard that is starred, skip the ones that aren't + // // if (!moveToCardWithField((doc: Doc) => !!doc[this.starField])) { + // // // this.layoutDoc._carousel_index + // // //this.layoutDoc.filterOp = undefined; // if there aren't any starred, show all cards + // // this._message = 'No starred items. Unselect this view to see all flashcards and star them.' + // // } + // // break; + // case practiceMode.PRACTICE: // go to a new index that is missed, skip the ones that are correct + // if (!moveToCardWithField((doc: Doc) => doc[this.practiceField] !== practiceVal.CORRECT)) { + // //this.layoutDoc.filterOp = undefined; // if all of the cards are correct, show all cards and exit practice mode + // this._practiceMessage = 'Finished! Return to All - BUTTONS??.' + // this.carouselItems.forEach(item => { // reset all the practice values + // item.layout[this.practiceField] = undefined; + // }); + // // this.layoutDoc._carousel_index = -1; + // } + // break; + // default: moveToCardWithField(returnTrue); + + // } // prettier-ignore + + // switch (StrCast(this.layoutDoc.filterOp)) { + // case cardMode.STAR: // go to a flashcard that is starred, skip the ones that aren't + // if (!moveToCardWithField((doc: Doc) => !!doc[this.starField])) { + // //this.layoutDoc.filterOp = undefined; // if there aren't any starred, show all cards + // this._filterMessage = 'No starred items. Unselect this view to see all flashcards and star them.'; + // } + // break; + // default: + // break; + // // if (this.layoutDoc.practiceMode === practiceMode.PRACTICE) moveToCardWithField(returnTrue); + // } }; /** @@ -121,6 +178,7 @@ export class CollectionCarouselView extends CollectionSubView() { e.stopPropagation(); const curDoc = this.carouselItems[NumCast(this.layoutDoc._carousel_index)]; curDoc.layout[this.starField] = curDoc.layout[this.starField] ? undefined : true; + // if (!curDoc.layout[this.starField]) this.move(1); // this.layoutDoc._carousel_index = undefined; }; @@ -142,16 +200,42 @@ export class CollectionCarouselView extends CollectionSubView() { onContentDoubleClick = () => ScriptCast(this.layoutDoc.onChildDoubleClick); onContentClick = () => ScriptCast(this.layoutDoc.onChildClick); captionWidth = () => this._props.PanelWidth() - 2 * this.marginX; + setPracticeMode = (mode: practiceMode) => { + this.layoutDoc.practiceMode = mode; + this.carouselItems?.map(doc => (doc.layout[this.practiceField] = undefined)); + switch (mode) { + case practiceMode.QUIZ: + this.carouselItems?.map(doc => (doc.layout[this.sideField] = undefined)); + break; + case practiceMode.NORMAL: + this.setPracticeMessage(undefined); + break; + default: + break; + } + }; setFilterMode = (mode: cardMode) => { this.layoutDoc.filterOp = mode; - console.log('MODE' + mode); - console.log('FILT' + this.layoutDoc.filterOp + ';'); - if (mode == cardMode.STAR) this.move(1); - if (mode == cardMode.QUIZ) { - this.carouselItems?.map(doc => (doc.layout[this.sideField] = undefined)); + switch (mode) { + case cardMode.STAR: + this.move(1); + break; + default: + this.setFilterMessage(undefined); } - this.carouselItems?.map(doc => (doc.layout[this.practiceField] = undefined)); + + // if (mode === practiceMode.QUIZ) { + // this.carouselItems?.map(doc => (doc.layout[this.sideField] = undefined)); + // this.layoutDoc.practiceMode = mode; + // } + // if (mode === practiceMode.PRACTICE) this.layoutDoc.practiceMode = mode; + // if (mode === practiceMode.NORMAL) { + // this.layoutDoc.practiceMode = mode; + // if (this.layoutDoc.filterOp === cardMode.STAR) this.setMessage('No starred items. Unselect this filter to star cards.'); + // } + // this.carouselItems?.map(doc => (doc.layout[this.practiceField] = undefined)); }; + // specificMenu = (): void => { // const cm = ContextMenu.Instance; @@ -221,32 +305,43 @@ export class CollectionCarouselView extends CollectionSubView() { <div key="star" className="carouselView-star" onClick={this.star}> <FontAwesomeIcon icon="star" color={this.carouselItems?.[NumCast(this.layoutDoc._carousel_index)].layout[this.starField] ? 'yellow' : 'gray'} size="1x" /> </div> - <div key="remove" className="carouselView-remove" onClick={e => this.setPracticeVal(e, practiceVal.MISSED)} style={{ visibility: this.layoutDoc.filterOp === cardMode.PRACTICE ? 'visible' : 'hidden' }}> - <FontAwesomeIcon icon="xmark" color="red" size="1x" /> - </div> - <div key="check" className="carouselView-check" onClick={e => this.setPracticeVal(e, practiceVal.CORRECT)} style={{ visibility: this.layoutDoc.filterOp === cardMode.PRACTICE ? 'visible' : 'hidden' }}> - <FontAwesomeIcon icon="check" color="green" size="1x" /> - </div> + {this.layoutDoc.practiceMode === practiceMode.PRACTICE ? ( + <div> + <div key="remove" className="carouselView-remove" onClick={e => this.setPracticeVal(e, practiceVal.MISSED)}> + <FontAwesomeIcon icon="xmark" color="red" size="1x" /> + </div> + <div key="check" className="carouselView-check" onClick={e => this.setPracticeVal(e, practiceVal.CORRECT)}> + <FontAwesomeIcon icon="check" color="green" size="1x" /> + </div> + </div> + ) : null} </> ); } + togglePracticeMode = (mode: practiceMode) => { + if (mode === this.layoutDoc.practiceMode) this.setPracticeMode(practiceMode.NORMAL); + else this.setPracticeMode(mode); + }; + toggleFilterMode = () => { this.layoutDoc.filterOp === cardMode.STAR ? this.setFilterMode(cardMode.ALL) : this.setFilterMode(cardMode.STAR)}; //prettier-ignore + setColor = (mode: practiceMode | cardMode, which: string) => { return which === mode ? 'white' : 'light gray'}; //prettier-ignore + @computed get menu() { return ( <div className="carouselView-menu"> <Tooltip title="Practice flashcards using GPT"> - <div key="back" className="carouselView-quiz" onClick={e => (this.layoutDoc.filterOp === cardMode.QUIZ ? this.setFilterMode(cardMode.ALL) : this.setFilterMode(cardMode.QUIZ))}> - <FontAwesomeIcon icon="file-pen" color={this.layoutDoc.filterOp === cardMode.QUIZ ? 'white' : 'light gray'} size="1x" /> + <div key="back" className="carouselView-quiz" onClick={e => this.togglePracticeMode(practiceMode.QUIZ)}> + <FontAwesomeIcon icon="file-pen" color={this.setColor(practiceMode.QUIZ, StrCast(this.layoutDoc.practiceMode))} size="1x" /> </div> </Tooltip> - <Tooltip title={this.layoutDoc.filterOp === cardMode.PRACTICE ? 'Exit practice mode' : 'Practice flashcards manually'}> - <div key="back" className="carouselView-practice" onClick={e => (this.layoutDoc.filterOp === cardMode.PRACTICE ? this.setFilterMode(cardMode.ALL) : this.setFilterMode(cardMode.PRACTICE))}> - <FontAwesomeIcon icon="check" color={this.layoutDoc.filterOp === cardMode.PRACTICE ? 'white' : 'light gray'} size="1x" /> + <Tooltip title={this.layoutDoc.practiceMode === practiceMode.PRACTICE ? 'Exit practice mode' : 'Practice flashcards manually'}> + <div key="back" className="carouselView-practice" onClick={e => this.togglePracticeMode(practiceMode.PRACTICE)}> + <FontAwesomeIcon icon="check" color={this.setColor(practiceMode.PRACTICE, StrCast(this.layoutDoc.practiceMode))} size="1x" /> </div> </Tooltip> <Tooltip title={this.layoutDoc.filterOp === cardMode.STAR ? 'Show all cards' : 'Show only starred cards'}> - <div key="back" className="carouselView-starFilter" onClick={e => (!this.layoutDoc.filterOp ? this.setFilterMode(cardMode.ALL) : this.setFilterMode(cardMode.STAR))}> - <FontAwesomeIcon icon="filter" color={this.layoutDoc.filterOp === cardMode.STAR || !this.layoutDoc.filterOp ? 'white' : 'light gray'} size="1x" /> + <div key="back" className="carouselView-starFilter" onClick={e => this.toggleFilterMode()}> + <FontAwesomeIcon icon="filter" color={this.setColor(cardMode.STAR, StrCast(this.layoutDoc.filterOp))} size="1x" /> </div> </Tooltip> </div> @@ -258,22 +353,22 @@ export class CollectionCarouselView extends CollectionSubView() { <div className="collectionCarouselView-outer" ref={this.createDashEventsTarget} - onContextMenu={this.specificMenu} + // onContextMenu={this.specificMenu} style={{ background: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor), color: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color), }}> - {this.layoutDoc.filterOp ? this.content : <p className="message">{this._message}</p>} + {!this._practiceMessage && !this._filterMessage ? ( + this.content + ) : ( + <p className="message"> + {this._filterMessage} + {'\n'} + {this._practiceMessage} + </p> + )} {/* {(this.carouselItems?.filter(doc => doc.layout[this.practiceField] !== practiceVal.CORRECT)).length == 0 ? null : this.content} */} - {/* Displays a message to the user to add more flashcards if they are in practice mode and no flashcards are there. */} - <p - className="message" - style={{ - display: !this.carouselItems?.[NumCast(this.layoutDoc._carousel_index)] && this.layoutDoc.filterOp === cardMode.PRACTICE ? 'flex' : 'none', - }}> - Add flashcards - </p> - {/* Displays a message to the user that a flashcard was recently missed if they had previously gotten it wrong. */} + {!this.carouselItems?.[NumCast(this.layoutDoc._carousel_index)] && this.layoutDoc.practiceMode === practiceMode.PRACTICE ? <p className="message">Add flashcards </p> : null} <p style={{ color: 'red', @@ -284,7 +379,7 @@ export class CollectionCarouselView extends CollectionSubView() { top: '10px', width: '10px', display: this.carouselItems?.[NumCast(this.layoutDoc._carousel_index)] - ? this.carouselItems?.[NumCast(this.layoutDoc._carousel_index)].layout[this.practiceField] === practiceVal.MISSED && this.layoutDoc.filterOp === cardMode.PRACTICE + ? this.carouselItems?.[NumCast(this.layoutDoc._carousel_index)].layout[this.practiceField] === practiceVal.MISSED && this.layoutDoc.practiceMode === practiceMode.PRACTICE && !this._practiceMessage ? 'block' : 'none' : 'none', @@ -292,7 +387,7 @@ export class CollectionCarouselView extends CollectionSubView() { Recently missed! </p> {this.menu} - {this.Document._chromeHidden || !this.layoutDoc.filterOp ? null : this.buttons} + {this.Document._chromeHidden || (!this._filterMessage && !this._practiceMessage) ? this.buttons : null} </div> ); } diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx index 084723d56..02ab76c2a 100644 --- a/src/client/views/nodes/ComparisonBox.tsx +++ b/src/client/views/nodes/ComparisonBox.tsx @@ -517,8 +517,8 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>() } // render the QuizCards - console.log('GERE' + DocCast(this.Document.embedContainer).filterOp); - if (DocCast(this.Document.embedContainer) && DocCast(this.Document.embedContainer).filterOp === 'quiz') { + // console.log('GERE' + DocCast(this.Document.embedContainer).filterOp); + if (DocCast(this.Document.embedContainer) && DocCast(this.Document.embedContainer).practiceMode === 'quiz') { const text = StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text); return ( <div className={`comparisonBox${this._props.isContentActive() ? '-interactive' : ''}`} style={{ display: 'flex', flexDirection: 'column' }}> |