Skip to content

Commit

Permalink
Added finish chapter page
Browse files Browse the repository at this point in the history
  • Loading branch information
@simjanos-dev
simjanos-dev committed Jan 26, 2024
1 parent 9952ed9 commit de5a71a
Show file tree
Hide file tree
Showing 11 changed files with 105 additions and 51 deletions.
2 changes: 1 addition & 1 deletion resources/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ const router = new VueRouter({
{ path: '/login', component: LoginForm },
{ path: '/admin', component: AdminLayout },
{ path: '/media-player', component: MediaPlayer },
{ path: '/books', component: Books },
{ path: '/books/:bookId?', component: Books },
{ path: '/chapters/read/:chapterId', component: TextReader },
{ path: '/flashcards', component: FlashcardCollectionList },
{ path: '/flashcards/edit/:flashcardCollectionId?', component: FlashcardCollection },
Expand Down
13 changes: 12 additions & 1 deletion resources/js/components/Home/PatchNotes.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,27 @@
<li>
Added hotkeys for the text reader and review pages.
</li>
<li>
Added proper finish reading screen.
</li>
</ul>

<b>Bug fixes:</b>
<ul>
<li>
Users clicking anywhere outside of the vocabulary box will close the vocabulary box. Previously it only worked if the user clicked on empty space inside the text box.
Users clicking anywhere outside of the vocabulary box will close the vocabulary box. Previously it only worked if the user clicked on an empty space inside the text box.
</li>
<li>
Increased maximum execution time for importing dictionaries. If your dictionary import did not end with a success message but still functional, I recommend importing it again, because it probably did not import all the records from the dictionary file.
</li>
</ul>

<b>Other changes:</b>
<ul>
<li>
Updated node.js to v20.11.0.
</li>
</ul>
</v-card-text>
</v-card>

Expand Down
14 changes: 14 additions & 0 deletions resources/js/components/Library/Books.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -320,14 +320,24 @@
for (let bookIndex = 0; bookIndex < this.books.length; bookIndex ++) {
if (bookId !== this.books[bookIndex].id) {
this.books[bookIndex].chaptersVisible = false;
} else {
this.anyChapterVisible = !this.books[bookIndex].chaptersVisible;
this.books[bookIndex].chaptersVisible = !this.books[bookIndex].chaptersVisible;
setTimeout(() => {
document.getElementById('book-' + bookId).scrollIntoView();
}, 500);
}
}
if (this.anyChapterVisible && this.$router.currentRoute.fullPath !== ('/books/' + bookId)) {
this.$router.push('/books/' + bookId);
}
if (!this.anyChapterVisible && this.$router.currentRoute.fullPath !== ('/books')) {
this.$router.push('/books');
}
},
showStartReviewDialog(bookId, bookName) {
this.startReviewDialog.bookName = bookName;
Expand All @@ -347,6 +357,10 @@
}
this.books = response.data;
if (this.$route.params.bookId !== undefined) {
this.toggleChapters(parseInt(this.$route.params.bookId));
}
});
},
formatNumber: formatNumber
Expand Down
21 changes: 13 additions & 8 deletions resources/js/components/Text/TextBlockGroup.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@

<!--Vocabulary sidebar-->
<vocabulary-side-box
v-if="$props.vocabularySidebarFits && $props.vocabularySidebar"
v-if="$props.vocabularySidebarFits && $props.vocabularySidebar && !modernVocabBox.sidebarHidden"
:key="'vocabulary-side-box-' + modernVocabBox.key"
ref="vocabularySideBox"
:language="$props.language"
Expand Down Expand Up @@ -147,6 +147,13 @@
ankiShowNotifications: false,
textBlocks: this.$props._textBlocks,
modernVocabBox: {
/*
Keep the sidebar hidden until the first position
update, so it won't jump around on the screen when
a text is opened.
*/
sidebarHidden: true,
key: 0,
active: false,
// word, new phrase, existing phrase
Expand Down Expand Up @@ -263,7 +270,6 @@
},
methods: {
hotkeyHandle(event) {
console.log(event.which);
if (!this.$props.hotkeysEnabled) {
return;
}
Expand All @@ -285,7 +291,9 @@
// set stage to ignore
case 88:
event.preventDefault();
this.setStage(1);
if (this.selection.length == 1) {
this.setStage(1);
}
break;
// increase font size
Expand All @@ -303,7 +311,7 @@
break;
// add selected word to anki
case 82:
case 70:
event.preventDefault();
this.addSelectedWordToAnki();
break;
Expand Down Expand Up @@ -336,8 +344,6 @@
var currentWordIndex = this.selection[0].wordIndex;
}
console.log('prev. current:', currentWordIndex);
var wordToSelect = -1;
var selectedTextBlock = this.selectedTextBlock === -1 ? 0 : this.selectedTextBlock;
Expand Down Expand Up @@ -394,8 +400,6 @@
var currentWordIndex = this.selection[this.selection.length - 1].wordIndex;
}
console.log('prev. current:', currentWordIndex);
var wordToSelect = -1;
var selectedTextBlock = this.selectedTextBlock === -1 ? 0 : this.selectedTextBlock;
Expand Down Expand Up @@ -1078,6 +1082,7 @@
// update sidebar
if (this.$props.vocabularySidebarFits && this.$props.vocabularySidebar) {
this.modernVocabBox.sidebarHidden = false;
this.modernVocabBox.height = vocabBoxAreaElement.offsetHeight;
this.modernVocabBox.positionLeft = vocabBoxArea.right;
this.modernVocabBox.positionTop = vocabBoxArea.top;
Expand Down
6 changes: 6 additions & 0 deletions resources/js/components/Text/VocabularyBox.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,6 +169,7 @@
height="100"
v-model="translationText"
@change="inputChanged"
@keydown.stop=";"
></v-textarea>

<!-- Search box -->
Expand Down Expand Up @@ -211,6 +212,7 @@
rounded
v-model="baseWord"
@change="inputChanged"
@keydown.stop=";"
></v-text-field>
<v-text-field
:class="{'mt-2': true, 'mb-2': ($props.language !== 'japanese' && $props.language !== 'chinese')}"
Expand All @@ -222,6 +224,7 @@
rounded
:value="word"
@change="inputChanged"
@keydown.stop=";"
></v-text-field>
</div>

Expand All @@ -236,6 +239,7 @@
rounded
v-model="baseWordReading"
@change="inputChanged"
@keydown.stop=";"
></v-text-field>
<v-text-field
class="my-2"
Expand All @@ -246,6 +250,7 @@
rounded
v-model="reading"
@change="inputChanged"
@keydown.stop=";"
></v-text-field>
</div>

Expand All @@ -262,6 +267,7 @@
height="100"
v-model="reading"
@change="inputChanged"
@keydown.stop=";"
></v-textarea>
</v-card-text>
</v-tab-item>
Expand Down
1 change: 1 addition & 0 deletions resources/js/components/Text/VocabularySearchBox.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
hide-details
v-model="searchField"
@change="makeSearchRequest"
@keydown.stop=";"
></v-text-field>

<!-- Search results -->
Expand Down
8 changes: 7 additions & 1 deletion resources/js/components/Text/VocabularySideBox.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@
rounded
v-model="baseWord"
@change="inputChanged"
@keydown.stop=";"
></v-text-field>
<v-icon class="mt-1 mx-1">mdi-arrow-right</v-icon>
<v-text-field
Expand All @@ -70,6 +71,7 @@
rounded
:value="word"
@change="inputChanged"
@keydown.stop=";"
></v-text-field>
</div>

Expand All @@ -84,6 +86,7 @@
rounded
v-model="baseWordReading"
@change="inputChanged"
@keydown.stop=";"
></v-text-field>
<v-icon class="mt-1 mx-1">mdi-arrow-right</v-icon>
<v-text-field
Expand All @@ -95,6 +98,7 @@
rounded
v-model="reading"
@change="inputChanged"
@keydown.stop=";"
></v-text-field>
</div>

Expand All @@ -111,6 +115,7 @@
height="80"
disabled
:value="phraseText"
@keydown.stop=";"
></v-textarea>

<!-- Phrase reading -->
Expand All @@ -126,6 +131,7 @@
height="80"
v-model="reading"
@change="inputChanged"
@keydown.stop=";"
></v-textarea>

<!-- Stage buttons-->
Expand Down Expand Up @@ -190,6 +196,7 @@
height="100"
v-model="translationText"
@change="inputChanged"
@keydown.stop=";"
></v-textarea>
</div>

Expand Down Expand Up @@ -316,7 +323,6 @@
this.$emit('unselectAllWords');
},
addSelectedWordToAnki() {
console.log('sending to anki');
this.$emit('addSelectedWordToAnki');
},
close() {
Expand Down
85 changes: 49 additions & 36 deletions resources/js/components/TextReader/TextReader.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,46 +124,58 @@
</v-card-text>
</v-card>&nbsp;

<!-- Finish -->
<div v-if="finished" id="finished-box">
<div id="lesson-finished-text">Congratulations! You have finished {{ lessonName }}!</div>
<!-- Finish box -->
<v-card
v-if="finished"
outlined
id="finished-box"
class="rounded-lg mx-auto"
width="500px"
>
<!-- Title -->
<v-card-title><v-icon large color="success" class="mr-1">mdi-bookmark-check</v-icon>Congratulations!</v-card-title>

<!-- Text -->
<v-card-text>
You have finished reading this chapter: <b>{{ lessonName }}</b>, and you have read <b>{{ formatNumber(wordCount) }}</b> words. Keep up the good work, and your
<span class="text-capitalize">{{ language }}</span> skills will improve steadily. Consistency is key!

<table id="finished-stats" class="table-sm table-bordered">
<thead>
<tr>
<th scope="col">Word type</th>
<th scope="col">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>Read words:</td>
<td> {{ wordCount }} </td>
</tr>
<tr>
<td>Newly saved words:</td>
<td> {{ newlySavedWords }} </td>
</tr>
<tr>
<td>Learned words:</td>
<td> {{ learnedWords }} </td>
</tr>
<tr>
<td>Progressed words:</td>
<td> {{ progressedWords }} </td>
</tr>
</tbody>
</table>
<div class="text-center">
<v-btn depressed :small="$vuetify.breakpoint.xsOnly" color="primary" :to="'/chapters/' + bookId">Go to lessons</v-btn>
<v-btn depressed :small="$vuetify.breakpoint.xsOnly" color="primary" :to="'/chapters/read/' + nextLesson" v-if="nextLesson !== -1">Go to next lesson</v-btn>
</div>
</div>
<template v-if="nextLesson === -1">
<br><br>
This was the last chapter in this book.
</template>
</v-card-text>

<!-- Actions -->
<v-card-actions>
<v-spacer />
<v-btn
rounded
depressed
color="primary"
@click="$router.push('/books/' + bookId)"
>
<v-icon class="mr-1">mdi-book-open-variant</v-icon>
Library
</v-btn>
<v-btn
v-if="nextLesson !== -1"
rounded
depressed
color="primary"
:to="'/chapters/read/' + nextLesson"
>
<v-icon class="mr-1">mdi-page-next-outline</v-icon>
Next chapter
</v-btn>
</v-card-actions>
</v-card>
</div>
</div>
</template>

<script>
import {formatNumber} from './../../helper.js';
export default {
data: function() {
return {
Expand Down Expand Up @@ -247,7 +259,7 @@
window.addEventListener('scroll', this.updateToolbarPosition);
document.getElementById('fullscreen-box').addEventListener('fullscreenchange', this.updateFullscreen);
for (let i = 0; i < this.lessons.length; i++) {
if (this.lessons[i].id == this.lessonId && i < this.lessons.length - 1 && this.lessons[i + 1].read_count) {
if (this.lessons[i].id == this.lessonId && i < this.lessons.length - 1) {
this.nextLesson = this.lessons[i + 1].id;
break;
}
Expand Down Expand Up @@ -382,7 +394,8 @@
}).catch(function (error) {
console.log(error);
});
}
},
formatNumber: formatNumber
}
}
</script>
2 changes: 1 addition & 1 deletion resources/js/components/TextReader/TextReaderHotkeyInformationDialog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
<span class="primary--text" style="width: 170px;">s</span><span>Decrease font size</span>
</div>
<div class="hotkey d-flex">
<span class="primary--text" style="width: 170px;">r</span><span>Send word or phrase to anki</span>
<span class="primary--text" style="width: 170px;">f</span><span>Send word or phrase to anki</span>
</div>
<div class="hotkey d-flex">
<span class="primary--text" style="width: 170px;">Esc</span><span>Unselect word or phrase</span>
Expand Down
Loading

0 comments on commit de5a71a

Please sign in to comment.