Alexis Saettler
152 lines
15 KiB
Vue
152 lines
15 KiB
Vue
<template>
|
|
<div>
|
|
<!-- Left columns: showing calendar -->
|
|
<journal-calendar :journal-entry="journalEntry" />
|
|
|
|
<!-- Right column: showing logs -->
|
|
<div :class="[ dirltr ? 'fl' : 'fr' ]" class="journal-calendar-content">
|
|
<div class="br3 ba b--gray-monica bg-white mb3 journal-line">
|
|
<!-- Actual log -->
|
|
<div class="flex pb2 pt3">
|
|
<!-- Day -->
|
|
<div class="flex-none w-10 tc">
|
|
<h3 class="mb0 normal fw5">
|
|
{{ day.day }}
|
|
</h3>
|
|
<p class="mb0 black-60 f6">
|
|
{{ day.day_name }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Log content -->
|
|
<div class="flex-auto flex items-center">
|
|
<p v-if="day.comment" class="mb2">
|
|
{{ day.comment }}
|
|
</p>
|
|
<p v-if="!day.comment" class="mb2">
|
|
{{ $t('journal.journal_entry_rate') }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex-none">
|
|
<!-- sad smiley color -->
|
|
<svg v-if="day.rate == 1" width="42px" height="41px" viewBox="0 0 42 41" version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="mt1" :class="[ dirltr ? 'mr3' : 'ml3' ]"
|
|
>
|
|
<defs />
|
|
<g id="App" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
<g id="Desktop" transform="translate(-695.000000, -345.000000)">
|
|
<g id="Group" transform="translate(695.000000, 345.000000)">
|
|
<path id="Fill-87" d="M41.9467391,20.5475529 C41.9467391,31.8129081 32.5673478,40.9454502 20.9978696,40.9454502 C9.42869565,40.9454502 0.0496086957,31.8129081 0.0496086957,20.5475529 C0.0496086957,9.28219757 9.42869565,0.149951854 20.9978696,0.149951854 C32.5673478,0.149951854 41.9467391,9.28219757 41.9467391,20.5475529" fill="#FF7272" />
|
|
<path id="Fill-88" d="M36.4447391,28.5705697 C36.4447391,30.1432861 35.1342174,31.4187659 33.5184348,31.4187659 C31.9026522,31.4187659 30.5927391,30.1432861 30.5927391,28.5705697 C30.5927391,26.996668 33.5184348,21.6244798 33.5184348,21.6244798 C33.5184348,21.6244798 36.4447391,26.996668 36.4447391,28.5705697" fill="#D0021B" />
|
|
<path id="Fill-89" d="M32.3226522,15.4969018 L32.6711304,15.4939383 L32.3226522,15.4939383 L32.3226522,15.4969018 L32.6711304,15.4939383 L32.3226522,15.4939383 C32.3226522,15.4942346 32.3220435,15.6601893 32.284913,15.8954892 C32.2575217,16.071816 32.2094348,16.2857789 32.1336522,16.4935185 C32.0767391,16.6496937 32.0043043,16.8014236 31.9184783,16.9350764 C31.7876087,17.1365927 31.6351304,17.2927678 31.4339565,17.4077507 C31.2312609,17.5212518 30.9661739,17.6095634 30.5346087,17.6116378 C30.282913,17.6113414 30.0866087,17.5793359 29.9283478,17.532513 C29.6532174,17.4486467 29.4806522,17.3265515 29.3254348,17.1608932 C29.2113043,17.0367236 29.1136087,16.8844009 29.035087,16.7154828 C28.9163913,16.4629947 28.8448696,16.1761303 28.8095652,15.9470537 C28.7733478,15.717977 28.7715217,15.5481699 28.7718261,15.528611 L28.7636087,15.528611 L28.7718261,15.528611 L28.7636087,15.528611 L28.7718261,15.528611 L28.076087,15.5206096 L28.7715217,15.536316 L28.7718261,15.528611 L28.076087,15.5206096 L28.7715217,15.536316 C28.784913,14.9637726 28.3192609,14.4887274 27.7312609,14.4753918 C27.1429565,14.4623525 26.655087,14.9157643 26.6416957,15.488604 L26.6413913,15.528611 C26.6413913,15.6296655 26.6468696,15.9049723 26.7065217,16.2780739 C26.7515652,16.5581223 26.8267391,16.8935877 26.9612609,17.2533536 C27.0623043,17.5227335 27.1968261,17.8063381 27.3812609,18.0863866 C27.656087,18.5051256 28.0526522,18.9188268 28.5907391,19.2172488 C29.1276087,19.5171525 29.7916957,19.6878486 30.5346087,19.6860706 C30.9835217,19.6860706 31.4026087,19.6256157 31.7836522,19.5094474 C32.4526087,19.3082274 32.9897826,18.9303843 33.368087,18.5045329 C33.6538696,18.1850703 33.8583913,17.8421962 34.0081304,17.5129541 C34.2324348,17.0186464 34.3377391,16.5521954 34.3937391,16.1906514 C34.4491304,15.8291074 34.4527826,15.5706923 34.453087,15.4939383 L34.453087,15.4788246 C34.447913,14.9059848 33.9667391,14.4454607 33.3784348,14.4504986 C32.7901304,14.4555365 32.3174783,14.924062 32.3226522,15.4969018" fill="#36301D" />
|
|
<path id="Fill-90" d="M13.2248261,15.4969018 L13.5733043,15.4939383 L13.2248261,15.4939383 L13.2248261,15.4969018 L13.5733043,15.4939383 L13.2248261,15.4939383 C13.2248261,15.4942346 13.2242174,15.6601893 13.187087,15.8954892 C13.1596957,16.071816 13.1116087,16.2857789 13.0358261,16.4935185 C12.978913,16.6496937 12.9064783,16.8014236 12.8206522,16.9350764 C12.6897826,17.1365927 12.5373043,17.2927678 12.3361304,17.4077507 C12.1334348,17.5212518 11.8683478,17.6095634 11.4367826,17.6116378 C11.185087,17.6113414 10.9887826,17.5793359 10.8305217,17.532513 C10.5553913,17.4486467 10.3828261,17.3265515 10.2276087,17.1608932 C10.1134783,17.0367236 10.0157826,16.8844009 9.93726087,16.7154828 C9.81856522,16.4629947 9.74704348,16.1761303 9.71173913,15.9470537 C9.67552174,15.717977 9.67369565,15.5481699 9.674,15.528611 L9.66578261,15.528611 L9.674,15.528611 L9.66578261,15.528611 L9.674,15.528611 L8.97826087,15.5206096 L9.67369565,15.536316 L9.674,15.528611 L8.97826087,15.5206096 L9.67369565,15.536316 C9.68708696,14.9637726 9.22143478,14.4887274 8.63343478,14.4753918 C8.04513043,14.4623525 7.55726087,14.9157643 7.54386957,15.488604 L7.54356522,15.528611 C7.54356522,15.6296655 7.54904348,15.9049723 7.60869565,16.2780739 C7.65373913,16.5581223 7.72891304,16.8935877 7.86343478,17.2533536 C7.96447826,17.5227335 8.099,17.8063381 8.28343478,18.0863866 C8.55826087,18.5051256 8.95482609,18.9188268 9.49291304,19.2172488 C10.0297826,19.5171525 10.6938696,19.6878486 11.4367826,19.6860706 C11.8856957,19.6860706 12.3047826,19.6256157 12.6858261,19.5094474 C13.3547826,19.3082274 13.8919565,18.9303843 14.2702609,18.5045329 C14.5560435,18.1850703 14.7605652,17.8421962 14.9103043,17.5129541 C15.1346087,17.0186464 15.239913,16.5521954 15.295913,16.1906514 C15.3513043,15.8291074 15.3549565,15.5706923 15.3552609,15.4939383 L15.3552609,15.4788246 C15.350087,14.9059848 14.868913,14.4454607 14.2806087,14.4504986 C13.6923043,14.4555365 13.2196522,14.924062 13.2248261,15.4969018" fill="#36301D" />
|
|
<path id="Fill-91" d="M14.5152609,28.1364206 L14.4954783,28.13079 L14.5152609,28.1367169 L14.5152609,28.1364206 L14.4954783,28.13079 L14.5152609,28.1367169 C14.5359565,28.0605556 14.9410435,26.8330841 15.946913,25.6951096 C16.4493913,25.1240479 17.0946087,24.5740268 17.9184783,24.1653636 C18.7438696,23.757293 19.7503478,23.4816898 21.0316522,23.4802081 C22.3558696,23.4816898 23.3818261,23.7729994 24.2145217,24.1988509 C24.8381304,24.5192025 25.353087,24.9201608 25.7794783,25.3477903 C26.418913,25.9884936 26.8541304,26.6917263 27.1222609,27.2287081 C27.2564783,27.4969026 27.349,27.7227194 27.4062174,27.8756348 C27.4348261,27.9520924 27.4546087,28.0101765 27.4661739,28.0463309 L27.4780435,28.0836707 L27.4795652,28.089005 L27.9382174,27.9615755 L27.4783478,28.0848561 L27.4795652,28.089005 L27.9382174,27.9615755 L27.4783478,28.0848561 C27.6347826,28.6369516 28.2215652,28.9614521 28.7885652,28.8091295 C29.3555652,28.6568069 29.6885217,28.0857452 29.5323913,27.5333533 C29.505913,27.4509687 29.0932174,25.9884936 27.8265217,24.4703052 C27.1925652,23.7134336 26.3367391,22.9435227 25.2082174,22.3638669 C24.0812174,21.7836184 22.6845652,21.4042936 21.0316522,21.4057753 C19.3775217,21.4042936 17.9766087,21.7868783 16.8444348,22.3709792 C15.9943913,22.8077955 15.2953043,23.3533713 14.7292174,23.9188024 C13.8797826,24.7681345 13.3249565,25.6610296 12.9749565,26.3482595 C12.6255652,27.0357858 12.4806957,27.5200177 12.467,27.5665443 C12.305087,28.117158 12.6328696,28.6911832 13.1983478,28.8488401 C13.7641304,29.0062006 14.3536522,28.6870343 14.5152609,28.1364206" fill="#36301D" />
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
|
|
<!-- mediocre day monochrome -->
|
|
<svg v-else-if="day.rate == 2" width="42px" height="41px" viewBox="0 0 42 41" version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="mt1" :class="[ dirltr ? 'mr3' : 'ml3' ]"
|
|
>
|
|
<defs />
|
|
<g id="App" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
<g id="Desktop" transform="translate(-754.000000, -165.000000)">
|
|
<g id="Group-2" transform="translate(754.000000, 165.000000)">
|
|
<path id="Fill-96" d="M41.8643309,20.5475529 C41.8643309,31.8129081 32.5521151,40.9454502 21.0661727,40.9454502 C9.57992806,40.9454502 0.268618705,31.8129081 0.268618705,20.5475529 C0.268618705,9.28219757 9.57992806,0.149951854 21.0661727,0.149951854 C32.5521151,0.149951854 41.8643309,9.28219757 41.8643309,20.5475529" fill="#E5E5E5" />
|
|
<path id="Fill-97" d="M11.5989496,21.8043628 L11.5989496,21.8043628 C10.7680144,21.8043628 10.0881583,21.1375808 10.0881583,20.3226251 L10.0881583,16.7664546 C10.0881583,15.9514989 10.7680144,15.2847169 11.5989496,15.2847169 C12.4298849,15.2847169 13.109741,15.9514989 13.109741,16.7664546 L13.109741,20.3226251 C13.109741,21.1375808 12.4298849,21.8043628 11.5989496,21.8043628" fill="#36301D" />
|
|
<path id="Fill-98" d="M30.534,21.8043628 L30.534,21.8043628 C29.7030647,21.8043628 29.0232086,21.1375808 29.0232086,20.3226251 L29.0232086,16.7664546 C29.0232086,15.9514989 29.7030647,15.2847169 30.534,15.2847169 C31.3649353,15.2847169 32.0447914,15.9514989 32.0447914,16.7664546 L32.0447914,20.3226251 C32.0447914,21.1375808 31.3649353,21.8043628 30.534,21.8043628" fill="#36301D" />
|
|
<path id="Fill-99" d="M9.15690647,27.2639734 L32.9760432,27.2639734 C33.4767194,27.2639734 33.882518,26.8659787 33.882518,26.3749308 C33.882518,25.883883 33.4767194,25.4858882 32.9760432,25.4858882 L9.15690647,25.4858882 C8.65623022,25.4858882 8.25043165,25.883883 8.25043165,26.3749308 C8.25043165,26.8659787 8.65623022,27.2639734 9.15690647,27.2639734" fill="#36301D" />
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
|
|
<!-- happy day color -->
|
|
<svg v-else-if="day.rate == 3" width="42px" height="42px" viewBox="0 0 42 42" version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="mt1" :class="[ dirltr ? 'mr3' : 'ml3' ]"
|
|
>
|
|
<defs />
|
|
<g id="App" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
<g id="Desktop" transform="translate(-814.000000, -345.000000)">
|
|
<g id="Group-3" transform="translate(814.000000, 345.000000)">
|
|
<path id="Fill-11" d="M42,20.5961538 C42,31.9710023 32.5972745,41.1923077 20.9996949,41.1923077 C9.40181023,41.1923077 0,31.9710023 0,20.5961538 C0,9.22130542 9.40181023,0 20.9996949,0 C32.5972745,0 42,9.22130542 42,20.5961538" fill="#F9CE32" />
|
|
<path id="Fill-12" d="M11.3076923,21 L11.3076923,21 C10.4192308,21 9.69230769,20.3391608 9.69230769,19.5314685 L9.69230769,16.006993 C9.69230769,15.1993007 10.4192308,14.5384615 11.3076923,14.5384615 C12.1961538,14.5384615 12.9230769,15.1993007 12.9230769,16.006993 L12.9230769,19.5314685 C12.9230769,20.3391608 12.1961538,21 11.3076923,21" fill="#36301D" />
|
|
<path id="Fill-13" d="M30.6923077,21 L30.6923077,21 C29.8038462,21 29.0769231,20.3391608 29.0769231,19.5314685 L29.0769231,16.006993 C29.0769231,15.1993007 29.8038462,14.5384615 30.6923077,14.5384615 C31.5807692,14.5384615 32.3076923,15.1993007 32.3076923,16.006993 L32.3076923,19.5314685 C32.3076923,20.3391608 31.5807692,21 30.6923077,21" fill="#36301D" />
|
|
<path id="Fill-14" d="M27.0720842,24.0517885 L27.6146482,24.3231607 L27.078106,24.0385354 L27.0720842,24.0517885 L27.6146482,24.3231607 L27.078106,24.0385354 L27.0756973,24.0432687 C27.0404698,24.1114273 26.6683226,24.8097374 25.6979098,25.4916389 C24.7250883,26.1716472 23.1440652,26.864593 20.5631224,26.868064 C19.1874426,26.8677485 18.0993036,26.6692681 17.239993,26.3852739 C15.9516293,25.9577049 15.1687955,25.3417531 14.6996974,24.8539142 C14.4660516,24.6096793 14.3127969,24.3966836 14.222771,24.2556332 C14.1776075,24.1852658 14.1484018,24.1325691 14.1330462,24.1035385 L14.1200993,24.0782946 L14.0261593,24.1278358 L14.1210026,24.0801879 L14.1200993,24.0782946 L14.0261593,24.1278358 L14.1210026,24.0801879 L13.4688418,24.4099367 L14.1264222,24.0921788 L14.1210026,24.0801879 L13.4688418,24.4099367 L14.1264222,24.0921788 C13.8828405,23.5383902 13.2565734,23.296364 12.7281606,23.5516432 C12.1997478,23.8069224 11.9688119,24.4629489 12.2123936,25.0170531 C12.2659876,25.1388551 12.7408064,26.1596563 14.0342887,27.154267 C14.6795244,27.6503102 15.5267914,28.1353091 16.6058977,28.491564 C17.6847028,28.84845 18.9935407,29.0772231 20.5631224,29.0769075 C23.7028881,29.0813252 25.8180447,28.1431978 27.1220651,27.1429072 C28.4293976,26.1448255 28.919873,25.1224465 28.9737681,25.0038001 C29.224576,24.4531669 29.0023717,23.7939849 28.4769698,23.5311325 C27.9518689,23.2682801 27.3228921,23.5014709 27.0720842,24.0517885" fill="#36301D" />
|
|
<path id="Fill-15" d="M7.26939206,25.8461538 C5.48457391,25.8461538 4.03846154,24.5805233 4.03846154,23.0190896 C4.03846154,21.457656 5.48457391,20.1923077 7.26939206,20.1923077 C9.05324247,20.1923077 10.5,21.457656 10.5,23.0190896 C10.5,24.5805233 9.05324247,25.8461538 7.26939206,25.8461538" fill="#EB9260" />
|
|
<path id="Fill-16" d="M37.1540074,25.8461538 C35.3691893,25.8461538 33.9230769,24.5805233 33.9230769,23.0190896 C33.9230769,21.457656 35.3691893,20.1923077 37.1540074,20.1923077 C38.9381804,20.1923077 40.3846154,21.457656 40.3846154,23.0190896 C40.3846154,24.5805233 38.9381804,25.8461538 37.1540074,25.8461538" fill="#EB9260" />
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Edit/Delete -->
|
|
<div class="flex bt b--gray-monica">
|
|
<div class="w-10">
|
|
|
|
</div>
|
|
<div class="flex-none w-90 mt2 pt0 pr3 pb2">
|
|
<ul class="f7">
|
|
<li class="di">
|
|
{{ $t('journal.journal_entry_rate') }}
|
|
</li>
|
|
<li class="di">
|
|
<a v-cy-name="'entry-delete-button-' + journalEntry.id" class="pointer" href="" @click.prevent="destroy()">
|
|
{{ $t('app.delete') }}
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
|
|
props: {
|
|
journalEntry: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
day: [],
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
dirltr() {
|
|
return this.$root.htmldir == 'ltr';
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
this.prepareComponent();
|
|
},
|
|
|
|
methods: {
|
|
prepareComponent() {
|
|
this.day = this.journalEntry.object;
|
|
},
|
|
|
|
destroy() {
|
|
axios.delete('journal/day/' + this.day.id)
|
|
.then(response => {
|
|
this.$emit('deleteJournalEntry', this.journalEntry.id);
|
|
});
|
|
},
|
|
|
|
}
|
|
};
|
|
</script>
|