ventry/templates/home/index.html.twig
2023-11-03 21:17:49 +01:00

99 lines
5.3 KiB
Twig
Executable File

{# TODO: Make File Deleting Modal Dynamic to prevent redundant code #}
{% extends 'base.html.twig' %}
{% block title %}Dashboard | ventry.host{% endblock %}
{% block head %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
{% endblock %}
{% block body %}
{% include 'partials/__header.html.twig' %}
<main>
<div class="container mt-48">
<div class="row">
<div class="col">
<h1 class="m-0">Hello {{ app.user.username }}!</h1>
</div>
<div class="col">
<a href="{{ path('app_logout') }}" class="button button-danger ml-10"
style="float:right;">Logout</a>
<a href="{{ path('app_user_profile', {'user': app.user.id }) }}" class="button ml-10"
style="float:right;">My Profile</a>
<a href="{{ path('app_config') }}" class="button" style="float:right;">Download Config</a>
</div>
</div>
<p>Thank you for using ventry.host as your file hosting service!</p>
{% include 'partials/home/__statistics.html.twig' %}
<div class="image-grid">
{% for file in files %}
<div class="image-container">
<img loading="lazy" draggable="false"
src="{{ asset('uploads/' ~ file.user.id ~ '/' ~ file.name ) }}"
alt="{{ file.name }}">
<div class="overlay position-absolute bottom-0 start-0 p-2">
<div class="row">
<div class="col">
<p class="text-center rounded"
style="background-color: rgba(0,0,0,0.3); color: white;">{{ file.name }}</p>
<p class="text-center rounded"
style="background-color: rgba(0,0,0,0.3); color: white;">{{ file.size|formatFilesize }}</p>
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center">
<button class="button button-danger" data-toggle="modal"
data-target="#deleteModal-{{ file.id }}">
Delete <i class="ml-1 fas fa-trash" style="margin-left: 4px;"></i>
</button>
</div>
<div class="col d-flex justify-content-center">
<a class="button button-primary"
href="{{ path('app_serve_file', {'filename': file.name}) }}">
Open <i class="fas fa-link" style="margin-left: 4px;"></i>
</a>
</div>
</div>
</div>
</div>
<div class="modal fade mt-48" data-bs-theme="dark" id="deleteModal-{{ file.id }}" tabindex="-1"
role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteModalLabel"><i class="fa fa-info-circle"></i>
Confirm Delete</h5>
</div>
<div class="modal-body">
<p style="color:white;">Are you sure you want to delete this file?</p>
<img loading="lazy" draggable="false"
src="{{ asset('uploads/' ~ file.user.id ~ '/' ~ file.name ) }}"
alt="{{ file.name }}" class="m-auto rounded" style="max-height:25vh;">
</div>
<div class="modal-footer">
<button class="button button-secondary" data-dismiss="modal">Cancel</button>
<a class="button button-danger"
href="{{ path('app_delete_file', {'filename': file.name, 'redirectToHome': true}) }}">
Delete
</a>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% if files is not empty %}
{% include 'partials/home/__pagination.html.twig' %}
{% endif %}
</div>
</main>
{% endblock %}