mirror of
https://github.com/eitchtee/WYGIWYH.git
synced 2026-07-12 07:42:53 +02:00
feat: first batch of work
This commit is contained in:
Herculino Trotta
@@ -2,67 +2,67 @@
|
||||
{% load i18n %}
|
||||
|
||||
<div>
|
||||
<div class="tw:hidden tw:lg:grid tw:lg:grid-cols-7 tw:gap-4 tw:lg:gap-0 bg-base-300">
|
||||
<div class="tw:border-l tw:border-t tw:border-b tw:border-base-100 tw:p-2 tw:text-center">
|
||||
<div class="hidden lg:grid lg:grid-cols-7 gap-4 lg:gap-0 bg-base-300">
|
||||
<div class="border-l border-t border-b border-base-100 p-2 text-center">
|
||||
{% translate 'MON' %}
|
||||
</div>
|
||||
<div class="tw:border-t tw:border-b tw:border-base-300 tw:p-2 tw:text-center">
|
||||
<div class="border-t border-b border-base-300 p-2 text-center">
|
||||
{% translate 'TUE' %}
|
||||
</div>
|
||||
<div class="tw:border-t tw:border-b tw:border-base-300 tw:p-2 tw:text-center">
|
||||
<div class="border-t border-b border-base-300 p-2 text-center">
|
||||
{% translate 'WED' %}
|
||||
</div>
|
||||
<div class="tw:border-t tw:border-b tw:border-base-300 tw:p-2 tw:text-center">
|
||||
<div class="border-t border-b border-base-300 p-2 text-center">
|
||||
{% translate 'THU' %}
|
||||
</div>
|
||||
<div class="tw:border-t tw:border-b tw:border-base-300 tw:p-2 tw:text-center">
|
||||
<div class="border-t border-b border-base-300 p-2 text-center">
|
||||
{% translate 'FRI' %}
|
||||
</div>
|
||||
<div class="tw:border-t tw:border-b tw:border-base-300 tw:p-2 tw:text-center">
|
||||
<div class="border-t border-b border-base-300 p-2 text-center">
|
||||
{% translate 'SAT' %}
|
||||
</div>
|
||||
<div class="tw:border-r tw:border-t tw:border-b tw:border-base-300 tw:p-2 tw:text-center">
|
||||
<div class="border-r border-t border-b border-base-300 p-2 text-center">
|
||||
{% translate 'SUN' %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="tw:grid tw:grid-cols-1 tw:grid-rows-1 tw:lg:grid-cols-7 tw:lg:grid-rows-6 tw:gap-4 tw:lg:gap-0">
|
||||
<div class="grid grid-cols-1 grid-rows-1 lg:grid-cols-7 lg:grid-rows-6 gap-4 lg:gap-0">
|
||||
{% for date in dates %}
|
||||
{% if date %}
|
||||
<div class="tw:card tw:bg-base-200 tw:h-full tw:hover:bg-base-300! tw:rounded-none tw:card-border tw:border-base-content/50 {% if not date.transactions %}tw:hidden! tw:lg:flex!{% endif %}{% if today == date.date %} tw:card-border tw:border-2 tw:border-primary{% endif %}" role="button"
|
||||
<div class="card bg-base-200 h-full hover:bg-base-300! border-[1px] border-base-content/30 rounded-none card-border {% if not date.transactions %}hidden! lg:flex!{% endif %}{% if today == date.date %} card-border border-2 border-primary{% endif %} cursor-pointer" role="button"
|
||||
hx-get="{% url 'calendar_transactions_list' day=date.date.day month=date.date.month year=date.date.year %}"
|
||||
hx-target="#persistent-generic-offcanvas-left">
|
||||
<div class="tw:card-header tw:border-0 tw:bg-transparent tw:text-end tw:flex tw:justify-between tw:p-2 tw:w-full">
|
||||
<div class="tw:lg:hidden tw:text-start tw:w-full">{{ date.date|date:"l"|lower }}</div>
|
||||
<div class="tw:text-end tw:w-full">{{ date.day }}</div>
|
||||
<div class="card-header border-0 bg-transparent text-end flex justify-between p-2 w-full">
|
||||
<div class="lg:hidden text-start w-full">{{ date.date|date:"l"|lower }}</div>
|
||||
<div class="text-end w-full">{{ date.day }}</div>
|
||||
</div>
|
||||
<div class="tw:card-body tw:p-2">
|
||||
<div class="card-body p-2 flex flex-row flex-wrap gap-1">
|
||||
{% for transaction in date.transactions %}
|
||||
{% if transaction.is_paid %}
|
||||
{% if transaction.type == "IN" and not transaction.account.is_asset %}
|
||||
<i class="fa-solid fa-circle-check tw:text-green-400" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Income' %}{% endif %}"></i>
|
||||
<i class="fa-solid fa-circle-check text-success" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Income' %}{% endif %}"></i>
|
||||
{% elif transaction.type == "IN" and transaction.account.is_asset %}
|
||||
<i class="fa-solid fa-circle-check tw:text-green-300" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Income' %}{% endif %}"></i>
|
||||
<i class="fa-solid fa-circle-check text-success/80" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Income' %}{% endif %}"></i>
|
||||
{% elif transaction.type == "EX" and not transaction.account.is_asset %}
|
||||
<i class="fa-solid fa-circle-check tw:text-red-400" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Expense' %}{% endif %}"></i>
|
||||
<i class="fa-solid fa-circle-check text-error" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Expense' %}{% endif %}"></i>
|
||||
{% elif transaction.type == "EX" and transaction.account.is_asset %}
|
||||
<i class="fa-solid fa-circle-check tw:text-red-300" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Expense' %}{% endif %}"></i>
|
||||
<i class="fa-solid fa-circle-check text-error/80" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Expense' %}{% endif %}"></i>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% if transaction.type == "IN" and not transaction.account.is_asset %}
|
||||
<i class="fa-regular fa-circle tw:text-green-400" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Income' %}{% endif %}"></i>
|
||||
<i class="fa-regular fa-circle text-success" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Income' %}{% endif %}"></i>
|
||||
{% elif transaction.type == "IN" and transaction.account.is_asset %}
|
||||
<i class="fa-regular fa-circle tw:text-green-300" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Income' %}{% endif %}"></i>
|
||||
<i class="fa-regular fa-circle text-success/80" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Income' %}{% endif %}"></i>
|
||||
{% elif transaction.type == "EX" and not transaction.account.is_asset %}
|
||||
<i class="fa-regular fa-circle tw:text-red-400" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Expense' %}{% endif %}"></i>
|
||||
<i class="fa-regular fa-circle text-error" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Expense' %}{% endif %}"></i>
|
||||
{% elif transaction.type == "EX" and transaction.account.is_asset %}
|
||||
<i class="fa-regular fa-circle tw:text-red-300" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Expense' %}{% endif %}"></i>
|
||||
<i class="fa-regular fa-circle text-error/80" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Expense' %}{% endif %}"></i>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="tw:hidden! tw:lg:block! tw:card tw:bg-base-100 tw:h-full tw:rounded-none"></div>
|
||||
<div class="hidden! lg:block! card bg-base-100 h-full rounded-none"></div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
@@ -12,45 +12,37 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="tw:container tw:px-md-3 tw:py-3 tw:gap-x-5">
|
||||
<div class="tw:flex tw:flex-wrap tw:mb-4 tw:gap-x-xl-4 tw:gap-y-3">
|
||||
<div class="container px-md-3 py-3 gap-x-5">
|
||||
<div class="flex flex-wrap mb-4 gap-x-xl-4 gap-y-3">
|
||||
{# Date picker#}
|
||||
<div class="tw:w-full tw:xl:w-4/12 tw:flex-row tw:items-center tw:flex">
|
||||
<div class="tw:text-base tw:h-full tw:items-center tw:flex">
|
||||
<div class="w-full xl:w-4/12 flex-row items-center flex">
|
||||
<div class="text-base h-full items-center flex btn btn-ghost">
|
||||
<a role="button"
|
||||
class="tw:pe-4 tw:py-2"
|
||||
hx-boost="true"
|
||||
hx-trigger="click, previous_month from:window"
|
||||
href="{% url 'calendar' month=previous_month year=previous_year %}"><i
|
||||
class="fa-solid fa-chevron-left"></i></a>
|
||||
href="{% url 'calendar' month=previous_month year=previous_year %}">
|
||||
<i class="fa-solid fa-chevron-left"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="tw:text-3xl tw:font-bold tw:font-mono tw:w-full tw:text-center"
|
||||
<div class="text-3xl font-bold font-mono w-full text-center btn btn-ghost"
|
||||
hx-get="{% url 'month_year_picker' %}"
|
||||
hx-target="#generic-offcanvas-left"
|
||||
hx-trigger="click, date_picker from:window"
|
||||
hx-vals='{"month": {{ month }}, "year": {{ year }}, "for": "calendar", "field": "date"}' role="button">
|
||||
{{ month|month_name }} {{ year }}
|
||||
</div>
|
||||
<div class="tw:text-base tw:mx-2 tw:h-full tw:items-center tw:flex">
|
||||
<div class="text-base h-full items-center flex btn btn-ghost">
|
||||
<a role="button"
|
||||
class="tw:ps-3 tw:py-2"
|
||||
hx-boost="true"
|
||||
hx-trigger="click, next_month from:window"
|
||||
href="{% url 'calendar' month=next_month year=next_year %}">
|
||||
<i class="fa-solid fa-chevron-right"></i>
|
||||
<i class="fa-solid fa-chevron-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{# Action buttons#}
|
||||
<div class="tw:w-full tw:xl:w-8/12">
|
||||
{# <c-ui.quick-transactions-buttons#}
|
||||
{# :year="year"#}
|
||||
{# :month="month"#}
|
||||
{# ></c-ui.quick-transactions-buttons>#}
|
||||
</div>
|
||||
</div>
|
||||
<div class="tw:flex tw:flex-wrap">
|
||||
<div class="show-loading tw:w-full" hx-get="{% url 'calendar_list' month=month year=year %}"
|
||||
<div class="flex flex-wrap">
|
||||
<div class="show-loading w-full" hx-get="{% url 'calendar_list' month=month year=year %}"
|
||||
hx-trigger="load, updated from:window, selective_update from:window, every 10m"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user