Skip to content

Commit

Permalink
🚧 Update.
Browse files Browse the repository at this point in the history
  • Loading branch information
@tolerious
tolerious committed Oct 1, 2024
1 parent 55fed98 commit 00b3bf0
Show file tree
Hide file tree
Showing 2 changed files with 46 additions and 173 deletions.
170 changes: 24 additions & 146 deletions src/views/GroupManage.vue
View file
Original file line number Diff line number Diff line change
@@ -1,163 +1,45 @@
<template>
<Header title="Manage Group" @go-back="handleGoBack" />
<div class="group-manage-container">
<el-form @submit.prevent="createGroup" label-width="110px" :model="form" class="demo-from-inline">
<el-form-item label="Group Name:">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-form>
<div v-if="groupList.length > 0" @click="handleClickGroupItem(group)" class="loop-word-item"
v-for="group in groupList" :key="group._id">
<div class="loop-word-left">
<div class="loop-word-left-top">{{ group.name }}</div>
<div class="loop-word-left-bottom">Child Group: {{ group.childCount || 0 }}</div>
</div>
<div class="loop-word-right">
<div class="loop-word-right-left">
<!-- <button @click="handleClick('manage', group._id)">
<span>Words</span>
</button> -->
<!-- <button @click="handleClick('cycling', group._id)">
<span>Cycling</span>
</button> -->
</div>
<div class="loop-word-right-right">

<button @click.stop="handleClick('setting', group._id)">
<span>Settings</span>
</button>
<button @click.stop="handleClick('delete', group._id)">
<span>Delete</span>
</button>
</div>

</div>
<Header title="我的词组" @go-back="handleGoBack" />
<div class="px-4 mt-4" v-if="groupList.length > 0">
<div
v-for="group in groupList"
:key="group._id"
word-group
class="border-[1px] border-gray-900 rounded-sm px-2 py-1 m-2"
>
<div>{{ group.name }}</div>
<div class="text-gray-500">收藏单词数: {{ group.wordCount }}</div>
</div>
<el-empty description="No Data." v-else />
<div class="group-manage-bottom-btn">
<el-button @click="createGroup" type="primary">Confirm</el-button>
</div>
<el-dialog v-model="groupDialog" title="Child Group" style="max-height:85vh;overflow: scroll;" width="90%"
align-center>
<div class="loop-word-item" v-for="group in childGroupList" :key="group._id">
<div class="loop-word-left">
<div class="loop-word-left-top">{{ group.name }}</div>
<div class="loop-word-left-bottom">{{ group.wordCount }} words</div>
</div>
<div class="loop-word-right">
<div class="loop-word-right-left">
<button @click.stop="handleClick('setting', group._id)">
<span>Settings</span>
</button>
<button @click.stop="handleClick('delete', group._id)">
<span>Delete</span>
</button>
</div>
<div class="loop-word-right-right">
<button @click.stop="handleClick('manage', group._id)">
<span>Words</span>
</button>
<button @click.stop="handleClick('cycling', group._id)">
<span>Cycling</span>
</button>
</div>

</div>
</div>
</el-dialog>
</div>
<el-empty description="No Data." v-else />
</template>

<script setup lang="ts">
import Header from '@/components/Header.vue'
import Header from '@/components/Header.vue';
import { request } from '@/utils/service';
import { ElNotification } from 'element-plus';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
// #region variable
let groupDialog = ref(false)
const form = ref({ name: '' })
const router = useRouter()
let groupList = ref([])
let childGroupList = ref([])
let currentClickedParentGroup = ref('')
// #endregion
const router = useRouter();
// #region lifecycle
onMounted(async () => {
getGroupList()
})
// #endregion
// #region function
async function handleClickGroupItem(item) {
currentClickedParentGroup.value = item
childGroupList.value = await getChildGroup(item._id)
if (childGroupList.value.length > 0) { groupDialog.value = true }
else {
ElNotification({ type: 'info', message: 'No child', duration: 800 })
}
}
async function getChildGroup(id) {
let info = await request({ url: '/wordgroup/children', data: { parentGroupID: id }, method: 'post' })
return info.data
}
async function handleClick(type, id) {
switch (type) {
case 'delete':
const info = await request({
url: '/wordgroup', method: 'delete', data: {
id: id
}
})
const groupList = ref([]);
if (info.code === 200) {
getGroupList()
childGroupList.value = await getChildGroup(currentClickedParentGroup.value._id)
}
break;
case 'setting':
router.push('/group/setting/' + id)
break;
case 'manage':
router.push('/wordlist/' + id)
break;
case 'cycling':
router.push('/recite/group?groupID=' + id)
break;
default:
ElNotification({ message: 'Not support yet', type: 'warning', duration: 1200 })
break;
}
onMounted(async () => {
getGroupList();
});
}
async function getGroupList() {
const info = await request({
url: '/wordgroup'
})
let agg = info.data.aggregate
groupList.value = info.data.list.map(item => { item['childCount'] = agg[item._id]; return item })
}
async function createGroup() {
if (form.value.name) {
let m = await request({
url: '/wordgroup', method: 'post', data: {
name: form.value.name
}
})
form.value.name = ''
getGroupList()
} else {
ElNotification({ type: 'warning', message: 'Input group name.', duration: 1000 })
}
url: '/wordgroup',
});
const list = info.data.list.filter(group => group.wordCount > 0);
console.log(list);
groupList.value = list;
}
function handleGoBack() {
router.push('/home')
router.push('/home');
}
// #endregion
</script>

<style scoped lang="less">
Expand Down Expand Up @@ -232,9 +114,6 @@ function handleGoBack() {
-webkit-background-clip: text;
}
}
}
}
Expand All @@ -244,7 +123,6 @@ function handleGoBack() {
text-align: center;
width: 100%;
// background-color: white;
}
}
</style>
</style>
49 changes: 22 additions & 27 deletions src/views/HomePage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,13 @@
<div class="homepage-container">
<div class="slider-container">
<el-carousel height="auto">
<el-carousel-item style="height:180px">
<el-carousel-item style="height: 180px">
<div class="daily-word-container">
<div class="daily-word-container-inner">
<div>Emotional Damage</div>
<p>relating to the emotions</p>
<p>情绪上被无情打击</p>
</div>

</div>
</el-carousel-item>
<el-carousel-item>
Expand All @@ -34,24 +33,22 @@
</div>
<div class="body-container">
<div class="bottom-banner"><span>Stay Hungry, Stay Foolish！</span></div>

<el-row justify="space-around">
<el-col :span="11">
<el-card shadow="always" @click="redirect('group-manage')">词组管理</el-card>
</el-col>
<el-col :span="11">
<el-card shadow="always" @click="redirect('record')">单词查询</el-card>
<el-card shadow="always" @click="redirect('group-manage')">我的词组</el-card>
</el-col>
</el-row>
<el-row justify="space-around" style="margin-top: 15px;">
<el-col :span="11">
<el-card shadow="always" @click="redirect('recite')"> 单词背诵 </el-card>
</el-col>
</el-row>
<!-- <el-row justify="space-around" style="margin-top: 15px">
<el-col :span="11"> <el-card shadow="always" @click="redirect('record')">单词查询</el-card> </el-col>
<el-col :span="11">
<el-card shadow="always" @click="redirect('square')">词组广场
</el-card>
<el-card shadow="always" @click="redirect('square')">词组广场 </el-card>
</el-col>
</el-row>
<el-row justify="space-around" style="margin-top: 15px;">
</el-row> -->
<el-row justify="space-around" style="margin-top: 15px">
<el-col :span="11">
<el-card shadow="always" @click="redirect('feedback')">反馈建议</el-card>
</el-col>
Expand All @@ -66,17 +63,17 @@
<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter()
const router = useRouter();
function redirect(condition: string) {
if (condition === 'recite') router.push('/recite/normal')
if (condition === 'group-recite') router.push('/group-recite')
if (condition === 'cycling') router.push('/cycling')
if (condition === 'feedback') router.push('/feedback')
if (condition === 'group-manage') router.push('/group-manage')
if (condition === 'record') router.push('/record-word')
if (condition === 'settings') router.push('/settings')
if (condition === 'help') router.push('/help')
if (condition === 'square') router.push('/square')
if (condition === 'recite') router.push('/recite/normal');
if (condition === 'group-recite') router.push('/group-recite');
if (condition === 'cycling') router.push('/cycling');
if (condition === 'feedback') router.push('/feedback');
if (condition === 'group-manage') router.push('/group-manage');
if (condition === 'record') router.push('/record-word');
if (condition === 'settings') router.push('/settings');
if (condition === 'help') router.push('/help');
if (condition === 'square') router.push('/square');
}
</script>

Expand Down Expand Up @@ -107,17 +104,15 @@ function redirect(condition: string) {
margin: 0 auto;
text-align: center;
&>div {
& > div {
color: white;
}
&>p {
& > p {
color: white;
}
}
}
}
.body-container {
Expand All @@ -132,4 +127,4 @@ function redirect(condition: string) {
cursor: pointer;
}
}
</style>
</style>

0 comments on commit 00b3bf0

Please sign in to comment.