Skip to content

Commit 6f7c252

Browse files
EncryptExEncryptEx
committed
feat: added clipboard
1 parent 6d04aee commit 6f7c252

File tree

4 files changed

+92
-32
lines changed

4 files changed

+92
-32
lines changed

‎app/Http/Controllers/LinkController.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ public function doesExistShortLink(string $short_url)
7878
}
7979
public function getLinksfFromUser(int $userId)
8080
{
81-
$data = Link::select('long_url', 'short_url', 'created_at')->where('ownerId', $userId)
81+
$data = Link::select('id', 'long_url', 'short_url', 'created_at')->where('ownerId', $userId)
8282
->orderBy('created_at', 'asc')
8383
->get();
8484

‎resources/css/dashboard.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.inline{
2+
display: inline;
3+
}

‎resources/views/dashboard.blade.php

Lines changed: 86 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,89 @@
1-
<x-app-layout>
2-
<x-slot name="header">
3-
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
4-
{{ __('Dashboard') }}
5-
</h2>
6-
</x-slot>
7-
8-
<div class="py-12">
9-
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
10-
11-
<h4 class="text-3xl font-medium text-white title-font mb-5">Your femtolinks:</h4>
12-
@foreach ($links as $link)
13-
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg mb-3">
14-
<div class="p-6 text-gray-900 dark:text-gray-100">
15-
<h4 class="text-2xl font-medium text-white title-font mb-2">{{ route('redirect' ,$link['short_url']) }} </h4>
16-
<p class="leading-relaxed">@if (strlen($link['long_url']) > 50):
17-
18-
{{ substr($link['long_url'], 0, 100) }}
19-
@else
20-
{{ $link['long_url'] }}
21-
@endif</p>
22-
<a class="text-indigo-400 inline-flex items-center mt-4" href="{{ route('redirect' ,$link['short_url']) }}">Visit link
23-
<svg class="w-4 h-4 ml-2" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
24-
<path d="M5 12h14"></path>
25-
<path d="M12 5l7 7-7 7"></path>
26-
</svg>
27-
</a>
1+
@push('extra-head')
2+
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
3+
<script>
4+
document.addEventListener('DOMContentLoaded', function() {
5+
var clipboard = new ClipboardJS('.copy-button');
286
7+
clipboard.on('success', function(e) {
8+
var tooltip = document.getElementById(e.trigger.getAttribute('tooltip-target'));
9+
tooltip.classList.remove('hidden');
10+
tooltip.classList.add('inline-block');
11+
setTimeout(function() {
12+
tooltip.classList.add('hidden');
13+
tooltip.classList.remove('inline-block');
14+
}, 1000);
15+
e.clearSelection();
16+
});
17+
18+
clipboard.on('error', function(e) {
19+
console.error('Copy failed:', e.action);
20+
alert('Copy failed. Please try again.');
21+
});
22+
});
23+
</script>
24+
25+
26+
27+
28+
<x-app-layout>
29+
<x-slot name="header">
30+
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
31+
{{ __('Dashboard') }} </h2>
32+
</x-slot>
33+
<div class="py-12">
34+
@if (!$links->isEmpty())
35+
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
36+
<h4 class="text-3xl font-medium text-white title-font mb-5">Your
37+
femtolinks:</h4>
38+
@foreach ($links as $link)
39+
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg mb-3">
40+
<div class="p-6 text-gray-900 dark:text-gray-100">
41+
<h4 class="text-2xl font-medium text-white title-font mb-2">
42+
{{ route('redirect', $link['short_url']) }}
43+
</h4>
44+
<input type="hidden" value="{{ $link['long_url'] }}" id="urlLong-{{ $link['id'] }}">
45+
<span class="leading-relaxed">
46+
@if (strlen($link['long_url']) > 50)
47+
{{ substr($link['long_url'], 0, 100) }}...
48+
@else
49+
{{ $link['long_url'] }}
50+
@endif
51+
</span>
52+
53+
<div class="text-indigo-400 mt-4 pd-2 border-solid rounded border-indigo-400 inline-block">
54+
<div id="tooltip-{{ $link['id'] }}" class="hidden bg-green-300 text-white text-sm px-2 py-1 rounded shadow-lg absolute -mt-12">Copied!</div>
55+
<button type="button" class="copy-button"
56+
data-clipboard-target="#urlLong-{{ $link['id'] }}" tooltip-target="tooltip-{{ $link['id'] }}">
57+
<svg class="w-4 h-4 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"
58+
stroke="currentColor" stroke-width="2" fill="currentColor"
59+
stroke-linecap="round" stroke-linejoin="round">
60+
<path
61+
d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z" />
62+
</svg>
63+
</button>
64+
</div>
65+
66+
<a class="text-indigo-400 block mt-4"
67+
href="{{ route('redirect', $link['short_url']) }}">Visit link
68+
<svg class="w-4 h-4 ml-2 inline" viewBox="0 0 24 24" stroke="currentColor"
69+
stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
70+
<path d="M5 12h14"></path>
71+
<path d="M12 5l7 7-7 7"></path>
72+
</svg>
73+
</a>
74+
75+
</div>
76+
</div>
77+
@endforeach
78+
</div>
79+
@else
80+
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
81+
<span class="text-xl font-medium text-white title-font mb-5">
82+
83+
Ouch! You've not created any femtolinks yet. Create one now using our <a href="/api/docs"
84+
class="text-indigo-400 hover:text-indigo-600">amazing API</a>
85+
</span>
2986
</div>
30-
</div>
31-
@endforeach
87+
@endif
3288
</div>
33-
</div>
34-
</x-app-layout>
89+
</x-app-layout>

‎resources/views/layouts/app.blade.php

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@
1313

1414
<!-- Scripts -->
1515
@vite(['resources/css/app.css', 'resources/js/app.js'])
16+
17+
@stack('extra-head')
1618
</head>
1719
<body class="font-sans antialiased">
1820
<div class="min-h-screen bg-gray-100 dark:bg-gray-900">

0 commit comments

Comments
 (0)