Skip to content

Commit

Permalink
[#2799] First set-up for front-end services-berichten
Browse files Browse the repository at this point in the history
  • Loading branch information
@jiromaykin
jiromaykin committed Oct 7, 2024
1 parent f1745d2 commit ca29dbb
Show file tree
Hide file tree
Showing 6 changed files with 212 additions and 0 deletions.
3 changes: 3 additions & 0 deletions src/open_inwoner/scss/components/MyServices/_MyServiceDetail.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.servicedetail {
display: grid;
}
3 changes: 3 additions & 0 deletions src/open_inwoner/scss/components/MyServices/_MyServicesList.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.serviceslist {
display: grid;
}
2 changes: 2 additions & 0 deletions src/open_inwoner/scss/components/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,8 @@
@import './MessageFile/MessageFile.scss';
@import './Messages/Message.scss';
@import './Messages/Messages.scss';
@import './MyServices/MyServiceDetail.scss';
@import './MyServices/MyServicesList.scss';
@import './Notification/Notification.scss';
@import './Notification/Notifications.scss';
@import './Pagination/Pagination.scss';
Expand Down
118 changes: 118 additions & 0 deletions src/open_inwoner/templates/pages/myservices/myservices-list.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
{% extends 'master.html' %}
{% load i18n button_tags card_tags map_tags utils icon_tags file_tags action_tags dropdown_tags anchor_menu_tags %}

{% block content %}
{# needs breadcrums #}
<nav class="breadcrumbs" aria-label="broodkruimels">
<ul class="breadcrumbs__list">
<li class="breadcrumbs__list-item">
<a class="link link--secondary" href="/" title="Home" aria-label="Home">
<span aria-hidden="true" class="material-icons-outlined ">home</span>
</a>
</li>
<li class="breadcrumbs__list-item">
<span aria-hidden="true" class="material-icons ">chevron_right</span>
<a class="link " href="/myservices/">
Mijn berichten
</a>
</li>
</ul>
</nav>

<div class="serviceslist">
<h1 class="utrecht-heading-1" id="title">
Mijn berichten
</h1>
<p class="utrecht-paragraph">Lorem ipsum</p>

<div class="servicelist">
<table class="table plans-extended">
<thead class="table__heading">
<tr>
<td class="table__item" colspan="2">Onderwerp</td>
<td class="table__item">Einddatum</td>
<td class="table__item">Status</td>
<td class="table__item" colspan="2">Openstaande acties&nbsp;</td>
<td class="table__item">&nbsp;</td>
</tr>
</thead>
<tbody>
<tr>
<th class="table__header">
<a href="/samenwerken/181294c7-b40e-4fb0-a5a4-557eee44938a/" class="link" aria-label="Samenwerking voorbeeld" title="Samenwerking voorbeeld">
<span class="link__text">Samenwerking voorbeeld</span>
</a>
</th>
<td class="table__item table__item--no-lb">01 mei 2025</td>
<td class="table__item">Open</td>
<td class="table__item">0</td>
<td class="table__item">
</td>
<td class="table__item">
<a class="button button--textless button--icon button--transparent" href="/myservices/detail-1/" title="Samenwerking voorbeeld" aria-label="Samenwerking voorbeeld">
<span aria-hidden="true" class="material-icons-outlined ">arrow_forward</span>
</a>
</td>
</tr>
<tr>
<th class="table__header">
<a href="/samenwerken/f2db5565-9b80-466b-8365-72359652160e/" class="link" aria-label="Test" title="Test">
<span class="link__text">Test</span>
</a>
</th>
<td class="table__item table__item--no-lb">01 juni 2025</td>
<td class="table__item">Open</td>
<td class="table__item">2</td>
<td class="table__item">
<div class="table__item--notification-danger">Actie vereist</div>
</td>
<td class="table__item">
<a class="button button--textless button--icon button--transparent" href="/myservices/detail-1/" title="Test" aria-label="Test">
<span aria-hidden="true" class="material-icons-outlined ">arrow_forward</span>
</a>
</td>
</tr>
<tr>
<th class="table__header">
<a href="/samenwerken/67185d74-6f3b-451c-b056-79eebb069a22/" class="link" aria-label="Sjabloon samenwerk voorbeeld" title="Sjabloon samenwerk voorbeeld">
<span class="link__text">Sjabloon samenwerk voorbeeld</span>
</a>
</th>
<td class="table__item table__item--no-lb">01 juli 2024</td>
<td class="table__item">Afgerond</td>
<td class="table__item">3</td>
<td class="table__item">
<div class="table__item--notification-danger">Actie vereist</div>
</td>
<td class="table__item">
<a class="button button--textless button--icon button--transparent" href="/myservices/detail-1/" title="Sjabloon samenwerk voorbeeld" aria-label="Sjabloon samenwerk voorbeeld">
<span aria-hidden="true" class="material-icons-outlined ">arrow_forward</span>
</a>
</td>
</tr>
<tr>
<th class="table__header">
<a href="/samenwerken/bff2d7a0-acd5-4d48-a5fc-5347e76a4186/" class="link" aria-label="Voorbeeld" title="Voorbeeld">
<span class="link__text">Voorbeeld</span>
</a>
</th>
<td class="table__item table__item--no-lb">28 juni 2024</td>
<td class="table__item">Afgerond</td>
<td class="table__item">3</td>
<td class="table__item">
<div class="table__item--notification-danger">Actie vereist</div>
</td>
<td class="table__item">
<a class="button button--textless button--icon button--transparent" href="/myservices/detail-1/" title="Voorbeeld" aria-label="Voorbeeld">
<span aria-hidden="true" class="material-icons-outlined ">arrow_forward</span>
</a>
</td>
</tr>
</tbody>
</table>

{# end service list#}
</div>

</div>
{% endblock %}
77 changes: 77 additions & 0 deletions src/open_inwoner/templates/pages/myservices/service-detail.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
{% extends 'master.html' %}
{% load i18n button_tags utils icon_tags anchor_menu_tags %}

{#{% block sidebar_content %}#}
{#&nbsp;#}
{#{% endblock sidebar_content %}#}

{% block content %}
{# needs breadcrums #}
<nav class="breadcrumbs" aria-label="broodkruimels">
<ul class="breadcrumbs__list">
<li class="breadcrumbs__list-item">
<a class="link link--secondary" href="/" title="Home" aria-label="Home">
<span aria-hidden="true" class="material-icons-outlined ">home</span>
</a>
</li>
<li class="breadcrumbs__list-item">
<span aria-hidden="true" class="material-icons ">chevron_right</span>
<a class="link " href="/myservices/detail-1">
Bericht detail
</a>
</li>
</ul>
</nav>

<div class="servicedetail column column--start-0 column--span-8">
<h1 class="utrecht-heading-1" id="title">
Mijn berichten
</h1>

<div class="denhaag-page-content__header">
<h2 class="utrecht-heading-2">Betalen van uw parkeerbon</h2>
<p class="utrecht-paragraph"> Bericht ontvangen op 15 januari 2023 om 15.24 uur</p>
</div>
<div class="denhaag-action denhaag-action--multi denhaag-page-content__task">
<div class="denhaag-action__content">Betaal uw parkeerbon van € 74,90 voor het parkeren bij Valeriusplein</div>
<div class="denhaag-action__details">
<div class="denhaag-action__date denhaag-action__date--warning">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 20 21" class="denhaag-action__warning-icon" focusable="false" aria-hidden="true" shape-rendering="auto">
<g stroke-linecap="round" stroke-linejoin="round" stroke-width="2" clip-path="url(#alert-triangle-filled_svg__a)">
<path fill="#E15601" stroke="#E15601" d="M8.575 3.717 1.516 15.5A1.667 1.667 0 0 0 2.941 18h14.117a1.665 1.665 0 0 0 1.425-2.5L11.425 3.717a1.667 1.667 0 0 0-2.85 0"></path>
<path stroke="#fff" d="M10 14.667h.008M10 8v3.333"></path>
</g>
<defs>
<clipPath id="alert-triangle-filled_svg__a">
<path fill="#fff" d="M0 .5h20v20H0z"></path>
</clipPath>
</defs>
</svg>
<time datetime="2023-09-30T19:47:36.593Z">nog 1 dag</time>
</div>
<div class="denhaag-action__actions"><a href="#example" class="utrecht-button-link utrecht-button-link--html-a utrecht-button-link--external" rel="external noopener noreferrer">Betalen</a></div>
</div>
</div>
<p class="utrecht-paragraph denhaag-page-content__message"> Beste mevrouw Klap,<br><br>U heeft te weinig of geen parkeerkosten betaald voor het parkeren bij Valeriusplein. Daarom heeft u een parkeerbon gekregen.<br><br>Betaal vóór 1 maart 2023 uw parkeerbon van € 74.90.<br><br>Bent u het niet eens met deze parkeerbon? Dan kunt u bezwaar maken. Vul het formulier Bezwaar maken tegen een parkeerbon in.<br><br>Met vriendelijke groet,<br>Gemeente Den Haag</p>
<div class="denhaag-action denhaag-action--multi denhaag-page-content__task">
<div class="denhaag-action__content">Betaal uw parkeerbon van € 74,90 voor het parkeren bij Valeriusplein</div>
<div class="denhaag-action__details">
<div class="denhaag-action__date denhaag-action__date--warning">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 20 21" class="denhaag-action__warning-icon" focusable="false" aria-hidden="true" shape-rendering="auto">
<g stroke-linecap="round" stroke-linejoin="round" stroke-width="2" clip-path="url(#alert-triangle-filled_svg__a)">
<path fill="#E15601" stroke="#E15601" d="M8.575 3.717 1.516 15.5A1.667 1.667 0 0 0 2.941 18h14.117a1.665 1.665 0 0 0 1.425-2.5L11.425 3.717a1.667 1.667 0 0 0-2.85 0"></path>
<path stroke="#fff" d="M10 14.667h.008M10 8v3.333"></path>
</g>
<defs>
<clipPath id="alert-triangle-filled_svg__a">
<path fill="#fff" d="M0 .5h20v20H0z"></path>
</clipPath>
</defs>
</svg>
<time datetime="2023-09-30T19:47:36.593Z">nog 1 dag</time>
</div>
<div class="denhaag-action__actions"><a href="#example" class="utrecht-button-link utrecht-button-link--html-a utrecht-button-link--external" rel="external noopener noreferrer">Betalen</a></div>
</div>
</div>
</div>
{% endblock %}
9 changes: 9 additions & 0 deletions src/open_inwoner/urls.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,6 +191,15 @@
"style-demo/",
TemplateView.as_view(template_name="components/Typography/StyleDemo.html"),
),
# Temorary URLs to view front-end for Hackathon
path(
"myservices/",
TemplateView.as_view(template_name="pages/myservices/myservices-list.html"),
),
path(
"myservices/detail-1/",
TemplateView.as_view(template_name="pages/myservices/service-detail.html"),
),
# fix annoying favicon http error
path("favicon.ico", RedirectView.as_view(url="/static/ico/favicon.png")),
] + urlpatterns
Expand Down

0 comments on commit ca29dbb

Please sign in to comment.