Skip to content
This repository has been archived by the owner on Oct 14, 2021. It is now read-only.

feat(service): request status #251

Closed
wants to merge 8 commits into from
Closed

feat(service): request status #251

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a0b4e4e
feat(service): add request status page
junhoyeo May 19, 2019
dd85bc9
feat: add DimiProgressbar component for snack/ingang status
junhoyeo May 19, 2019
9fe5a35
feat: add DimiBarChart component for afterschool status
junhoyeo May 20, 2019
439201e
Merge branch 'master' into request-status
junhoyeo May 20, 2019
3051ed6
Merge branch 'master' into request-status
Jul 12, 2019
2e233cd
Merge branch 'master' into request-status
Sep 2, 2019
979828a
Merge branch 'master' into request-status
junhoyeo Oct 30, 2019
8b38435
Merge branch 'master' into request-status
Dec 12, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 100 additions & 0 deletions app/dimiru/components/DimiProgressbar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
<script>
export default {
name: 'DimiProgressbar',
props: {
progress: {
type: Number,
default: 0
},
color: {
type: String,
default: 'red',
validator: c => ['mustard', 'orange', 'pink', 'red'].includes(c)
},
small: {
type: Boolean,
default: false
}
},
computed: {
computedClass () {
return {
[this.color]: true,
'progress--small': (this.small)
}
},
barStyle () {
return {
width: ((this.progress > 100) ? 100 : this.progress) + '%'
}
}
}
}
</script>

<template>
<div class="progress">
<div
class="progress__background"
:class="computedClass"
>
<div
class="progress__bar"
:class="computedClass"
:style="barStyle"
/>
</div>
</div>
</template>

<style lang="scss" scoped>
.progress {
width: 100%;

&__bar,
&__background {
height: 48px;
border-radius: 24px;
}

&__bar.red {
background-color: $red;
}

&__bar.pink {
background-color: $pink;
}

&__bar.mustard {
background-color: $mustard;
}

&__bar.orange {
background-color: $orange;
}

&__background {
width: 100%;
}

&__background.red {
background-color: rgba(232, 60, 61, 0.5);
}
junhoyeo marked this conversation as resolved.
Show resolved Hide resolved

&__background.pink {
background-color: rgba(255, 128, 129, 0.5);
}

&__background.mustard {
background-color: rgba(253, 184, 18, 0.5);
}

&__background.orange {
background-color: rgba(245, 105, 61, 0.5);
}

&--small {
height: 32px;
}
}
</style>
1 change: 1 addition & 0 deletions app/dimiru/components/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,5 +16,6 @@ export { default as DimiMenu } from './DimiMenu.vue'
export { default as DimiMenuItem } from './DimiMenuItem.vue'
export { default as DimiModal } from './DimiModal.vue'
export { default as DimiNavbar } from './DimiNavbar.vue'
export { default as DimiProgressbar } from './DimiProgressbar.vue'
export { default as DimiTab } from './DimiTab.vue'
export { default as DimiLongInput } from './DimiLongInput.vue'
227 changes: 227 additions & 0 deletions app/pages/paths/management/ManageRequest.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,227 @@
<script>
import ContentWrapper from '@/components/ContentWrapper.vue'

export default {
name: 'ManageRequest',
components: { ContentWrapper },

computed: {
today: () => new Date().getDate(),
month: () => 1 + new Date().getMonth(),
year: () => new Date().getFullYear()
}
}
</script>

<template>
<content-wrapper>
<h1 slot="header">
<span class="icon-request" />신청 현황
</h1>
<dimi-card
slot="main"
>
<div class="dashboard">
<div class="dashboard__row">
<div class="dashboard__item dashboard__snack">
<h1 class="dashboard__title">
<span class="icon-muffin" /> {{ month }}월 간식 신청 현황
</h1>
<div class="dashboard__content">
<div class="dashboard__field">
<div class="dashboard__status">
총인원 620명 중<br>
150명 신청
</div>
<div class="dashboard__percent">
24%
</div>
</div>
<dimi-progressbar
class="snack"
:progress="24"
color="orange"
:small="false"
/>
</div>
</div>
<div class="dashboard__item dashboard__circle">
<h1 class="dashboard__title">
<span class="icon-club-sm" /> {{ year }}년 동아리 가입 신청 현황
</h1>
<div class="dashboard__content">
차트 컴포넌트를 만들자
</div>
</div>
</div>
<div class="dashboard__row">
<div class="dashboard__item dashboard__afterschool">
<h1 class="dashboard__title">
<span class="icon-ball" /> {{ year }}년 상반기 방과 후 활동 신청 현황
</h1>
<div class="dashboard__content">
차트 컴포넌트를 만들자
</div>
</div>
</div>
<div class="dashboard__row">
<div class="dashboard__item dashboard__">
<h1 class="dashboard__title">
<span class="icon-comment" /> {{ month }}월 2주차 상담 신청 현황 - 진로 상담
</h1>
<div class="dashboard__content">
차트 컴포넌트를 만들자
</div>
</div>
</div>
<div class="dashboard__row">
<div class="dashboard__item">
<h1 class="dashboard__title">
<span class="icon-internet-class" /> {{ month }}월 {{ today }}일 인강실 사용 신청 현황
</h1>
<div class="dashboard__content">
<div class="dashboard__ingang">
<div class="dashboard__ingang--field">
<div class="dashboard__time">
1타임
</div>
<div class="dashboard__status">
30석 중 24석 신청
</div>
</div>
<dimi-progressbar
class="ingang"
:progress="80"
color="red"
:small="true"
/>
</div>
<div class="dashboard__ingang">
<div class="dashboard__ingang--field">
<div class="dashboard__time">
2타임
</div>
<div class="dashboard__status">
30석 중 12석 신청
</div>
</div>
<dimi-progressbar
class="ingang"
:progress="40"
color="pink"
:small="true"
/>
</div>
</div>
</div>
<div class="dashboard__item">
<h1 class="dashboard__title">
<span class="icon-hourglass" /> {{ month }}월 2주차 잔류 신청 현황
</h1>
<div class="dashboard__content">
차트 컴포넌트를 만들자
</div>
</div>
</div>
</div>
</dimi-card>
</content-wrapper>
</template>

<style lang="scss" scoped>
.dashboard {
display: flex;
flex-direction: column;
justify-content: center;
color: $gray;

&__title {
color: $gray-dark;
font-size: 24px;
font-weight: $font-weight-bold;
}

&__row {
display: flex;
flex-direction: row;
justify-content: space-between;
}

&__row:not(:first-child) {
margin-top: 2em;
}

&__item {
display: flex;
width: 100%;
flex-direction: column;
padding: 1em;
}

&__content {
display: flex;
flex-direction: column;
margin-top: 1.5em;
}

&__field {
display: flex;
flex-direction: row;
justify-content: space-between;
line-height: 1.8;
}

&__percent {
color: $orange;
font-size: 48px;
font-weight: $font-weight-regular;
}

&__status {
display: flex;
}

&__snack &__field {
@include until($tablet) {
flex-direction: column;
}
}

&__snack &__percent {
line-height: normal;
}

&__ingang {
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
}

&__ingang--field {
display: flex;
width: 50%;
flex-direction: column;
}

&__ingang:first-child {
margin-bottom: 2em;
}

&__time {
color: $gray-dark;
font-size: 16px;
font-weight: $font-weight-bold;
}
}

.progress.snack {
display: flex;
margin-top: 1em;
}

.progress.ingang {
display: flex;
padding-left: 0.5em;
}
</style>
9 changes: 9 additions & 0 deletions app/router/routers/management.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import withPrefix from '@/src/util/path-with-prefix'

const ManageWrapper = () => import('@/pages/paths/management/ManageWrapper.vue')
const ManageMain = () => import('@/pages/paths/management/ManageMain.vue')
const ManageRequest = () => import('@/pages/paths/management/ManageRequest.vue')
const ManageAssignment = () => import('@/pages/paths/management/ManageAssignment.vue')
const ManageAfterschool = () => import('@/pages/paths/management/ManageAfterschool.vue')
const ManageCounsel = () => import('@/pages/paths/management/ManageCounsel.vue')
Expand All @@ -27,6 +28,14 @@ export default [
path: '/',
component: ManageWrapper,
children: [
{
path: 'request',
name: 'management/request',
component: ManageRequest,
meta: {
title: '디미고인 > 신청 현황'
}
},
{
path: 'assignment',
name: 'management/assignment',
Expand Down