ui tweeks

This commit is contained in:
odysseusmax 2020-08-15 12:43:46 +05:30
parent 0b879df6dd
commit c8ed3bd5c6
4 changed files with 104 additions and 56 deletions

View File

@ -1,5 +1,5 @@
<footer class="text-center text-black w-full my-4 py-4 bg-gray-300 xl:text-xl">
<a href="https://github.com/odysseusmax" target="_blank"> @odysseusmax </a>
<a href="https://github.com/odysseusmax/tg-index" target="_blank"> @odysseusmax </a>
</footer>
</div>

View File

@ -2,48 +2,50 @@
<div class="block md:flex justify-between items-center px-4 text-center">
<div class="my-2 block md:flex items-center justify-center md:justify-start text-2xl md:text-right font-bold text-blue-500">
<img class="mx-auto md:ml-0 md:mr-1 my-2 w-16 h-16 rounded-full bg-black" src="{{logo}}">
<img class="mx-auto md:ml-0 md:mr-1 my-2 w-16 h-16 rounded-full bg-black outline-none" src="{{logo}}">
<h1> {{name}} </h1>
</div>
<div class="my-2">
<form class="">
<input class="border rounded p-2 border-indigo-500 placeholder-indigo-500 text-indigo-500" type="text" name="search" value="{% if search %}{{search}}{% endif %}" placeholder="search...">
<button class="border rounded p-2 border-indigo-500 bg-indigo-500 text-white hover:text-indigo-500 hover:bg-white" type="submit">Search</button>
<input class="border rounded-full px-4 py-2 border-indigo-500 placeholder-indigo-500 text-indigo-500" type="text" name="search" value="{% if search %}{{search}}{% endif %}" placeholder="search...">
</form>
</div>
</div>
<div class="mx-auto my-2 w-full overflow-x-auto px-4 text-xs">
<div class="mx-auto my-2 w-full px-4">
<table class="m-auto rounded text-left shadow-md w-full">
<tr class="border-t border-b bg-gray-200 border-gray-300 my-2 p-4">
<th class="my-2 p-2">FileId</th>
<th class="my-2 p-2">Media</th>
<th class="my-2 p-2">Type</th>
<th class="my-2 p-2">Description</th>
<th class="my-2 p-2">Date</th>
<th class="my-2 p-2">Size</th>
</tr>
{% for item in item_list %}
<tr class="border-t border-b border-gray-300 my-2 p-4 rounded hover:bg-blue-100">
<th class="my-2 p-2">{{item.file_id}}</th>
<th class="my-2 p-2">{{item.media}}</th>
<th class="my-2 p-2">{{item.mime_type}}</th>
<th class="my-2 p-2 rounded hover:text-blue-600"><a href="{{item.url}}">{{item.insight}}</a></th>
<th class="my-2 p-2">{{item.date}}</th>
<th class="my-2 p-2">{{item.size}}</th>
<table class="rounded text-left shadow-md w-full text-sm md:text-base">
<thead>
<tr class="border-t border-b bg-gray-200 border-gray-300 my-2 p-4">
<th class="my-2 p-2 hidden md:table-cell">Media</th>
<th class="my-2 p-2 hidden md:table-cell">Type</th>
<th class="my-2 p-2">Description</th>
<th class="my-2 p-2 hidden md:table-cell">DateTime</th>
<th class="my-2 p-2 hidden md:table-cell">Size</th>
</tr>
{% endfor %}
</thead>
<tbody>
{% for item in item_list %}
<tr class="border-t border-b border-gray-300 my-4 p-4 rounded hover:bg-blue-100">
<td class="my-2 p-2 hidden md:table-cell">{{item.media}}</td>
<td class="my-2 p-2 hidden md:table-cell">{{item.mime_type}}</td>
<td class="my-2 p-2 rounded hover:text-blue-600 break-all"><a title="{{item.insight}}" href="{{item.url}}">{{item.insight}}</a></td>
<td class="my-2 p-2 hidden md:table-cell" name="date" data-date="{{item.date}}"></td>
<td class="my-2 p-2 hidden md:table-cell">{{item.size}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<p class="my-2 text-center font-semibold">
{{item_list|length}} results
{{item_list|length}} items
</p>
<div class="mx-auto my-2 text-center flex text-white content-center justify-center">
@ -56,4 +58,13 @@
{% endif %}
</div>
<script>
const date_elements = document.getElementsByName('date');
date_elements.forEach((item) => {
let dataDate = item.getAttribute("data-date");
let date = new Date(dataDate);
item.innerHTML = date.toLocaleString()
});
</script>
{% include 'footer.html' %}

View File

@ -20,8 +20,21 @@
{% if caption %}
<div class="flex justify-center mt-1 text-gray-300 font-mono text-xs lg:text-sm xl:text-lg break-all">
<p class="text-left rounded p-4 bg-gray-900 w-auto inline-block shadow-lg"> {{ caption|safe }} </p>
<div class="mx-auto mt-0">
<div class="flex justify-center text-gray-300 font-mono text-xs lg:text-sm xl:text-lg">
<p class="text-left w-full rounded p-4 bg-gray-900 shadow-lg"> {{ caption|safe }} </p>
</div>
{% if reply_btns %}
<div class="w-full block">
{% for row in reply_btns %}
<div class="flex justify-center">
{% for btn in row %}
<a class="p-4 mx-2 my-1 flex-1 border rounded bg-white border-blue-500 text-center text-blue-500 hover:bg-blue-500 hover:text-white" href="{{ btn.url }}" target="_blank"> {{btn.text}} </a>
{% endfor %}
</div>
{% endfor %}
</div>
{% endif %}
</div>
{% endif %}
@ -34,8 +47,21 @@
</div>
{% else %}
<div class="mx-auto flex justify-center w-full md:w-3/4 mt-1 text-gray-300 font-mono text-xs lg:text-sm xl:text-lg break-all">
<p class="text-left rounded p-4 bg-gray-900 w-auto inline-block shadow-lg"> {{ text|safe }} </p>
<div class="mx-auto flex flex-wrap justify-center w-full md:w-3/4 mt-1">
<div class="flex justify-center text-gray-300 font-mono text-xs lg:text-sm xl:text-lg break-all">
<p class="text-left rounded p-4 bg-gray-900 w-full shadow-lg"> {{ text|safe }} </p>
</div>
{% if reply_btns %}
<div class="w-full block">
{% for row in reply_btns %}
<div class="flex justify-center">
{% for btn in row %}
<a class="p-4 mx-2 my-1 flex-1 border rounded bg-white border-blue-500 text-center text-blue-500 hover:bg-blue-500 hover:text-white" href="{{ btn.url }}" target="_blank"> {{btn.text}} </a>
{% endfor %}
</div>
{% endfor %}
</div>
{% endif %}
</div>
{% endif %}

View File

@ -18,7 +18,7 @@ class Views:
def __init__(self, client):
self.client = client
@aiohttp_jinja2.template('home.html')
async def home(self, req):
if len(chat_ids) == 1:
@ -31,7 +31,7 @@ class Views:
'name': chat.title
})
return {'chats':chats}
@aiohttp_jinja2.template('index.html')
async def index(self, req):
@ -73,7 +73,7 @@ class Views:
media=True,
mime_type=m.file.mime_type,
insight = get_file_name(m)[:55],
date = m.date.isoformat(),
date = m.date,
size=get_human_size(m.file.size),
url=req.rel_url.with_path(f"/{alias_id}/{m.id}/view")
)
@ -83,7 +83,7 @@ class Views:
media=False,
mime_type='text/plain',
insight = m.raw_text[:55],
date = m.date.isoformat(),
date = m.date,
size=get_human_size(len(m.raw_text)),
url=req.rel_url.with_path(f"/{alias_id}/{m.id}/view")
)
@ -132,6 +132,15 @@ class Views:
'reason' : "Entry you are looking for cannot be retrived!",
}
return_val = {}
reply_btns = []
if message.reply_markup:
if isinstance(message.reply_markup, types.ReplyInlineMarkup):
for button_row in message.reply_markup.rows:
btns = []
for button in button_row.buttons:
if isinstance(button, types.KeyboardButtonUrl):
btns.append({'url': button.url, 'text': button.text})
reply_btns.append(btns)
if message.file and not isinstance(message.media, types.MessageMediaWebPage):
file_name = get_file_name(message)
file_size = get_human_size(message.file.size)
@ -159,7 +168,8 @@ class Views:
'size': file_size,
'media': media,
'caption': caption,
'title': f"Download | {file_name} | {file_size}"
'title': f"Download | {file_name} | {file_size}",
'reply_btns': reply_btns
}
elif message.message:
text = Markup.escape(message.raw_text).__str__().replace('\n', '<br>')
@ -167,33 +177,18 @@ class Views:
'found': True,
'media': False,
'text': text,
'reply_btns': reply_btns
}
else:
return_val = {
'found':False,
'reason' : "Some kind of entry that I cannot display",
}
#return_val.update({'reply_btns': reply_btns})
log.debug(f"data for {file_id} in {chat_id} returned as {return_val}")
return return_val
async def download_get(self, req):
return await self.handle_request(req)
async def download_head(self, req):
return await self.handle_request(req, head=True)
async def thumbnail_get(self, req):
return await self.handle_request(req, thumb=True)
async def thumbnail_head(self, req):
return await self.handle_request(req, head=True, thumb=True)
async def logo(self, req):
alias_id = req.rel_url.path.split('/')[1]
chat_id = chat_ids[alias_ids.index(alias_id)]
@ -216,6 +211,22 @@ class Views:
r.enable_chunked_encoding()
return r
async def download_get(self, req):
return await self.handle_request(req)
async def download_head(self, req):
return await self.handle_request(req, head=True)
async def thumbnail_get(self, req):
return await self.handle_request(req, thumb=True)
async def thumbnail_head(self, req):
return await self.handle_request(req, head=True, thumb=True)
async def handle_request(self, req, head=False, thumb=False):
file_id = int(req.match_info["id"])
@ -223,13 +234,13 @@ class Views:
chat_id = chat_ids[alias_ids.index(alias_id)]
message = await self.client.get_messages(entity=chat_id, ids=file_id)
if not message or not message.file:
log.info(f"no result for {file_id} in {chat_id}")
log.debug(f"no result for {file_id} in {chat_id}")
return web.Response(status=410, text="410: Gone. Access to the target resource is no longer available!")
if thumb and message.document:
thumbnail = message.document.thumbs
if not thumbnail:
log.info(f"no thumbnail for {file_id} in {chat_id}")
log.debug(f"no thumbnail for {file_id} in {chat_id}")
return web.Response(status=404, text="404: Not Found")
thumbnail = thumbnail[-1]
mime_type = 'image/jpeg'
@ -253,7 +264,6 @@ class Views:
if (limit > size) or (offset < 0) or (limit < offset):
raise ValueError("range not in acceptable format")
except ValueError:
log.info("Range Not Satisfiable", exc_info=True)
return web.Response(
status=416,
text="416: Range Not Satisfiable",
@ -262,10 +272,11 @@ class Views:
}
)
body = None
if not head:
body = self.client.download(media, size, offset, limit)
log.info(f"Serving file {message.id} in {chat_id} ; Range: {offset} - {limit}")
log.info(f"Serving file in {message.id} (chat {chat_id}) ; Range: {offset} - {limit}")
else:
body = None
headers = {
"Content-Type": mime_type,