Skip to content

Commit

Permalink
Remove defaults (#2)
Browse files Browse the repository at this point in the history 
## Изменения
<!-- Опишите здесь на языке, понятном каждому, изменения, сделанные в
исходном коде по пунктам. -->

## Детали реализации
<!-- Здесь можно описать технические детали по пунктам. -->

## Check-List
<!-- После сохранения у следующих полей появятся галочки, которые нужно
проставить мышкой -->
- [ ] Вы проверили свой код перед отправкой запроса?
- [ ] Вы написали тесты к реализованным функциям?
- [ ] Вы не забыли применить форматирование `black` и `isort` для
_Back-End_ или `Prettier` для _Front-End_?

---------

Co-authored-by: Artem Netsvetaev <physphile@vk.com>
  • Loading branch information
@physphile @fizfakovets
physphile and fizfakovets authored Sep 19, 2023
1 parent a942395 commit 4bf7a4a
Show file tree
Hide file tree
Showing 5 changed files with 184 additions and 90 deletions.
7 changes: 6 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,13 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>physphile</title>
<title>Калькулятор стипендии</title>

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" />
</head>

<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
{
"name": "personal-budget",
"name": "calculator-ui",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"dev": "vite --host",
"build": "vue-tsc && vite build",
"preview": "vite preview",
"lint": "eslint --ext .ts,.vue . --fix",
Expand Down
12 changes: 12 additions & 0 deletions src/components/IrdomTooltip.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<script setup lang="ts">
defineProps<{ text: string }>();
</script>

<template>
<v-tooltip :text="text" open-on-click open-on-focus>
<template #activator="{ props }">
<v-btn v-bind="props" variant="tonal" icon="" size="x-small" style="font-size: medium"> ? </v-btn>
</template>
<slot />
</v-tooltip>
</template>
246 changes: 161 additions & 85 deletions src/pages/PageMain.vue
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,22 @@
<script setup lang="ts">
import { computed, reactive, ref } from 'vue';
import { computed, reactive, ref, watch } from 'vue';
import IrdomSection from '../components/IrdomSection.vue';
import { Stipend, TAX } from '../constants';
import IrdomTooltip from '../components/IrdomTooltip.vue';
const lz = (n: number) => `0${n}`.slice(-2);
const lz = (number: number, digits: number) => `${'0'.repeat(digits)}${number}`.slice(-digits);
const data = reactive({
course: '1',
member: true,
retake: false,
marks: [] as number[],
pgas: false,
gss: false,
interface Data {
course?: string;
member?: boolean;
retake?: boolean;
marks: number[];
pgas?: boolean;
gss?: boolean;
}
const data = reactive<Data>({
marks: [],
});
const junior = computed(() => data.course === '1' || data.course === '2');
Expand All @@ -21,18 +26,29 @@ const nomarks = ref(false);
const nomarksHandler = (val: boolean) => {
if (val) {
data.marks = [];
data.retake = false;
} else {
data.retake = undefined;
}
};
const allDef = computed(() => {
const every = ['course', 'member', 'retake', 'gss'].every(key => data[key as keyof Data] !== undefined);
const pgas = !gasCondition.value || data.pgas !== undefined;
const marks = nomarks.value || data.marks.length;
return every && pgas && marks;
});
const gasCondition = computed(() => data.retake === false && !data.marks.includes(3));
const stipend = computed(() => {
let sum = 0;
const gasCondition = data.retake === false && !data.marks.includes(3);
const pgasCondition = data.pgas === true && data.retake === false;
const pgasCondition = gasCondition.value && data.pgas === true;
const gssCondition = data.gss === true;
const pgssCondition = gssCondition && junior.value && data.marks.length && !data.marks.includes(3);
if (gasCondition) {
if (gasCondition.value) {
if (!data.marks.length) sum += Stipend.gas.miss;
else if (data.marks.includes(4) && data.marks.includes(5)) sum += Stipend.gas.with4and5;
else if (data.marks.includes(4)) sum += Stipend.gas.only4;
Expand All @@ -55,105 +71,165 @@ const formattedStipend = computed(() => {
const rest = Math.floor(stipend.value % 1000);
const float = Math.round((stipend.value % 1) * 100);
if (thousands) return `${thousands} ${rest},${lz(float)} ₽`;
return `${rest},${lz(float)} ₽`;
if (thousands) return `${thousands} ${lz(rest, 3)},${lz(float, 2)} ₽`;
return `${rest},${lz(float, 2)} ₽`;
});
const updateCourseHandler = () => {
if (!isNomarksCouse.value) {
nomarks.value = false;
}
};
watch(gasCondition, val => {
if (val) {
data.pgas = undefined;
} else {
data.pgas = false;
}
});
</script>

<template>
<div class="bg-grey-lighten-4 pa-6 rounded">
<IrdomSection title="Курс обучения">
<v-btn-toggle
v-model="data.course"
mandatory
style="flex-wrap: wrap; height: auto"
@update:model-value="updateCourseHandler"
>
<v-btn value="1" style="height: 48px">1</v-btn>
<v-btn value="2" style="height: 48px">2</v-btn>
<v-btn value="3" style="height: 48px">3</v-btn>
<v-btn value="4" style="height: 48px">4</v-btn>
<br />
<v-btn value="5" style="height: 48px">5</v-btn>
<v-btn value="6" style="height: 48px">6</v-btn>
<v-btn value="1М" style="height: 48px">1М</v-btn>
<v-btn value="2М" style="height: 48px">2М</v-btn>
</v-btn-toggle>
</IrdomSection>

<IrdomSection title="Членство в Профсоюзе">
<v-btn-toggle v-model="data.member" mandatory>
<v-btn :value="true">Состою</v-btn>
<v-btn :value="false">Не состою</v-btn>
</v-btn-toggle>
</IrdomSection>

<IrdomSection title="Пересдачи за последнюю сессию">
<v-btn-toggle v-model="data.retake" mandatory>
<v-btn :value="true">Были</v-btn>
<v-btn :value="false">Не были</v-btn>
</v-btn-toggle>
</IrdomSection>

<IrdomSection title="Оценки за последнюю сессию">
<v-btn-toggle v-model="data.marks" multiple :disabled="nomarks">
<v-btn :value="3">3</v-btn>
<v-btn :value="4">4</v-btn>
<v-btn :value="5">5</v-btn>
</v-btn-toggle>
<v-checkbox
v-if="isNomarksCouse"
v-model="nomarks"
label="Оценок нет"
hide-details="auto"
style="margin-bottom: -23px"
@update:model-value="nomarksHandler"
></v-checkbox>
</IrdomSection>

<IrdomSection title="ПГАС">
<v-btn-toggle v-model="data.pgas" mandatory>
<v-btn :value="true">Получаю</v-btn>
<v-btn :value="false">Не получаю</v-btn>
</v-btn-toggle>
</IrdomSection>

<IrdomSection title="ГСС">
<v-btn-toggle v-model="data.gss" mandatory>
<v-btn :value="true">Получаю</v-btn>
<v-btn :value="false">Не получаю</v-btn>
</v-btn-toggle>
</IrdomSection>
</div>
<div class="d-flex">
<div class="your">Ожидаемая сумма:</div>
<div class="stipend">{{ formattedStipend }}</div>
<div class="container">
<div class="rounded calc">
<IrdomSection title="Курс обучения">
<v-btn-toggle v-model="data.course" class="course" mandatory @update:model-value="updateCourseHandler">
<v-btn value="1" style="height: 48px">1</v-btn>
<v-btn value="2" style="height: 48px">2</v-btn>
<v-btn value="3" style="height: 48px">3</v-btn>
<v-btn value="4" style="height: 48px">4</v-btn>
<v-btn value="5" style="height: 48px">5</v-btn>
<v-btn value="6" style="height: 48px">6</v-btn>
<v-btn value="1М" style="height: 48px">1М</v-btn>
<v-btn value="2М" style="height: 48px">2М</v-btn>
</v-btn-toggle>
</IrdomSection>

<IrdomSection title="Оценки за последнюю сессию">
<v-btn-toggle v-model="data.marks" multiple divided :disabled="nomarks">
<v-btn :value="3">3</v-btn>
<v-btn :value="4">4</v-btn>
<v-btn :value="5">5</v-btn>
</v-btn-toggle>
<v-checkbox
v-if="isNomarksCouse"
v-model="nomarks"
label="Оценок нет"
hide-details="auto"
style="margin-bottom: -23px"
@update:model-value="nomarksHandler"
></v-checkbox>
</IrdomSection>

<IrdomSection v-if="!nomarks" title="Пересдачи за последнюю сессию">
<v-btn-toggle v-model="data.retake" mandatory divided>
<v-btn :value="true">Были</v-btn>
<v-btn :value="false">Не были</v-btn>
</v-btn-toggle>
</IrdomSection>

<IrdomSection v-if="gasCondition" title="ПГАС">
<v-btn-toggle v-model="data.pgas" mandatory divided>
<v-btn :value="true">Получаю</v-btn>
<v-btn :value="false">Не получаю</v-btn>
</v-btn-toggle>
</IrdomSection>

<IrdomSection title="ГСС">
<v-btn-toggle v-model="data.gss" mandatory divided>
<v-btn :value="true">Получаю</v-btn>
<v-btn :value="false">Не получаю</v-btn>
</v-btn-toggle>
</IrdomSection>

<IrdomSection title="Членство в Профсоюзе">
<v-btn-toggle v-model="data.member" mandatory divided>
<v-btn :value="true">Состою</v-btn>
<v-btn :value="false">Не состою</v-btn>
</v-btn-toggle>
</IrdomSection>
</div>
<div class="d-flex elevation-10" :class="{ show: allDef }">
<div class="your">
<span>ИТОГО: </span>
<IrdomTooltip text="">
Получение этой суммы не гарантировано.<br />
С вопросами обращайтесь в Профком.
</IrdomTooltip>
</div>
<div class="stipend">{{ allDef ? formattedStipend : '?' }}</div>
</div>
</div>
</template>

<style scoped>
.stipend {
height: 54px;
display: flex;
align-items: center;
font-size: 30px;
background: rgb(0, 1, 76);
color: white;
border-radius: 999px;
padding: 4px 16px;
padding: 0 16px;
min-width: max(54px, fit-content);
justify-content: center;
}
.your {
font-size: 20px;
font-size: 18px;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
align-items: center;
gap: 8px;
}
.d-flex {
height: 80px;
background: white;
position: absolute;
left: 16px;
bottom: 16px;
right: 16px;
z-index: 1;
align-items: center;
gap: 8px;
flex-wrap: wrap;
padding: 24px;
justify-content: space-between;
padding: 0 13px 0 43px;
border-radius: 43px;
white-space: nowrap;
transform: translateY(112px);
opacity: 0;
transition: all 300ms ease-in-out;
}
.show {
opacity: 1;
transform: translateY(0);
}
.calc {
overflow-y: auto;
height: 100%;
padding: 24px 24px 112px;
}
.container {
position: relative;
height: 100vh;
overflow: hidden;
}
.course {
display: grid;
grid-template-columns: repeat(4, 1fr);
background: rgb(0 0 0 / 12%);
gap: 1.2px;
height: auto !important;
}
.course > button {
border-radius: 0 !important;
}
</style>
5 changes: 3 additions & 2 deletions src/vuetify.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,11 @@ export const vuetify = createVuetify({
},
defaults: {
VBtnToggle: {
color: 'rgb(255, 139, 0)',
color: 'rgb(0, 1, 76)',
elevation: 1,
},
VCheckbox: {
color: 'rgb(255, 139, 0)',
color: 'rgb(0, 1, 76)',
},
},
});

0 comments on commit 4bf7a4a

Please sign in to comment.