kamilniemczycki/kamilcraft-cv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

- update pages

Browse Source
This commit is contained in:
Kamil Niemczycki 2023-07-30 23:22:36 +02:00
parent 155f52c331
commit c8000b55cd
Signed by: kamilniemczycki
GPG Key ID: 04D4E2012F969213
9 changed files with 144 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -7,7 +7,7 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<title>Kamil Niemczycki CV</title> <title>Kamil Niemczycki CV</title>
</head> </head>
<body> <body class="min-h-screen">
<div id="cv"></div> <div id="cv"></div>
<script type="module" src="/src/main.js"></script> <script type="module" src="/src/main.js"></script>
</body> </body>

11
src/App.vue
View File

@ -1,4 +1,11 @@
<script setup> <script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
const isErrorPage = computed(() => route.name === 'NotFound');
function print() { function print() {
window.print(); window.print();
} }
@ -17,10 +24,10 @@ function print() {
</style> </style>
<template> <template>
<div class="print-section"> <div v-if="!isErrorPage" class="print-section">
<button class="px-4 py-2 w-full sm:w-80 font-semibold text-sm bg-orange-300 text-orange-700 rounded-full shadow-sm" @click="print">Drukuj CV</button> <button class="px-4 py-2 w-full sm:w-80 font-semibold text-sm bg-orange-300 text-orange-700 rounded-full shadow-sm" @click="print">Drukuj CV</button>
</div> </div>
<main class="main bg-blob"> <main class="main bg-white">
<router-view /> <router-view />
</main> </main>
</template> </template>

6
src/components/Body.vue
View File

@ -8,16 +8,16 @@ import Links from './Side/Links.vue';
const props = defineProps({ const props = defineProps({
token: { token: {
type: String,
default: null, default: null,
type: [String, null],
}, },
rodo: { rodo: {
type: String,
default: null, default: null,
type: [String, null],
}, },
loading: { loading: {
required: true,
type: Boolean, type: Boolean,
default: false,
}, },
}); });

18
src/components/Header.vue
View File

@ -6,21 +6,35 @@ import ContactList from './Header/ContactList.vue';
defineProps({ defineProps({
loading: { loading: {
tyle: Boolean, tyle: Boolean,
default: false,
}, },
email: { email: {
type: String, type: String,
default: 'contact@kamilcraft.com',
}, },
tel: { tel: {
type: Object, type: Object,
default: {
hasPhoneNumber: false,
phoneNumber: '',
formattedPhoneNumber: '',
},
}, },
locations: { locations: {
type: Array, type: Array,
default: [
'Wrocław',
'Legnica',
'Remote',
],
}, },
position: { position: {
type: [String, null], type: String,
default: null,
}, },
mission: { mission: {
type: Array, type: Array,
default: [],
}, },
}); });
</script> </script>
@ -50,7 +64,7 @@ defineProps({
</style> </style>
<template> <template>
<div class="flex justify-between mx-1 mt-1 print:border-b-2 md:border-b-2"> <div class="bg-blob flex justify-between mx-1 mt-1 print:border-b-2 md:border-b-2">
<div class="flex-shrink-0 w-32 h-32"> <div class="flex-shrink-0 w-32 h-32">
<img class="w-full h-full" alt="Profilowe" src="/me.webp" /> <img class="w-full h-full" alt="Profilowe" src="/me.webp" />
</div> </div>

15
src/router.js
View File

@ -1,17 +1,26 @@
import { createRouter, createWebHistory } from 'vue-router'; import { createRouter, createWebHistory } from 'vue-router';
const Home = import('./views/Home.vue'); const Home = () => import('./views/Home.vue');
const Show = () => import('./views/Show.vue');
const NotFound = () => import('./views/NotFound.vue');
export default createRouter({ export default createRouter({
history: createWebHistory(), history: createWebHistory(),
routes: [ routes: [
{ {
path: '/', path: '/',
name: 'Home',
component: Home, component: Home,
}, },
{ {
path: '/show/:token', path: '/show/:token',
component: Home, name: 'Show',
} component: Show,
},
{
path: '/:pathMatch(.*)*',
name: 'NotFound',
component: NotFound
},
], ],
}); });

1
src/style.css
View File

@ -13,7 +13,6 @@
.bg-blob { .bg-blob {
background-image: var(--theme-bg-blob); background-image: var(--theme-bg-blob);
background-color: white;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 170px; background-size: 170px;
background-position: -25px -22px; background-position: -25px -22px;

79
src/views/Home.vue
View File

@ -1,87 +1,12 @@
<script setup> <script setup>
import { onMounted, ref, reactive } from 'vue';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import Header from '../components/Header.vue'; import Header from '../components/Header.vue';
import Body from '../components/Body.vue'; import Body from '../components/Body.vue';
const loading = ref(false);
const token = ref(null);
const email = ref('contact@kamilcraft.com');
const tel = reactive({
hasPhoneNumber: false,
phoneNumber: '',
formattedPhoneNumber: '',
});
const locations = reactive([
'Wrocław',
'Legnica',
'Remote',
]);
const position = ref(null);
const mission = reactive([]);
const rodo = ref(null);
onMounted(() => {
const router = useRoute();
token.value = router.params['token'] ?? null;
if (token.value) {
loading.value = true;
const apiUrl = import.meta.env.VITE_API_URL;
fetch(`${apiUrl}/v1/cv/${token.value}`, {
method: 'GET',
cache: "no-cache",
credentials: "same-origin",
headers: {
"Content-Type": "application/json",
}
}).then(response => (response.json().then(data => ({ status: response.status, data }))))
.then(response => {
setTimeout(() => showData(response), 1000);
})
.catch(() => {
loading.value = false;
});
}
});
function showData(response) {
if (response.status === 200) {
const data = response.data;
email.value = data.email;
tel.hasPhoneNumber = true;
tel.phoneNumber = data.phone.number;
tel.formattedPhoneNumber = data.phone.formattedNumber;
while(locations.length > 0) {
locations.pop();
}
if (data.position) {
position.value = data.position;
}
data.locations?.forEach(value => {
locations.push(value);
});
data.mission?.forEach(value => {
mission.push(value);
});
if (data.rodo) {
rodo.value = data.rodo;
}
loading.value = false;
}
}
</script> </script>
<template> <template>
<div class="grid grid-rows-[max-content_max-content_auto] h-full"> <div class="grid grid-rows-[max-content_max-content_auto] h-full">
<Header :loading="loading" <Header />
:email="email" <Body />
:tel="tel"
:locations="locations"
:position="position"
:mission="mission" />
<Body :token="token" :rodo="rodo" :loading="loading" />
</div> </div>
</template> </template>

14
src/views/NotFound.vue Normal file
View File

@ -0,0 +1,14 @@
<script setup>
import { useRoute } from 'vue-router';
import Header from '../components/Header.vue';
import Body from '../components/Body.vue';
</script>
<template>
<div class="grid grid-rows-[max-content_max-content_auto] h-full px-5 py-4">
<header>
<h1 class="text-3xl mb-4">Błąd 404</h1>
</header>
<p>Strona nie została znaleziona.</p>
</div>
</template>

87
src/views/Show.vue Normal file
View File

@ -0,0 +1,87 @@
<script setup>
import { onMounted, ref, reactive } from 'vue';
import { useRoute } from 'vue-router';
import Header from '../components/Header.vue';
import Body from '../components/Body.vue';
const loading = ref(false);
const token = ref(null);
const email = ref('contact@kamilcraft.com');
const tel = reactive({
hasPhoneNumber: false,
phoneNumber: '',
formattedPhoneNumber: '',
});
const locations = reactive([
'Wrocław',
'Legnica',
'Remote',
]);
const position = ref(null);
const mission = reactive([]);
const rodo = ref(null);
onMounted(() => {
const router = useRoute();
token.value = router.params['token'] ?? null;
if (token.value) {
loading.value = true;
const apiUrl = import.meta.env.VITE_API_URL;
fetch(`${apiUrl}/v1/cv/${token.value}`, {
method: 'GET',
cache: "no-cache",
credentials: "same-origin",
headers: {
"Content-Type": "application/json",
}
}).then(response => (response.json().then(data => ({ status: response.status, data }))))
.then(response => {
setTimeout(() => showData(response), 1000);
})
.catch(() => {
loading.value = false;
});
}
});
function showData(response) {
if (response.status === 200) {
const data = response.data;
email.value = data.email;
tel.hasPhoneNumber = true;
tel.phoneNumber = data.phone.number;
tel.formattedPhoneNumber = data.phone.formattedNumber;
while(locations.length > 0) {
locations.pop();
}
if (data.position) {
position.value = data.position;
}
data.locations?.forEach(value => {
locations.push(value);
});
data.mission?.forEach(value => {
mission.push(value);
});
if (data.rodo) {
rodo.value = data.rodo;
}
loading.value = false;
}
}
</script>
<template>
<div class="grid grid-rows-[max-content_max-content_auto] h-full">
<Header :loading="loading"
:email="email"
:tel="tel"
:locations="locations"
:position="position"
:mission="mission" />
<Body :token="token" :rodo="rodo" :loading="loading" />
</div>
</template>