<div class='tpl-editeren'>
<div class='uhasselt-container'>
<div class='intro'>
<nav class='mol-breadcrumbs'>
<ol>
<li>
<a href="" class="atm-link " aria-label="" title="">
<span class="text">Home</span>
</a>
<span class="atm-icon fal fa-slash fa-sm " aria-hidden="true"></span>
</li>
<li>
<a href="" class="atm-link " aria-label="" title="">
<span class="text">Mijn afwezigheid</span>
</a>
<span class="atm-icon fal fa-slash fa-sm " aria-hidden="true"></span>
</li>
<li>
<a href="" class="atm-link " aria-label="" title="">
<span class="text">Afwezigheid</span>
</a>
<span class="atm-icon fal fa-slash fa-sm " aria-hidden="true"></span>
</li>
<li>
Afwezigheid aanpassen
</li>
</ol>
</nav>
<div class="atm-heading h1">Afwezigheid - Editeren</div>
<div class='atm-paragraph '>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin mauris vel nisi condimentum accumsan. Phasellus eget est condimentum erat fringilla congue. <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat. Cras fringilla blandit purus nec <a href='javascript:(void);'>fermentum</a>. Vivamus tristique ac mi a pulvinar. Quisque non ipsum tortor. Nunc nec odio non tellus malesuada molestie id sed ipsum. Curabitur risus ex, <a href="/some/file" download="download">aliquet</a> sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
</div>
</div>
<div class='mb-16'>
<div class='mol-indication-step'>
<span class='step'>Stap 1</span>
<h2 class="atm-heading ">Periode afwezigheid</h2>
</div>
<section class='org-abcenses-period'>
<div class='wrapper'>
<div class='col'>
<div class='head'>Van</div>
<div>
<div>
<link rel='stylesheet' href='https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css' />
<script src='https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.js' defer></script>
<style>
[x-cloak] {
display: none;
}
</style>
<div class='antialiased sans-serif'>
<div x-data='app()' x-init='[initDate(), getNoOfDays()]' x-cloak>
<div class='container'>
<div class='relative'>
<input type='hidden' name='date' x-ref='date' />
<input type='text' readonly x-model='datepickerValue' @click='showDatepicker = !showDatepicker' @keydown.escape='showDatepicker = false' class='w-full pl-4 pr-10 py-3 leading-none rounded-lg shadow-sm focus:outline-none focus:shadow-outline text-gray-600 font-medium' placeholder='Select date' />
<div class='absolute top-0 right-0 px-3 py-2'>
<svg class='h-6 w-6 text-gray-400' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'></path>
</svg>
</div>
<div class='bg-white mt-12 rounded-lg shadow p-4 absolute top-0 left-0 z-10' style='width: 17rem' x-show.transition='showDatepicker' @click.away='showDatepicker = false'>
<div class='flex justify-between items-center mb-2'>
<div>
<span x-text='MONTH_NAMES[month]' class='text-lg font-bold text-gray-800'></span>
<span x-text='year' class='ml-1 text-lg text-gray-600 font-normal'></span>
</div>
<div>
<button type='button' class='transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full' :class="{'cursor-not-allowed opacity-25': month == 0 }" :disabled='month == 0 ? true : false' @click='month--; getNoOfDays()'>
<svg class='h-6 w-6 text-gray-500 inline-flex' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 19l-7-7 7-7'></path>
</svg>
</button>
<button type='button' class='transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full' :class="{'cursor-not-allowed opacity-25': month == 11 }" :disabled='month == 11 ? true : false' @click='month++; getNoOfDays()'>
<svg class='h-6 w-6 text-gray-500 inline-flex' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5l7 7-7 7'></path>
</svg>
</button>
</div>
</div>
<div class='flex flex-wrap mb-3 -mx-1'>
<template x-for='(day, index) in DAYS' :key='index'>
<div style='width: 14.26%' class='px-1'>
<div x-text='day' class='text-gray-800 font-medium text-center text-xs'></div>
</div>
</template>
</div>
<div class='flex flex-wrap -mx-1'>
<template x-for='blankday in blankdays'>
<div style='width: 14.28%' class='text-center border p-1 border-transparent text-sm'></div>
</template>
<template x-for='(date, dateIndex) in no_of_days' :key='dateIndex'>
<div style='width: 14.28%' class='px-1 mb-1'>
<div @click='getDateValue(date)' x-text='date' class='cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100' :class="{'bg-blue-500 text-white': isToday(date) == true, 'text-gray-700 hover:bg-blue-200': isToday(date) == false }"></div>
</div>
</template>
</div>
</div>
</div>
</div>
</div>
<script>
const MONTH_NAMES = ["January", "February", "March", "April",
"May", "June", "July", "August", "September", "October", "November",
"December",
];
const DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu",
"Fri", "Sat"
];
function app() {
return {
showDatepicker: false,
datepickerValue: "",
month: "",
year: "",
no_of_days: [],
blankdays: [],
days: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
initDate() {
let today = new Date();
this.month = today.getMonth();
this.year = today.getFullYear();
this.datepickerValue = new Date(
this.year, this.month, today.getDate()).toDateString();
},
isToday(date) {
const today = new Date();
const d = new
Date(this.year, this.month, date);
return today.toDateString() ===
d.toDateString() ? true : false;
},
getDateValue(date) {
let
selectedDate = new Date(this.year, this.month, date);
this.datepickerValue = selectedDate.toDateString();
this.$refs.date.value = selectedDate.getFullYear() + "-" + ("0" +
selectedDate.getMonth()).slice(-2) + "-" + ("0" +
selectedDate.getDate()).slice(-2);
console.log(this.$refs.date.value);
this.showDatepicker = false;
},
getNoOfDays() {
let daysInMonth = new Date(this.year, this.month +
1, 0).getDate(); // find where to start calendar day of week let
dayOfWeek = new Date(this.year, this.month).getDay();
let
blankdaysArray = [];
for (var i = 1; i <= dayOfWeek; i++) {
blankdaysArray.push(i);
}
let daysArray = [];
for (var i = 1; i <=
daysInMonth; i++) {
daysArray.push(i);
}
this.blankdays =
blankdaysArray;
this.no_of_days = daysArray;
},
};
}
</script>
</div>
</div>
</div>
</div>
<div class='col'>
<div class='head'>Tot/met</div>
<div>
<div>
<link rel='stylesheet' href='https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css' />
<script src='https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.js' defer></script>
<style>
[x-cloak] {
display: none;
}
</style>
<div class='antialiased sans-serif'>
<div x-data='app()' x-init='[initDate(), getNoOfDays()]' x-cloak>
<div class='container'>
<div class='relative'>
<input type='hidden' name='date' x-ref='date' />
<input type='text' readonly x-model='datepickerValue' @click='showDatepicker = !showDatepicker' @keydown.escape='showDatepicker = false' class='w-full pl-4 pr-10 py-3 leading-none rounded-lg shadow-sm focus:outline-none focus:shadow-outline text-gray-600 font-medium' placeholder='Select date' />
<div class='absolute top-0 right-0 px-3 py-2'>
<svg class='h-6 w-6 text-gray-400' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'></path>
</svg>
</div>
<div class='bg-white mt-12 rounded-lg shadow p-4 absolute top-0 left-0 z-10' style='width: 17rem' x-show.transition='showDatepicker' @click.away='showDatepicker = false'>
<div class='flex justify-between items-center mb-2'>
<div>
<span x-text='MONTH_NAMES[month]' class='text-lg font-bold text-gray-800'></span>
<span x-text='year' class='ml-1 text-lg text-gray-600 font-normal'></span>
</div>
<div>
<button type='button' class='transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full' :class="{'cursor-not-allowed opacity-25': month == 0 }" :disabled='month == 0 ? true : false' @click='month--; getNoOfDays()'>
<svg class='h-6 w-6 text-gray-500 inline-flex' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 19l-7-7 7-7'></path>
</svg>
</button>
<button type='button' class='transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full' :class="{'cursor-not-allowed opacity-25': month == 11 }" :disabled='month == 11 ? true : false' @click='month++; getNoOfDays()'>
<svg class='h-6 w-6 text-gray-500 inline-flex' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5l7 7-7 7'></path>
</svg>
</button>
</div>
</div>
<div class='flex flex-wrap mb-3 -mx-1'>
<template x-for='(day, index) in DAYS' :key='index'>
<div style='width: 14.26%' class='px-1'>
<div x-text='day' class='text-gray-800 font-medium text-center text-xs'></div>
</div>
</template>
</div>
<div class='flex flex-wrap -mx-1'>
<template x-for='blankday in blankdays'>
<div style='width: 14.28%' class='text-center border p-1 border-transparent text-sm'></div>
</template>
<template x-for='(date, dateIndex) in no_of_days' :key='dateIndex'>
<div style='width: 14.28%' class='px-1 mb-1'>
<div @click='getDateValue(date)' x-text='date' class='cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100' :class="{'bg-blue-500 text-white': isToday(date) == true, 'text-gray-700 hover:bg-blue-200': isToday(date) == false }"></div>
</div>
</template>
</div>
</div>
</div>
</div>
</div>
<script>
const MONTH_NAMES = ["January", "February", "March", "April",
"May", "June", "July", "August", "September", "October", "November",
"December",
];
const DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu",
"Fri", "Sat"
];
function app() {
return {
showDatepicker: false,
datepickerValue: "",
month: "",
year: "",
no_of_days: [],
blankdays: [],
days: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
initDate() {
let today = new Date();
this.month = today.getMonth();
this.year = today.getFullYear();
this.datepickerValue = new Date(
this.year, this.month, today.getDate()).toDateString();
},
isToday(date) {
const today = new Date();
const d = new
Date(this.year, this.month, date);
return today.toDateString() ===
d.toDateString() ? true : false;
},
getDateValue(date) {
let
selectedDate = new Date(this.year, this.month, date);
this.datepickerValue = selectedDate.toDateString();
this.$refs.date.value = selectedDate.getFullYear() + "-" + ("0" +
selectedDate.getMonth()).slice(-2) + "-" + ("0" +
selectedDate.getDate()).slice(-2);
console.log(this.$refs.date.value);
this.showDatepicker = false;
},
getNoOfDays() {
let daysInMonth = new Date(this.year, this.month +
1, 0).getDate(); // find where to start calendar day of week let
dayOfWeek = new Date(this.year, this.month).getDay();
let
blankdaysArray = [];
for (var i = 1; i <= dayOfWeek; i++) {
blankdaysArray.push(i);
}
let daysArray = [];
for (var i = 1; i <=
daysInMonth; i++) {
daysArray.push(i);
}
this.blankdays =
blankdaysArray;
this.no_of_days = daysArray;
},
};
}
</script>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div class='mb-16'>
<div class='mol-indication-step'>
<span class='step'>Stap 2</span>
<h2 class="atm-heading ">Selectie - Afwezig voor examens</h2>
</div>
<div class='wrapper'>
<div class='add-course'>
<span class="atm-icon fal fa-layer-plus fa-5x " aria-hidden="true"></span>
<h3 class="atm-heading ">Voeg een opleidingsonderdeel toe</h3>
<div class='atm-paragraph '>Gelieve een opleidingsonderdeel toe te voegen door de dropdown te gebruiken hieronder.</div>
</div>
</div>
<div class="add-course-unit ">
<span>
Opleidingsonderdeel toevoegen
</span>
<select class="form-select " name="select" id="select">
<option value="0">Biologie (2456)</option>
<option value="1" selected>Fysica (1850)</option>
<option value="2">Mathemetical Biologie and Epidimiology DL (8752)</option>
</select>
<a href="#" class="atm-link " aria-label="" title="Opleidingsonderdeel toevoegen">
<span class="text">Opleidingsonderdeel toevoegen</span>
<span class="atm-icon far fa-plus-circle " aria-hidden="true"></span>
</a>
</div>
</div>
<div class='mb-16'>
<div class='mol-indication-step'>
<span class='step'>Stap 3</span>
<h2 class="atm-heading ">Selectie - Afwezig voor onderwijsactiviteit</h2>
</div>
<div class='wrapper'>
<div class='add-course'>
<span class="atm-icon fal fa-layer-plus fa-5x " aria-hidden="true"></span>
<h3 class="atm-heading ">Voeg een opleidingsonderdeel toe</h3>
<div class='atm-paragraph '>Gelieve een opleidingsonderdeel toe te voegen door de dropdown te gebruiken hieronder.</div>
</div>
</div>
<div class="add-course-unit ">
<span>
Opleidingsonderdeel toevoegen
</span>
<select class="form-select " name="select" id="select">
<option value="0">Biologie (2456)</option>
<option value="1" selected>Fysica (1850)</option>
<option value="2">Mathemetical Biologie and Epidimiology DL (8752)</option>
</select>
<a href="#" class="atm-link " aria-label="" title="Opleidingsonderdeel toevoegen">
<span class="text">Opleidingsonderdeel toevoegen</span>
<span class="atm-icon far fa-plus-circle " aria-hidden="true"></span>
</a>
</div>
</div>
<div class='mb-16'>
<div class='mol-indication-step'>
<span class='step'>Stap 4</span>
<h2 class="atm-heading ">Mijn attesten</h2>
</div>
<div class='wrapper'>
<div class='mol-akte-card '>
<div class='item upload'>
<div class='img'>
<svg xmlns='http://www.w3.org/2000/svg' width='72' height='56' viewBox='0 0 72 56' fill='none'>
<path d='M66 0H14C10.625 0 8 2.75 8 6V8H6C2.625 8 0 10.75 0 14V50C0 53.375 2.625 56 6 56H58C61.25 56 64 53.375 64 50V48H66C69.25 48 72 45.375 72 42V6C72 2.75 69.25 0 66 0ZM60 50C60 51.125 59 52 58 52H6C4.875 52 4 51.125 4 50V14C4 13 4.875 12 6 12H8V42C8 45.375 10.625 48 14 48H60V50ZM68 42C68 43.125 67 44 66 44H14C12.875 44 12 43.125 12 42V6C12 5 12.875 4 14 4H66C67 4 68 5 68 6V42ZM22 21C25.75 21 29 17.875 29 14C29 10.25 25.75 7 22 7C18.125 7 15 10.25 15 14C15 17.875 18.125 21 22 21ZM22 11C23.625 11 25 12.375 25 14C25 15.75 23.625 17 22 17C20.25 17 19 15.75 19 14C19 12.375 20.25 11 22 11ZM52 14C50.875 12.75 49 12.75 47.875 14L36 25.875L32 22C30.875 20.75 29 20.75 27.875 22L16.875 33C16.25 33.5 16 34.25 16 35V38.5C16 39.375 16.625 40 17.5 40H62.5C63.25 40 64 39.375 64 38.5V27C64 26.25 63.625 25.5 63 25L52 14ZM60 36H20V35.5L30 25.5L36 31.5L50 17.5L60 27.5V36Z' fill='black'></path>
</svg>
<form action=''>
<input type='file' id='myfile' name='myfile' />
<label for='myfile'>
Media toevoegen
</label>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<section class='org-footer-edit'>
<div class='uhasselt-container'>
<div> <a href="#" class="atm-button button-red ">
<span>
<span class="text">
Afwezigheid opslaan
</span>
</span>
</a>
</div>
<div> <a href="#" class="atm-button button-white ">
<span>
<span class="text">
Annuleren
</span>
</span>
</a>
</div>
<div class='button-remove'> <a href="#" class="atm-button button-white ">
<span>
<span class="atm-icon fal fa-trash-alt " aria-hidden="true"></span>
<span class="text">
Melding afwezigheid volledig verwijderen
</span>
</span>
</a>
</div>
</div>
</section>
</div>
<div class='tpl-editeren'>
<div class='uhasselt-container'>
<div class='intro'>
{{render '@app-breadcrumbs' heading-breadcrumbs merge=true}}
{{render '@app-heading--h1' heading-intro merge=true}}
{{render '@app-paragraph'}}
</div>
<div class='mb-16'>
{{render '@app-indication-step' indication-step-1}}
{{render '@app-absences-period' absences-period}}
</div>
<div class='mb-16'>
{{render '@app-indication-step' indication-step-2}}
<div class='wrapper'>
{{render '@app-add-course'}}
</div>
{{render '@app-add-course-unit--add-course'}}
</div>
<div class='mb-16'>
{{render '@app-indication-step' indication-step-3}}
<div class='wrapper'>
{{render '@app-add-course'}}
</div>
{{render '@app-add-course-unit--add-course'}}
</div>
<div class='mb-16'>
{{render '@app-indication-step' indication-step-4}}
<div class='wrapper'>
{{render '@app-akte-card--empty-akte'}}
</div>
</div>
</div>
{{render '@app-footer-edit'}}
</div>
{
"heading-breadcrumbs": {
"page": [
{
"isCurrent": false,
"link": {
"text": "Home"
}
},
{
"isCurrent": false,
"link": {
"text": "Mijn afwezigheid"
}
},
{
"isCurrent": false,
"link": {
"text": "Afwezigheid"
}
},
{
"isCurrent": true,
"text": "Afwezigheid aanpassen"
}
]
},
"heading-intro": {
"text": "Afwezigheid - Editeren",
"tag": "div",
"modifier": "h1"
},
"absences-period": {
"heading": false,
"date-select-start": true,
"date-select-end": true
},
"indication-step-1": {
"step": "Stap 1",
"heading": {
"text": "Periode afwezigheid"
}
},
"indication-step-2": {
"step": "Stap 2",
"heading": {
"text": "Selectie - Afwezig voor examens"
}
},
"indication-step-3": {
"step": "Stap 3",
"heading": {
"text": "Selectie - Afwezig voor onderwijsactiviteit"
}
},
"indication-step-4": {
"step": "Stap 4",
"heading": {
"text": "Mijn attesten"
}
}
}
.tpl-editeren {
.uhasselt-container {
@apply py-8;
.intro {
@apply mb-16;
.mol-breadcrumbs {
@apply pb-8;
}
}
.wrapper {
@apply p-4 md:p-8 border border-gray-700 border-solid shadow-xl;
@apply border-t-0;
}
}
}
No notes defined.