link list and clipboard works

This commit is contained in:
overflowerror 2021-01-07 00:43:51 +01:00
parent f4748ee3d2
commit c2fd3a9975
9 changed files with 175 additions and 9 deletions

View file

@ -4,4 +4,12 @@
.navbar {
margin-bottom: 50px;
}
.hidden {
height: 1px;
width: 1px;
position: absolute;
top: -10px;
left: -1px;
}

View file

@ -1,4 +1,7 @@
.link {
margin-top: 2vw;
padding: 1vw;
.links {
}
.links img {
height: 40px;
margin-right: 5px;
}

24
public/css/toasts.css Normal file
View file

@ -0,0 +1,24 @@
.customToast {
position: fixed;
right: 100px;
background-color: #3c3c3c;
color: lightgrey;
font-size: 20px;
padding: 10px 20px 10px 20px;
transition: top 0.2s linear, opacity 0.1s linear;
}
.customToastStart {
opacity: 0;
top: 200px;
}
.customToastMain {
opacity: 1;
top: 100px;
}
.customToastStop {
opacity: 0;
top: 0;
}

10
public/js/clipboard.js Normal file
View file

@ -0,0 +1,10 @@
function clipboard(str) {
var clipboardField = document.createElement("textarea");
clipboardField.value = str;
document.body.appendChild(clipboardField);
clipboardField.select();
clipboardField.setSelectionRange(0, 99999);
document.execCommand("copy");
document.body.removeChild(clipboardField);
toast("Copied to clipboard.");
}

24
public/js/toasts.js Normal file
View file

@ -0,0 +1,24 @@
(function () {
let toastCounter = 0;
const toastTime = 3000;
window.toast = function (str) {
let id = "toast" + toastCounter++;
let element = document.createElement("div");
element.id = id;
element.className = "customToast customToastStart";
element.innerText = str;
document.body.appendChild(element);
window.setTimeout(function () {
element.className = "customToast customToastMain";
}, 0);
window.setTimeout(function () {
element.className = "customToast customToastStop";
}, toastTime);
window.setTimeout(function () {
document.body.removeChild(element);
}, toastTime + 1000)
}
})();

View file

@ -107,6 +107,12 @@ class DashboardController extends AbstractController
$user = $this->userService->getLoggedInUser();
$links = $this->videoLinkService->getAll($user);
foreach ($links as $link) {
$link->setCustomId($this->uuidMapper->toString($link->getId()));
$video = $link->getVideo();
$video->setCustomId($this->uuidMapper->toString($video->getId()));
}
return $this->render("dashboard/links.html.twig", [
"links" => $links
]);

View file

@ -21,6 +21,7 @@ class VideoLink
* @ORM\CustomIdGenerator(class=UuidGenerator::class)
*/
private $id;
private $customId;
/**
* @ORM\ManyToOne(targetEntity=Video::class, inversedBy="videoLinks")
@ -147,4 +148,15 @@ class VideoLink
return $this;
}
public function getCustomId(): string
{
return $this->customId;
}
public function setCustomId($customId): self
{
$this->customId = $customId;
return $this;
}
}

View file

@ -9,6 +9,7 @@
<link rel="stylesheet" href="{{ asset("css/mdb.min.css") }}">
<link rel="stylesheet" href="{{ asset("css/mdb.rtl.min.css") }}">
<link rel="stylesheet" href="{{ asset("css/base.css") }}">
<link rel="stylesheet" href="{{ asset("css/toasts.css") }}">
{% block stylesheets %}{% endblock %}
</head>
<body class="bg-grey">
@ -67,6 +68,8 @@
{% block body %}{% endblock %}
</div>
<script src="{{ asset("js/mdb.min.js") }}"></script>
<script src="{{ asset("js/clipboard.js") }}"></script>
<script src="{{ asset("js/toasts.js") }}"></script>
{% block javascripts %}{% endblock %}
</body>
</html>

View file

@ -6,10 +6,86 @@
{% endblock %}
{% block body %}
Links
{% for link in links %}
<div class="link container-fluid bg-light shadow-5">
Blabla
</div>
{% endfor %}
<div class="links bg-light shadow-5">
<table class="table table-hover">
<tr>
<td>
<input type="checkbox">
</td>
<th>
Video
</th>
<th>
Created
</th>
<th>
Comment
</th>
<th>
Valid until
</th>
<th>
Views left
</th>
<th>
Time left
</th>
<th>
Link
</th>
</tr>
{% for link in links %}
<tr>
<td>
<input type="checkbox">
</td>
<td>
<a href="{{ path("app_watch_page", {
linkId: constant("App\\Controller\\WatchController::OWNER_LINK_ID"),
videoId: link.video.customId
}) }}">
<img alt="Thumbnail" src="{{ path("app_watch_thumbnail", {
linkId: constant("App\\Controller\\WatchController::OWNER_LINK_ID"),
videoId: link.video.customId
}) }}"/>
{{ link.video.name }}
</a>
</td>
<td>
{{ link.created | date("Y-m-d") }}
</td>
<td>
{{ link.comment }}
</td>
<td>
{% if link.viewableUntil %}
{{ viewableUntil | date("Y-m-d") }}
{% else %}
-
{% endif %}
</td>
<td>
{% if link.maxViews %}
# / {{ link.maxViews }}
{% else %}
-
{% endif %}
</td>
<td>
{% if link.viewableFor %}
# / {{ link.viewableFor }}
{% else %}
-
{% endif %}
</td>
<td>
<button class="btn btn-primary btn-floating" onclick="clipboard('{{ url("app_watch_page", {
linkId: link.customId,
videoId: link.video.customId
}) }}')"><i class="fas fa-clipboard"></i></button>
</td>
</tr>
{% endfor %}
</table>
</div>
{% endblock %}