From 4105e3985d76e7432cb811c3f011eec02b9022ba Mon Sep 17 00:00:00 2001
From: TaToTanWeb <75488098+TaToTanWeb@users.noreply.github.com>
Date: Tue, 3 Sep 2024 13:34:59 +0200
Subject: [PATCH] feat: telegram mini-app (#282)
* feat: added a telegram mini-app
* running web server in main
* fix: applied suggestions and pylint complaints
---
.gitignore | 4 +
main.py | 4 +-
module/commands/gdrive.py | 88 +-
module/commands/lezioni.py | 4 +-
module/data/lesson.py | 2 +-
module/utils/drive_utils.py | 43 +
requirements.txt | 4 +-
webapp/.postcssrc | 5 +
webapp/app.py | 50 +
webapp/drive/index.html | 48 +
webapp/drive/static/scripts/back.ts | 33 +
webapp/drive/static/scripts/container.ts | 51 +
webapp/drive/static/scripts/file.ts | 58 +
webapp/drive/static/scripts/folder.ts | 46 +
webapp/drive/static/scripts/images.ts | 19 +
webapp/drive/static/scripts/index.ts | 3 +
webapp/drive/static/scripts/resource.ts | 7 +
webapp/drive/static/scripts/update.ts | 18 +
webapp/drive/static/style.css | 105 +
webapp/drive/static/web/sw.js | 11 +
webapp/index.html | 58 +
webapp/package-lock.json | 4880 ++++++++++++++++++++++
webapp/package.json | 18 +
webapp/static/assets/logo.ico | Bin 0 -> 126928 bytes
webapp/static/assets/logo.png | Bin 0 -> 92120 bytes
webapp/static/style.css | 21 +
webapp/tailwind.config.js | 9 +
27 files changed, 5518 insertions(+), 71 deletions(-)
create mode 100644 module/utils/drive_utils.py
create mode 100644 webapp/.postcssrc
create mode 100644 webapp/app.py
create mode 100644 webapp/drive/index.html
create mode 100644 webapp/drive/static/scripts/back.ts
create mode 100644 webapp/drive/static/scripts/container.ts
create mode 100644 webapp/drive/static/scripts/file.ts
create mode 100644 webapp/drive/static/scripts/folder.ts
create mode 100644 webapp/drive/static/scripts/images.ts
create mode 100644 webapp/drive/static/scripts/index.ts
create mode 100644 webapp/drive/static/scripts/resource.ts
create mode 100644 webapp/drive/static/scripts/update.ts
create mode 100644 webapp/drive/static/style.css
create mode 100644 webapp/drive/static/web/sw.js
create mode 100644 webapp/index.html
create mode 100644 webapp/package-lock.json
create mode 100644 webapp/package.json
create mode 100644 webapp/static/assets/logo.ico
create mode 100644 webapp/static/assets/logo.png
create mode 100644 webapp/static/style.css
create mode 100644 webapp/tailwind.config.js
diff --git a/.gitignore b/.gitignore
index 977fbb58..22c8bdb7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -130,3 +130,7 @@ pydrive/*
.idea
data/json/subjs.json
**/.DS_Store
+
+# Webapp
+node_modules/
+.parcel-cache/
\ No newline at end of file
diff --git a/main.py b/main.py
index 1ce404f0..eb6bbce7 100755
--- a/main.py
+++ b/main.py
@@ -23,7 +23,8 @@
from module.shared import config_map
from module.utils.multi_lang_utils import load_translations, get_regex_multi_lang
from module.debug import error_handler, log_message
-
+from webapp.app import app
+import uvicorn
def add_commands(up: Updater) -> None:
"""Adds the list of commands with their description to the bot
@@ -195,6 +196,7 @@ def main() -> None:
add_jobs(updater.dispatcher)
updater.start_polling()
+ uvicorn.run(app, host="0.0.0.0", port=8000)
updater.idle()
diff --git a/module/commands/gdrive.py b/module/commands/gdrive.py
index 43936dfd..7d0de001 100644
--- a/module/commands/gdrive.py
+++ b/module/commands/gdrive.py
@@ -1,9 +1,4 @@
"""/drive command"""
-import os
-
-import yaml
-from pydrive2.auth import AuthError, GoogleAuth
-from pydrive2.drive import GoogleDrive
from pydrive2.files import GoogleDriveFile
from telegram import InlineKeyboardButton, InlineKeyboardMarkup, Update, Bot
from telegram.ext import CallbackContext
@@ -11,23 +6,7 @@
from module.debug import log_error
from module.data.vars import TEXT_IDS, PLACE_HOLDER
from module.utils.multi_lang_utils import get_locale
-
-gdrive_interface = None
-
-with open('config/settings.yaml', 'r', encoding='utf-8') as yaml_config:
- config_map = yaml.load(yaml_config, Loader=yaml.SafeLoader)
-
-
-def get_gdrive_interface() -> GoogleDrive:
- global gdrive_interface
-
- if gdrive_interface is None:
- # gauth uses all the client_config of settings.yaml
- gauth = GoogleAuth(settings_file="config/settings.yaml")
- gauth.CommandLineAuth()
- gdrive_interface = GoogleDrive(gauth)
-
- return gdrive_interface
+from module.utils.drive_utils import drive_utils
def drive(update: Update, context: CallbackContext) -> None:
@@ -39,7 +18,6 @@ def drive(update: Update, context: CallbackContext) -> None:
context: context passed by the handler
"""
check_log(update, "drive")
- gdrive: GoogleDrive = get_gdrive_interface()
chat_id: int = update.message.chat_id
locale: str = update.message.from_user.language_code
if chat_id < 0:
@@ -48,24 +26,20 @@ def drive(update: Update, context: CallbackContext) -> None:
)
return
- try:
- file_list = gdrive.ListFile(
- {
- 'q': f"'{config_map['drive_folder_id']}' in parents and trashed=false",
- 'orderBy': 'folder,title',
- }
- ).GetList()
-
- except AuthError as err:
- log_error(header="drive", error=err)
-
- # keyboard that allows the user to navigate the folder
- keyboard = get_files_keyboard(file_list, row_len=3)
- context.bot.sendMessage(
- chat_id=chat_id,
- text=get_locale(locale, TEXT_IDS.DRIVE_HEADER_TEXT_ID),
- reply_markup=InlineKeyboardMarkup(keyboard),
- )
+ file_list = drive_utils.list_files()
+ if file_list:
+ # keyboard that allows the user to navigate the folder
+ keyboard = get_files_keyboard(file_list, row_len=3)
+ context.bot.sendMessage(
+ chat_id=chat_id,
+ text=get_locale(locale, TEXT_IDS.DRIVE_HEADER_TEXT_ID),
+ reply_markup=InlineKeyboardMarkup(keyboard),
+ )
+ else:
+ context.bot.sendMessage(
+ chat_id=chat_id,
+ text=get_locale(locale, TEXT_IDS.DRIVE_ERROR_DEVS_TEXT_ID),
+ )
def drive_handler(update: Update, context: CallbackContext) -> None:
@@ -78,28 +52,17 @@ def drive_handler(update: Update, context: CallbackContext) -> None:
"""
bot: Bot = context.bot
- gdrive: GoogleDrive = get_gdrive_interface()
-
query_data: str = update.callback_query.data.replace("drive_file_", "")
chat_id: int = update.callback_query.from_user.id
message_id: int = update.callback_query.message.message_id
locale: str = update.callback_query.from_user.language_code
- fetched_file: GoogleDriveFile = gdrive.CreateFile({'id': query_data})
+ fetched_file: GoogleDriveFile = drive_utils.get_file(query_data)
# the user clicked on a folder
if fetched_file['mimeType'] == "application/vnd.google-apps.folder":
- try:
- istance_file = gdrive.ListFile(
- {
- 'q': f"'{fetched_file['id']}' in parents and trashed=false",
- 'orderBy': 'folder,title',
- }
- )
- file_list = istance_file.GetList()
+ file_list = drive_utils.list_files(fetched_file['id'])
- # pylint: disable=broad-except
- except Exception as e:
- log_error(header="drive_handler", error=e)
+ if file_list is None:
bot.editMessageText(
chat_id=chat_id,
message_id=message_id,
@@ -139,19 +102,12 @@ def drive_handler(update: Update, context: CallbackContext) -> None:
else: # the user clicked on a file
try:
- file_d = gdrive.CreateFile({'id': fetched_file['id']})
-
+ file_d = drive_utils.get_file(fetched_file['id'])
if int(file_d['fileSize']) < 5e7:
-
- file_path = f"file/{fetched_file['title']}"
- file_d.GetContentFile(file_path)
-
+ f = file_d.GetContentIOBuffer()
+ f.name = fetched_file['title']
bot.sendChatAction(chat_id=chat_id, action="UPLOAD_DOCUMENT")
-
- with open(file_path, 'rb') as f:
- bot.sendDocument(chat_id=chat_id, document=f)
-
- os.remove(file_path)
+ bot.sendDocument(chat_id=chat_id, document=f)
else:
bot.sendMessage(
diff --git a/module/commands/lezioni.py b/module/commands/lezioni.py
index 0f615af0..a3d099d4 100644
--- a/module/commands/lezioni.py
+++ b/module/commands/lezioni.py
@@ -35,8 +35,8 @@ def get_url(courses: str) -> str:
endl_index = courses.find("\n", course_index)
if token_pos != -1:
- main_link = courses[token_pos + 1:endl_index]
- return main_link
+ return courses[token_pos + 1:endl_index]
+ return ''
def get_orario_file() -> Optional[bytes]:
diff --git a/module/data/lesson.py b/module/data/lesson.py
index 5d95fa37..3aa4d953 100644
--- a/module/data/lesson.py
+++ b/module/data/lesson.py
@@ -75,7 +75,7 @@ def scrape(cls, year_exams: str, delete: bool = False):
if soup.find('b', id='attivo').text[0] == 'S':
semestre = 2
- elif soup.find('b', id='attivo').text[0] == 'P':
+ else:
semestre = 1
table = soup.find('table', id='tbl_small_font')
diff --git a/module/utils/drive_utils.py b/module/utils/drive_utils.py
new file mode 100644
index 00000000..3ebb4d23
--- /dev/null
+++ b/module/utils/drive_utils.py
@@ -0,0 +1,43 @@
+import yaml
+from typing import Optional
+from pydrive2.auth import GoogleAuth
+from pydrive2.drive import GoogleDrive
+from pydrive2.files import GoogleDriveFileList, GoogleDriveFile
+from module.debug import log_error
+
+
+class DriveUtils:
+ def __init__(self):
+ self._gdrive = None
+ with open('config/settings.yaml', 'r', encoding='utf-8') as yaml_config:
+ self.config_map = yaml.load(yaml_config, Loader=yaml.SafeLoader)
+
+ @property
+ def gdrive(self) -> GoogleDrive:
+ 'Returns the active drive.GoogleDrive instance.'
+ if self._gdrive is None:
+ # gauth uses all the client_config of settings.yaml
+ gauth = GoogleAuth(settings_file="./config/settings.yaml")
+ gauth.CommandLineAuth()
+ self._gdrive = GoogleDrive(gauth)
+ return self._gdrive
+
+ def list_files(self, folder_id: Optional[str] = None) -> Optional[GoogleDriveFileList]:
+ 'Returns a list of files or folders in the given directory'
+ folder_id = folder_id or self.config_map['drive_folder_id']
+ try:
+ return self.gdrive.ListFile({
+ 'q': f"'{folder_id}' in parents and trashed=false",
+ 'orderBy': 'folder,title',
+ }).GetList()
+ # pylint: disable=broad-except
+ except Exception as e:
+ log_error(header="drive_handler", error=e)
+ return None
+
+ def get_file(self, file_id: str) -> GoogleDriveFile:
+ 'Shorthand for self.gdrive.CreateFile'
+ return self.gdrive.CreateFile({'id': file_id})
+
+
+drive_utils = DriveUtils()
diff --git a/requirements.txt b/requirements.txt
index d4c59653..cf56a4cc 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,3 +1,4 @@
+numpy==1.26.4
python-telegram-bot==13.8.1
PyDrive2==1.10.0
requests==2.26.0
@@ -6,4 +7,5 @@ python-gitlab==2.10.1
matplotlib==3.5.0
pandas==1.3.4
Pillow==8.4.0
-lxml==4.6.4
\ No newline at end of file
+lxml==4.6.4
+uvicorn==0.30.6
\ No newline at end of file
diff --git a/webapp/.postcssrc b/webapp/.postcssrc
new file mode 100644
index 00000000..d42c370f
--- /dev/null
+++ b/webapp/.postcssrc
@@ -0,0 +1,5 @@
+{
+ "plugins": {
+ "tailwindcss": {}
+ }
+}
\ No newline at end of file
diff --git a/webapp/app.py b/webapp/app.py
new file mode 100644
index 00000000..248192fe
--- /dev/null
+++ b/webapp/app.py
@@ -0,0 +1,50 @@
+from fastapi import FastAPI
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse, JSONResponse, StreamingResponse
+from pydrive2.files import MediaIoReadable
+from starlette.responses import ContentStream
+from module.utils.drive_utils import drive_utils
+
+
+app = FastAPI()
+
+@app.get('/favicon.ico')
+def favicon():
+ 'Serve the website favicon'
+ return FileResponse('webapp/static/assets/logo.ico')
+
+@app.get('/drive/folder')
+def _(folder_id: str):
+ 'Returns content of a folder in the DMI Drive.'
+ files = drive_utils.list_files(folder_id) or []
+ keys = 'id', 'title', 'mimeType'
+ response = JSONResponse([{key: file[key] for key in keys} for file in files])
+ response.headers['Access-Control-Allow-Origin'] = '*'
+ return response
+
+@app.get('/drive/file')
+def _(file_id: str):
+ 'Returns content of a file in the DMI Drive.'
+ file = drive_utils.get_file(file_id)
+ if not file:
+ return JSONResponse({'error': 'File not found.'}, status_code = 204)
+ content = file.GetContentIOBuffer()
+ return StreamingResponse(
+ stream(content),
+ media_type = file['mimeType'],
+ headers = {
+ # delivering it as a download
+ 'Content-Disposition': f"attachment; filename=\"{file['title']}\"",
+ # making it accessible from web browsers
+ 'Access-Control-Allow-Origin': '*'
+ }
+ )
+
+def stream(content: MediaIoReadable) -> ContentStream:
+ chunk = True
+ while chunk:
+ chunk = content.read()
+ if chunk:
+ yield chunk
+
+app.mount('/', StaticFiles(directory = 'webapp/dist/', html = True), name = 'dist')
diff --git a/webapp/drive/index.html b/webapp/drive/index.html
new file mode 100644
index 00000000..20813f21
--- /dev/null
+++ b/webapp/drive/index.html
@@ -0,0 +1,48 @@
+
+
+
+ DMI Drive
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/webapp/drive/static/scripts/back.ts b/webapp/drive/static/scripts/back.ts
new file mode 100644
index 00000000..20ada572
--- /dev/null
+++ b/webapp/drive/static/scripts/back.ts
@@ -0,0 +1,33 @@
+import { Folder, FOLDERMIME } from "./folder";
+import { update_content } from "./update";
+
+export class BackButton extends Folder {
+ foldersHistory = new Array();
+
+ connectedCallback(): void {
+ this.update({
+ title: '..',
+ id: 'back',
+ mimeType: FOLDERMIME
+ })
+ }
+
+ onFolderChange(folderId: string): void {
+ this.foldersHistory.push(folderId);
+ if (folderId != '') {
+ this.show();
+ } else {
+ this.hide();
+ }
+ }
+
+ override onClick(): void {
+ const previousFolderId = this.foldersHistory[this.foldersHistory.length - 2];
+ // Removing the last folder id in the history
+ this.foldersHistory.splice(this.foldersHistory.length - 2);
+ // Showing content of the previous folder
+ update_content(previousFolderId);
+ }
+}
+
+window.customElements.define('drive-back-button', BackButton);
\ No newline at end of file
diff --git a/webapp/drive/static/scripts/container.ts b/webapp/drive/static/scripts/container.ts
new file mode 100644
index 00000000..d2e82ff3
--- /dev/null
+++ b/webapp/drive/static/scripts/container.ts
@@ -0,0 +1,51 @@
+export abstract class Containable extends HTMLElement {
+ // The HTMLElement to be collected.
+ data: T
+
+ abstract update(data: T): void;
+ abstract show(): void;
+ abstract hide(): void;
+};
+
+export class Container {
+ // Makes it easier to add elements or
+ // update already existing ones.
+ content = new Array>();
+ parent: HTMLElement;
+ elementType: new (p: HTMLElement, i: number) => Containable;
+
+ constructor(parent: HTMLElement, elementType: new (p: HTMLElement, i: number) => Containable) {
+ this.parent = parent;
+ this.elementType = elementType;
+ }
+
+ setContent(content: T[]): void {
+ // Displays the given list of objects
+ for (var i=0; i < content.length; i++)
+ this.addOrUpdate(content[i], i);
+ this.hideFrom(i);
+ }
+
+ addOrUpdate(data: T, i: number = 0): void {
+ if (this.content[i]) {
+ // If an object has been created already,
+ // update its content and show it
+ this.content[i].update(data);
+ this.content[i].show();
+ } else {
+ // Otherwise, create a new one
+ const e = new this.elementType(this.parent, i);
+ e.update(data);
+ e.show();
+ this.content.push(e);
+ this.parent.append(e);
+ }
+ }
+
+ hideFrom(i: number = 0): void {
+ // Start hiding elements from i till the end
+ for (; i < this.content.length; i++) {
+ this.content[i].hide();
+ }
+ }
+};
diff --git a/webapp/drive/static/scripts/file.ts b/webapp/drive/static/scripts/file.ts
new file mode 100644
index 00000000..f4d84319
--- /dev/null
+++ b/webapp/drive/static/scripts/file.ts
@@ -0,0 +1,58 @@
+import { Container } from "./container";
+import { DriveResource } from "./resource";
+import { match } from './images';
+
+
+class File extends HTMLElement {
+ data: DriveResource;
+ image: HTMLImageElement;
+ label: HTMLElement;
+ link: HTMLAnchorElement;
+ clicked: boolean = false;
+
+ constructor(parent: HTMLElement, i: number) {
+ super();
+
+ this.image = document.createElement('img') as HTMLImageElement;
+ this.label = document.createElement('file-name');
+ this.link = document.createElement('a') as HTMLAnchorElement;
+ this.link.style.display = 'none';
+ this.append(this.image, this.label, this.link);
+ this.addEventListener('click', this.onClick.bind(this));
+ this.classList.add('drive-file');
+ }
+
+ onClick(): void {
+ if (!this.clicked) {
+ this.clicked = true;
+ this.classList.add('clicked');
+ this.link.href = `/drive/file?file_id=${this.data.id}`;
+ this.link.download = this.data.title;
+ this.link.click();
+ setTimeout(() => {
+ this.classList.remove('clicked');
+ this.clicked = false;
+ }, 5000)
+ }
+ }
+
+ update(data: DriveResource): void {
+ this.data = data;
+ this.label.textContent = this.data.title;
+ this.image.src = match(data.mimeType)
+ }
+
+ show(): void {
+ this.classList.remove('hidden');
+ }
+
+ hide(): void {
+ this.classList.add('hidden');
+ }
+};
+
+
+
+const filesList = document.getElementById('files-list') as HTMLElement;
+export const files = new Container(filesList, File);
+window.customElements.define('drive-file', File);
\ No newline at end of file
diff --git a/webapp/drive/static/scripts/folder.ts b/webapp/drive/static/scripts/folder.ts
new file mode 100644
index 00000000..2f32f05a
--- /dev/null
+++ b/webapp/drive/static/scripts/folder.ts
@@ -0,0 +1,46 @@
+import { Container } from "./container";
+import { DriveResource } from "./resource";
+import { update_content } from "./update";
+
+
+export const FOLDERMIME = 'application/vnd.google-apps.folder';
+
+export class Folder extends HTMLElement {
+ data: DriveResource;
+ label: HTMLElement;
+
+ constructor(parent: HTMLElement, i: number) {
+ super();
+
+ const icon = document.createElement('i');
+ icon.classList.add('gg-folder');
+ this.label = document.createElement('folder-name');
+ this.append(icon, this.label);
+ this.addEventListener('click', this.onClick.bind(this));
+ this.classList.add('drive-folder');
+ }
+
+ onClick(): void {
+ // this.classList.add('fadeout');
+ update_content(this.data.id);
+ }
+
+ update(data: DriveResource): void {
+ this.data = data;
+ this.label.textContent = this.data.title;
+ }
+
+ show(): void {
+ this.classList.remove('hidden');
+ }
+
+ hide(): void {
+ this.classList.add('hidden');
+ }
+};
+
+
+
+const foldersList = document.getElementById('folders-list') as HTMLElement;
+export const folders = new Container(foldersList, Folder);
+window.customElements.define('drive-folder', Folder);
\ No newline at end of file
diff --git a/webapp/drive/static/scripts/images.ts b/webapp/drive/static/scripts/images.ts
new file mode 100644
index 00000000..60542f64
--- /dev/null
+++ b/webapp/drive/static/scripts/images.ts
@@ -0,0 +1,19 @@
+const images = {
+ audio: 'https://telegra.ph/file/83285485816f7cf0fcf67.png',
+ image: 'https://telegra.ph/file/a1f5285c74ce80d8fa554.png',
+ pdf: 'https://telegra.ph/file/cc429f1e5d235f54a4500.png',
+ document: 'https://telegra.ph/file/a12324faf7e9385ed23e8.png',
+ file: 'https://telegra.ph/file/6995dd010a84417175963.png'
+}
+
+
+export function match(mime: string): string {
+ const entries = Object.entries(images);
+ for (let i=0; i < entries.length; i++) {
+ if (mime.includes(entries[i][0])) {
+ return entries[i][1];
+ }
+ }
+
+ return images.file;
+}
\ No newline at end of file
diff --git a/webapp/drive/static/scripts/index.ts b/webapp/drive/static/scripts/index.ts
new file mode 100644
index 00000000..807b6ba6
--- /dev/null
+++ b/webapp/drive/static/scripts/index.ts
@@ -0,0 +1,3 @@
+import { update_content } from './update';
+
+update_content("");
\ No newline at end of file
diff --git a/webapp/drive/static/scripts/resource.ts b/webapp/drive/static/scripts/resource.ts
new file mode 100644
index 00000000..93c768fb
--- /dev/null
+++ b/webapp/drive/static/scripts/resource.ts
@@ -0,0 +1,7 @@
+export interface DriveResource {
+ // Represents a file or a folder
+ // as received from Google Drive.
+ id: string;
+ title: string;
+ mimeType: string;
+};
diff --git a/webapp/drive/static/scripts/update.ts b/webapp/drive/static/scripts/update.ts
new file mode 100644
index 00000000..bb2078da
--- /dev/null
+++ b/webapp/drive/static/scripts/update.ts
@@ -0,0 +1,18 @@
+import { FOLDERMIME, folders } from "./folder";
+import { files } from "./file";
+import { DriveResource } from "./resource";
+import { BackButton } from "./back";
+
+
+const backButton = document.getElementById('back-button') as BackButton;
+
+export function update_content(folderId: string): void {
+ fetch(`/drive/folder?folder_id=${folderId}`)
+ .then(response => response.json())
+ .then((data: DriveResource[]) => {
+ folders.setContent(data.filter((res => res.mimeType == FOLDERMIME)));
+ files.setContent(data.filter((res => res.mimeType != FOLDERMIME)));
+ // Include a special link to go back to the previous folder
+ backButton.onFolderChange(folderId);
+ });
+}
\ No newline at end of file
diff --git a/webapp/drive/static/style.css b/webapp/drive/static/style.css
new file mode 100644
index 00000000..66012444
--- /dev/null
+++ b/webapp/drive/static/style.css
@@ -0,0 +1,105 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+ background-color: var(--tg-theme-bg-color, white);
+ background-image: radial-gradient(var(--tg-theme-secondary-bg-color, #00000026) 2px,#0000 0);
+ background-size: 32px 32px;
+ color: var(--tg-theme-text-color, black);
+
+ -webkit-tap-highlight-color: transparent;
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+#folders-list, #files-list {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin-top: 2.5rem;
+ width: 75%;
+}
+
+#files-list {
+ flex-direction: row;
+ align-items: flex-start;
+ flex-wrap: wrap;
+ margin-bottom: 2.5rem;
+ width: 95%;
+}
+
+.drive-folder {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ width: 100%;
+ height: 2.5rem;
+ padding: 1.5rem;
+ border-radius: 0.375rem;
+ margin-bottom: 1rem;
+
+ background-color: var(--tg-theme-secondary-bg-color, #e5e5e5);
+ box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+ transition: box-shadow opacity;
+ cursor: pointer;
+}
+
+.drive-folder.fadeout {
+ opacity: 0%;
+}
+
+.drive-folder:hover {
+ box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+
+.drive-folder > i {
+ color: var(--tg-theme-text-color, #737373);
+ margin-right: 1.25rem;
+}
+
+.drive-folder > folder-name {
+ font-weight: bold;
+ color: var(--tg-theme-text-color, #404040);
+ max-width: 70%;
+ white-space: nowrap;
+ overflow: hidden !important;
+ text-overflow: ellipsis;
+}
+
+.drive-file {
+ display: flex;
+ flex-direction: column;
+ padding: 1.25rem;
+ border-radius: 0.375rem;
+ margin-left: 12px;
+ margin-bottom: 12px;
+ width: 45%;
+
+ background-color: var(--tg-theme-secondary-bg-color, #e5e5e5);
+ box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+ transition: box-shadow;
+ cursor: pointer;
+}
+
+.drive-file:hover {
+ box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+
+.drive-file img {
+ width: 8rem;
+ border-radius: 0.375rem 0.375rem 0.375rem 1.75rem;
+}
+
+.drive-file file-name {
+ word-wrap: break-word;
+ margin-top: 1.25rem;
+ font-weight: bold;
+ color: var(--tg-theme-text-color, #171717);
+ width: 80%;
+}
+
+.drive-file.clicked {
+ opacity: 50%;
+ cursor: progress;
+}
\ No newline at end of file
diff --git a/webapp/drive/static/web/sw.js b/webapp/drive/static/web/sw.js
new file mode 100644
index 00000000..d8ad28e7
--- /dev/null
+++ b/webapp/drive/static/web/sw.js
@@ -0,0 +1,11 @@
+// Required for Progressive Web Apps.
+const cacheName = 'v1:static';
+
+self.addEventListener('install', function(e) {
+ e.waitUntil(
+ caches.open(cacheName).then(function(cache) {
+ // cache.addAll(['/index.html']);
+ self.skipWaiting();
+ })
+ );
+});
\ No newline at end of file
diff --git a/webapp/index.html b/webapp/index.html
new file mode 100644
index 00000000..ff03137c
--- /dev/null
+++ b/webapp/index.html
@@ -0,0 +1,58 @@
+
+
+
+ DMI Bot
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Telegram Hub
+
+
+
+
Book Market
+
+
+
+
DMI Drive
+
+
+
+
Spotted DMI
+
+
+
+
Ask DMI
+
+
+
+
OPIS Manager
+
+