calculator and other cleaning
This commit is contained in:
248
components/section/InvestmentBlock.vue
Normal file
248
components/section/InvestmentBlock.vue
Normal file
@ -0,0 +1,248 @@
|
||||
<template>
|
||||
<UiContainer class="space-25-75">
|
||||
<div>
|
||||
<div class="flex flex-col w-full">
|
||||
<div class="relative flex flex-col">
|
||||
<h1 class="text-3xl font-bold">
|
||||
{{ component.front_section_lang.at(0).data.drawing_up_a_proposal_for_asave_contract }}
|
||||
</h1>
|
||||
<div class="flex flex-wrap flex-1">
|
||||
<!-- left -->
|
||||
<div class="w-full md:w-1/2 p-4">
|
||||
<h3 class="w-full border-b my-2">
|
||||
{{ component.front_section_lang.at(0).data.simulation_of_the_contract_proposal }}
|
||||
</h3>
|
||||
<p>{{ component.front_section_lang.at(0).data.monthly_savings }}</p>
|
||||
<div class="my-8">
|
||||
<div class="text-2xl">
|
||||
{{ formater.price(store.monthlySavings) }}
|
||||
</div>
|
||||
<input v-model="store.monthlySavings" type="range" :max="store.getMaxAmount" :min="store.getMinAmount" class="w-full accent-button cursor-pointer" @change="investmentStore.getCalculator()">
|
||||
</div>
|
||||
<div class="my-8">
|
||||
<div class="text-2xl">
|
||||
{{ store.storagePeriod }}
|
||||
</div>
|
||||
<input v-model="store.storagePeriod" type="range" :max="investmentStore.maxYear" :min="investmentStore.minYear" class="w-full accent-button cursor-pointer" @change="investmentStore.getCalculator()">
|
||||
</div>
|
||||
</div>
|
||||
<!-- right -->
|
||||
<div class="w-full md:w-1/2 p-4">
|
||||
<h3 class="w-full border-b my-2">
|
||||
{{ component.front_section_lang.at(0).data.details_of_the_contract_proposal }}
|
||||
</h3>
|
||||
<p class="flex justify-between my-4">
|
||||
<span>{{ component.front_section_lang.at(0).data.current_price_per_bar }}</span>
|
||||
<span>{{ formater.price(investmentStore.calculationResult.calculator_output.investment_piece.price) }}</span>
|
||||
</p>
|
||||
|
||||
<p class="flex justify-between my-4">
|
||||
<span>{{ component.front_section_lang.at(0).data.money_for_spend }}</span>
|
||||
<span>{{ formater.price(investmentStore.calculationResult.calculator_output.money_spent) }}</span>
|
||||
</p>
|
||||
<p class="flex justify-between my-4">
|
||||
<span>{{ component.front_section_lang.at(0).data.weight_per_bar }}</span>
|
||||
<span>{{ getWeight }}</span>
|
||||
</p>
|
||||
<p class="flex justify-between my-4">
|
||||
<span>{{ component.front_section_lang.at(0).data.count }}</span>
|
||||
<span>{{ investmentStore.calculationResult.calculator_output.max_pieces_in_package }}</span>
|
||||
</p>
|
||||
|
||||
<p class="flex justify-between my-4">
|
||||
<span>{{ component.front_section_lang.at(0).data.contract_type }}</span>
|
||||
<span>50/50</span>
|
||||
</p>
|
||||
<p class="flex justify-between my-4">
|
||||
<span>{{ component.front_section_lang.at(0).data.special_fee }}</span>
|
||||
<span>{{ formater.price(investmentStore.calculationResult.calculator_output.total_input_price_increase) }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- next section -->
|
||||
<div class="flex flex-wrap">
|
||||
<!-- left -->
|
||||
<div class="w-full md:w-1/2 p-4">
|
||||
<h3 class="w-full border-b my-2">
|
||||
{{ component.front_section_lang.at(0).data.graphic_simulation_of_future_profits }}
|
||||
</h3>
|
||||
<p class="my-4 md:my-12">
|
||||
<img :src="`data:image/svg+xml;base64,${investmentStore.calculationResult.chart}`" alt="" class="bg-white rounded-2xl p-2">
|
||||
</p>
|
||||
</div>
|
||||
<!-- right -->
|
||||
<div class="w-full md:w-1/2 p-4">
|
||||
<h3 class="w-full border-b my-2">
|
||||
{{ component.front_section_lang.at(0).data.summary_of_the_contract_proposal }}
|
||||
</h3>
|
||||
|
||||
<p class="flex justify-between my-4">
|
||||
<span>{{ component.front_section_lang.at(0).data.save }}</span>
|
||||
<span>{{ component.front_section_lang.at(0).data.expected_value_of_savings }}</span>
|
||||
</p>
|
||||
<p class="flex justify-between my-4">
|
||||
<span></span>
|
||||
<span class="font-bold text-2xl">{{ formater.price(investmentStore.calculationResult.calculator_output.total_investement_value)
|
||||
}}</span>
|
||||
</p>
|
||||
<div class="flex flex-col items-center">
|
||||
<img :src="`/api/public/file/${investmentStore.calculationResult.calculator_output.investment_piece.cover_picture_uuid}_m.webp`" :alt="investmentStore.calculationResult.calculator_output.investment_piece.name" class="object-contain object-center w-48 max-h-64">
|
||||
<span class="my-2 text-sm">{{ investmentStore.calculationResult.calculator_output.investment_piece.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="my-4">
|
||||
<div class="flex w-full flex-wrap justify-center md:justify-end mt-8">
|
||||
<a :href="getPrintLink" target="_blank" class="my-2 mx-4">
|
||||
<UiButtonArrow :arrow="true" type="fill" class="mx-auto sm:m-0">
|
||||
{{ component.front_section_lang.at(0).data.print }}
|
||||
</UiButtonArrow>
|
||||
</a>
|
||||
<nuxt-link :to="getInvestLink" class="my-2 mx-4">
|
||||
<UiButtonArrow :arrow="true" type="fill" class="mx-auto sm:m-0">
|
||||
{{ component.front_section_lang.at(0).data.invest }}
|
||||
</UiButtonArrow>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</UiContainer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
component: {
|
||||
id: number
|
||||
name: string
|
||||
img: string[]
|
||||
component_name: string
|
||||
is_no_lang: boolean
|
||||
page_name: string
|
||||
front_section_lang: {
|
||||
data: {
|
||||
drawing_up_a_proposal_for_asave_contract: string
|
||||
simulation_of_the_contract_proposal: string
|
||||
monthly_savings: string
|
||||
details_of_the_contract_proposal: string
|
||||
current_price_per_bar: string
|
||||
money_for_spend: string
|
||||
weight_per_bar: string
|
||||
count: string
|
||||
contract_type: string
|
||||
special_fee: string
|
||||
graphic_simulation_of_future_profits: string
|
||||
summary_of_the_contract_proposal: string
|
||||
save: string
|
||||
expected_value_of_savings: string
|
||||
print: string
|
||||
invest: string
|
||||
}
|
||||
id_front_section: number
|
||||
id_lang: number
|
||||
}[]
|
||||
}
|
||||
}>()
|
||||
|
||||
const investmentStore = useInvestmentStore()
|
||||
const store = useStore()
|
||||
const formater = useFormater(useNuxtApp())
|
||||
const userStore = useUserStore()
|
||||
const router = useRouter()
|
||||
const menuStore = useMenuStore()
|
||||
|
||||
await investmentStore.getCalculator()
|
||||
|
||||
const getWeight = computed(() => {
|
||||
return investmentStore.calculationResult.calculator_output.investment_piece.features.find(feature => feature.feature_id === 1)?.value
|
||||
})
|
||||
|
||||
const getPrintLink = computed(() => {
|
||||
const query = new URLSearchParams({
|
||||
monthly_deposit: String(store.monthlySavings),
|
||||
years: String(store.storagePeriod),
|
||||
grid: 'false',
|
||||
legend: 'false',
|
||||
title: 'false',
|
||||
ingots_bought_dots: 'true',
|
||||
draw_linear: 'true',
|
||||
annotations: 'false',
|
||||
show_real_value: 'false',
|
||||
series_stroke_width: '1',
|
||||
})
|
||||
|
||||
return `/api/public/plan-prediction/easy/plan-proposal?${query.toString()}`
|
||||
})
|
||||
|
||||
const getInvestLink = computed(() => {
|
||||
if (userStore.isLogged) {
|
||||
return { path: '/golden-panel/save-contract' }
|
||||
}
|
||||
return { name: router.currentRoute.value.name, params: { id: menuStore.getLoginMenu()?.id, slug: menuStore.getLoginMenu()?.front_menu_lang.at(0)?.link_rewrite }, query: { to: btoa('/golden-panel/save-contract') } }
|
||||
})
|
||||
|
||||
/*
|
||||
INSERT INTO `front_page` (`created_at`, `updated_at`, `name`, `is_default`, `id`) VALUES ('2025-06-25 11:07:28.000','2025-06-25 11:07:28.000','investment-calculator','0','16');
|
||||
INSERT INTO `front_menu` (`created_at`, `updated_at`, `active`, `position_id`, `id_front_page`, `is_default`, `is_root`, `id`) VALUES ('2025-06-25 11:07:28.000','2025-06-25 11:07:28.000','1','1','16','0','0','16');
|
||||
INSERT INTO `front_menu_lang` (`name`, `id_lang`, `id_front_menu`, `link_rewrite`) VALUES ('investment','2','16','Investment');
|
||||
INSERT INTO `front_menu_lang` (`link_rewrite`, `id_front_menu`, `id_lang`, `name`) VALUES ('inwestycja','16','1','Inwestycja');
|
||||
INSERT INTO `front_menu_lang` (`name`, `id_lang`, `id_front_menu`, `link_rewrite`) VALUES ('investice','3','16','Investice');
|
||||
INSERT INTO `front_section` (`id`, `created_at`, `updated_at`, `name`, `img`, `component_name`, `is_no_lang`) VALUES ('35','2025-06-25 11:07:28.000','2025-06-25 11:07:28.000','investment-calculator','[]','InvestmentBlock','0');
|
||||
INSERT INTO `front_page_section` (`id_front_page`, `id_position`, `id_front_section`) VALUES ('16','1','35');
|
||||
INSERT INTO `front_page_section` (`id_front_page`, `id_position`, `id_front_section`) VALUES ('16','2','4');
|
||||
INSERT INTO `front_section_lang` (`data`, `id_front_section`, `id_lang`) VALUES ('{
|
||||
"drawing_up_a_proposal_for_asave_contract": "Przygotowanie propozycji umowy SAVE",
|
||||
"simulation_of_the_contract_proposal": "Symulacja propozycji umowy",
|
||||
"monthly_savings": "Miesięczne oszczędności",
|
||||
"details_of_the_contract_proposal": "Szczegóły propozycji umowy",
|
||||
"current_price_per_bar": "Aktualna cena za sztabkę",
|
||||
"money_for_spend": "Kwota do wydania",
|
||||
"weight_per_bar": "Waga jednej sztabki",
|
||||
"count": "Liczba",
|
||||
"contract_type": "Typ umowy",
|
||||
"special_fee": "Opłata specjalna",
|
||||
"graphic_simulation_of_future_profits": "Graficzna symulacja przyszłych zysków",
|
||||
"summary_of_the_contract_proposal": "Podsumowanie propozycji umowy",
|
||||
"save": "Zaoszczędzona kwota",
|
||||
"expected_value_of_savings": "Oczekiwana wartość oszczędności",
|
||||
"print": "Drukuj",
|
||||
"invest": "Zainwestuj"
|
||||
}', '35', '1');
|
||||
INSERT INTO `front_section_lang` (`data`, `id_front_section`, `id_lang`) VALUES ('{
|
||||
"drawing_up_a_proposal_for_asave_contract": "Drawing up a proposal for a SAVE contract",
|
||||
"simulation_of_the_contract_proposal": "Simulation of the contract proposal",
|
||||
"monthly_savings": "Monthly savings",
|
||||
"details_of_the_contract_proposal": "Details of the contract proposal",
|
||||
"current_price_per_bar": "Current price per bar",
|
||||
"money_for_spend": "Money for spend",
|
||||
"weight_per_bar": "Weight per bar",
|
||||
"count": "Count",
|
||||
"contract_type": "Contract type",
|
||||
"special_fee": "Special fee",
|
||||
"graphic_simulation_of_future_profits": "Graphic simulation of future profits",
|
||||
"summary_of_the_contract_proposal": "Summary of the contract proposal",
|
||||
"save": "Saved Amount",
|
||||
"expected_value_of_savings": "Expected value of savings",
|
||||
"print": "Print",
|
||||
"invest": "Invest"
|
||||
}', '35', '2');
|
||||
INSERT INTO `front_section_lang` (`data`, `id_front_section`, `id_lang`) VALUES ('{
|
||||
"drawing_up_a_proposal_for_asave_contract": "Vypracování návrhu smlouvy SAVE",
|
||||
"simulation_of_the_contract_proposal": "Simulace návrhu smlouvy",
|
||||
"monthly_savings": "Měsíční úspory",
|
||||
"details_of_the_contract_proposal": "Podrobnosti návrhu smlouvy",
|
||||
"current_price_per_bar": "Aktuální cena za slitku",
|
||||
"money_for_spend": "Částka k utracení",
|
||||
"weight_per_bar": "Hmotnost slitku",
|
||||
"count": "Počet",
|
||||
"contract_type": "Typ smlouvy",
|
||||
"special_fee": "Speciální poplatek",
|
||||
"graphic_simulation_of_future_profits": "Grafická simulace budoucích zisků",
|
||||
"summary_of_the_contract_proposal": "Shrnutí návrhu smlouvy",
|
||||
"save": "Ušetřená částka",
|
||||
"expected_value_of_savings": "Očekávaná hodnota úspor",
|
||||
"print": "Tisk",
|
||||
"invest": "Investovat"
|
||||
}', '35', '3');
|
||||
*/
|
||||
</script>
|
||||
Reference in New Issue
Block a user