Skip to content

Commit

Permalink
feat(bildungsurlaub): Add accordion and start populating state princi…
Browse files Browse the repository at this point in the history 
…ples and eligibility
  • Loading branch information
@Agathebadia
Agathebadia committed Dec 8, 2023
1 parent 040dbb6 commit fe7b244
Show file tree
Hide file tree
Showing 9 changed files with 352 additions and 20 deletions.
8 changes: 8 additions & 0 deletions app/components/accordion/index.hbs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@

<div id="accordion-flush" data-accordion="collapse" data-active-classes="bg-white dark:bg-gray-900 text-gray-900 dark:text-white" data-inactive-classes="text-gray-500 dark:text-gray-400">
{{#each this.states as |state index|}}
<State @state={{state}} @index={{index}} />
{{/each}}
</div>

{{log this.states}}
14 changes: 14 additions & 0 deletions app/components/accordion/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import Component from '@glimmer/component';
import { action, computed } from '@ember/object';
import { tracked } from '@glimmer/tracking';

export default class AccordionComponent extends Component {

get states() {
//arguments passed from index.hbs @model.data
console.log(this.args.states, 'states');
return this.args.states;
}


}
104 changes: 104 additions & 0 deletions app/components/state/index.hbs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
{{!-- <div id="accordion-open" data-accordion="open"> --}}
<h2 id="accordion-flush-heading-{{@index}}">
<button type="button" class="flex items-center justify-between w-full py-5 font-medium rtl:text-right text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400 gap-3"
data-accordion-target="#accordion-flush-body-{{@index}}" aria-expanded="false" aria-controls="accordion-flush-body-{{@index}}">
<span>{{@state.stateName}}</span>
<svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5" />
</svg>
</button>
</h2>
<div id="accordion-flush-body-{{@index}}" class="hidden" aria-labelledby="accordion-flush-heading-{{@index}}">
<div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
<h3>Principles</h3>
{{#each @state.principles as |principle|}}
<p class="mb-2 text-gray-500 dark:text-gray-400">
{{principle}}
</p>
{{/each}}
<h3>Eligibility</h3>
{{#each @state.eligibility as |elig|}}
<p class="mb-2 text-gray-500 dark:text-gray-400">
{{elig}}
</p>
{{/each}}
</div>
</div>
{{!-- </div> --}}

{{!-- <div id="accordion-flush" data-accordion="collapse">
<h2 id="accordion-collapse-heading-1">
<button type="button"
class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-b-0 border-gray-200 rounded-t-xl focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3"
data-accordion-target="#accordion-collapse-body-1" aria-expanded="true" aria-controls="accordion-collapse-body-1">
<span>What is Flowbite?</span>
<svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5" />
</svg>
</button>
</h2>
<div id="accordion-collapse-body-1" class="hidden" aria-labelledby="accordion-collapse-heading-1">
<div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components
built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
<p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a
href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get
started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
</div>
</div>
<h2 id="accordion-collapse-heading-2">
<button type="button"
class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-b-0 border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3"
data-accordion-target="#accordion-collapse-body-2" aria-expanded="false"
aria-controls="accordion-collapse-body-2">
<span>Is there a Figma file available?</span>
<svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5" />
</svg>
</button>
</h2>
<div id="accordion-collapse-body-2" class="hidden" aria-labelledby="accordion-collapse-heading-2">
<div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700">
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma
software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/"
class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes
from Tailwind CSS and components from Flowbite.</p>
</div>
</div>
<h2 id="accordion-collapse-heading-3">
<button type="button"
class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3"
data-accordion-target="#accordion-collapse-body-3" aria-expanded="false"
aria-controls="accordion-collapse-body-3">
<span>What are the differences between Flowbite and Tailwind UI?</span>
<svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5" />
</svg>
</button>
</h2>
<div id="accordion-collapse-body-3" class="hidden" aria-labelledby="accordion-collapse-heading-3">
<div class="p-5 border border-t-0 border-gray-200 dark:border-gray-700">
<p class="mb-2 text-gray-500 dark:text-gray-400">The main difference is that the core components from Flowbite are
open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite
relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">However, we actually recommend using both Flowbite, Flowbite Pro,
and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">Learn more about these technologies:</p>
<ul class="ps-5 text-gray-500 list-disc dark:text-gray-400">
<li><a href="https://flowbite.com/pro/" class="text-blue-600 dark:text-blue-500 hover:underline">Flowbite
Pro</a></li>
<li><a href="https://tailwindui.com/" rel="nofollow"
class="text-blue-600 dark:text-blue-500 hover:underline">Tailwind UI</a></li>
</ul>
</div>
</div>
</div> --}}

{{log @index 'index'}}
{{log @state.eligibility}}
{{log @state.principles}}
2 changes: 2 additions & 0 deletions app/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@

<link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css">
<link integrity="" rel="stylesheet" href="{{rootURL}}assets/bildungsurlaub.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.0/flowbite.min.css" rel="stylesheet" />

{{content-for "head-footer"}}
</head>
Expand All @@ -18,6 +19,7 @@

<script src="{{rootURL}}assets/vendor.js"></script>
<script src="{{rootURL}}assets/bildungsurlaub.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.0/flowbite.min.js"></script>

{{content-for "body-footer"}}
</body>
Expand Down
97 changes: 97 additions & 0 deletions app/routes/home/route.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
import Route from '@ember/routing/route';

export default class HomeRoute extends Route {
async model() {
return {
"data": [
{
"stateName": "Baden-Württemberg (»Bildungszeit«)",
"id": 1,
"principles": [
" (1) Employees in Baden-Württemberg are entitled to educational leave from their employer. During training leave,they shall be released from work by their employer with continued payment of remuneration.",
"(2) Educational leave may be claimed for vocational or political further training measures and for training for voluntary work.",
"(3) Continuing vocational training serves to maintain, renew, improve or expand job-related knowledge, skills, development opportunities or abilities.",
"(4) Continuing political education serves to provide information about political contexts and the opportunity to participate in political life.",
"(5) The qualification to carry out voluntary activities serves to strengthen voluntary commitment. The areas of voluntary activities for which qualification entitlement to training time exists shall be determined by statutory order. The state government shall be authorized to regulate the areas of voluntary activities for which qualification entitlement to training time exists by statutory order."
],
"eligibility": [
"(1) Employees",
"(2) Persons working from home and persons treated as such, as well as other persons who are to be regarded as employee-like persons due to their lack of independence. Persons similar to employees in this sense are also persons with disabilities in the work area of a recognized workshop for disabled persons",
"(3) Those employed for their training and students at the Baden-Württemberg Cooperative State University, insofar as the focus of their activities is in the state of Baden-Württemberg.",
]
},
{
"stateName": "Berlin (»Bildungzeit«)",
"id": 2,
"principles": [
"(1) Employees in the federal state of Berlin shall, while continuing to receive their employer with continued payment of their salary entitled to leave of absence from work for participation in recognized educational educational events (educational leave).",
"(2) Employees within the meaning of this Act are also: persons employed for their vocational training, persons working from home and persons treated as such, other persons who, due to their economic independence, are to be regarded as are to be regarded as employee-like persons, and participants in measures in institutions for the integration of people with disabilities into working and professional life.",
"(3) Educational leave serves the purposes of political education, further vocational training and qualification for the performance of voluntary activities.",
"(4) Political education is intended to promote the ability and motivation to assess political and social social contexts and to perform political and social tasks.",
"(5) Continuing vocational training is intended to maintain, renew and develop professional knowledge, skills, maintain, renew, improve and expand professional knowledge, skills, abilities and expand as well as impart knowledge of operational and social contexts. Educational content that is not directly related to the work performed are included if they have at least an indirect benefit to the employer in the professional activity.",
"(6) Continuing vocational training within the meaning of this Act shall also be deemed to be an additional qualification accompanying vocational training for persons employed for the purpose of their vocational training.",
"(7) The qualification to carry out voluntary activities is intended to promote the promote the strengthening of voluntary commitment.",
"(8) Voluntary activities within the meaning of this Act are only those that are performed in fulfillment of civic duties to strengthen the democratic community or in other special public interest. The provisions of this Act shall not apply to honorary activities for which remuneration, compensation for loss of earnings or compensation for the time spent attending a training event is granted under other regulations. The areas of voluntary work for the qualification of which there is an entitlement to training time shall be determined by statutory order.",
"(9) Civic education, continuing vocational training and training for volunteer work should also promote gender equality, equality between people with and without disabilities, participation and equal participation of people with disabilities. participation and equal participation of people with a migration migrant backgrounds and the culture of valuing diversity."
],
"eligibility": [
"(1) The entitlement to training leave shall amount to five working days within a calendar year, provided that the entitled person regularly works five days a week. In anticipation of the training time in the following calendar year, the entitlement may be combined to ten working days.",
"(2) If the person regularly works more or less than five days a week, the entitlement shall be increased or reduced accordingly in accordance with paragraph 1. Fractions of a day shall be rounded up in favor of the entitled person. rounded up.",
"(3) If the entitlement to training leave has not been exhausted within a calendar year, the remaining entitlement cannot be carried over to the following calendar year.",
"(4) If an entitled person falls ill during the training period, the days of illness evidenced by a medical certificate shall not be counted towards the training period.",
"(5) In the event of a change of employment, the training period granted by another employer in the same calendar year shall be taken into account. This shall also apply in the event of a change of employment with the same employer.",
"(6) As a rule, leave of absence for those entitled to it at schools and universities shall be granted during periods when there are no lessons or lectures.",
"(7) Persons similar to employees are also entitled to training time within the contractual period during periods without an obligation to perform. performance obligation.",
"(8) In the case of shift work, the entitlement to time off also exists if participation in the recognized educational event would be possible before or after a shift to be worked on that day."
]
},
{
"stateName": "smss.exe",
"id": 3,
"principles": [
" (1) Employees in Baden-Württemberg are entitled to educational leave from their employer. During training leave,they shall be released from work by their employer with continued payment of remuneration.",
"(2) Educational leave may be claimed for vocational or political further training measures and for training for voluntary work.",
"(3) Continuing vocational training serves to maintain, renew, improve or expand job-related knowledge, skills, development opportunities or abilities.",
"(4) Continuing political education serves to provide information about political contexts and the opportunity to participate in political life.",
"(5) The qualification to carry out voluntary activities serves to strengthen voluntary commitment. The areas of voluntary activities for which qualification entitlement to training time exists shall be determined by statutory order. The state government shall be authorized to regulate the areas of voluntary activities for which qualification entitlement to training time exists by statutory order."
],
"eligibility": [
"(1) Employees",
"(2) Persons working from home and persons treated as such, as well as other persons who are to be regarded as employee-like persons due to their lack of independence. Persons similar to employees in this sense are also persons with disabilities in the work area of a recognized workshop for disabled persons",
"(3) Those employed for their training and students at the Baden-Württemberg Cooperative State University, insofar as the focus of their activities is in the state of Baden-Württemberg.",
]
},
// {
// "stateName": "smss.exe",
// "id": 4,
// "description": "Stark",
// },
// {
// "stateName": "smss.exe",
// "id": 5,
// "description": "Stark",
// },
// {
// "stateName": "smss.exe",
// "id": 6,
// "description": "Stark",
// },
// {
// "stateName": "smss.exe",
// "id": 7,
// "description": "Stark",
// },
// {
// "stateName": "smss.exe",
// "id": 8,
// "description": "Stark",
// },
// {
// "stateName": "smss.exe",
// "id": 9,
// "description": "Stark",
// },
]
};
}
}
Loading

0 comments on commit fe7b244

Please sign in to comment.