feat(easel): add bootstrap
This commit is contained in:
2
.gitignore
vendored
2
.gitignore
vendored
@@ -2,3 +2,5 @@
|
||||
.pytest_cache
|
||||
.venv
|
||||
#.vscode
|
||||
static/node_modules
|
||||
static/dist
|
||||
@@ -7,6 +7,14 @@ COPY pyproject.toml poetry.lock README.md ./
|
||||
RUN poetry config virtualenvs.in-project true
|
||||
RUN poetry install --with app --no-root
|
||||
|
||||
FROM node:24 AS node-builder
|
||||
ENV PATH=/app/node_modules/.bin:$PATH
|
||||
WORKDIR /app
|
||||
COPY static/package.json static/package-lock.json ./
|
||||
RUN npm ci
|
||||
COPY static ./
|
||||
RUN npm run build
|
||||
|
||||
FROM python:3.12-slim
|
||||
ENV PATH="/app/.venv/bin:$PATH"
|
||||
WORKDIR /app
|
||||
@@ -18,6 +26,7 @@ ENV LANG=ru_RU.UTF-8
|
||||
ENV LC_ALL=ru_RU.UTF-8
|
||||
ENV TZ="Europe/Moscow"
|
||||
COPY --from=builder /app ./
|
||||
COPY --from=node-builder /app/dist ./static/dist
|
||||
COPY gallery gallery/
|
||||
|
||||
CMD ["uvicorn", "gallery.main:app", "--host", "0.0.0.0", "--port", "80", "--log-config", "gallery/logging.yaml"]
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
# Gallery
|
||||
# API Gallery
|
||||
|
||||
## View
|
||||
|
||||
https://api.shmyga.ru
|
||||
|
||||
## API Docs
|
||||
## Swagger
|
||||
|
||||
https://api.shmyga.ru/docs
|
||||
|
||||
@@ -1,2 +0,0 @@
|
||||
#!/usr/bin/env bash
|
||||
docker compose -f docker-compose-develop.yaml up --build --watch
|
||||
@@ -33,12 +33,14 @@
|
||||
"type": "debugpy",
|
||||
"request": "launch",
|
||||
"module": "uvicorn",
|
||||
"args": [
|
||||
"gallery.main:app",
|
||||
"--reload",
|
||||
"--log-config",
|
||||
"gallery/logging.yaml",
|
||||
],
|
||||
"args": ["gallery.main:app", "--reload", "--log-config", "gallery/logging.yaml"],
|
||||
},
|
||||
{
|
||||
"name": "gallery:static",
|
||||
"cwd": "${workspaceFolder}/static",
|
||||
"request": "launch",
|
||||
"type": "node-terminal",
|
||||
"command": "npm run dev",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@@ -7,12 +7,12 @@ from gallery.sketch.schedule.model import ChannelId, Schedule
|
||||
|
||||
|
||||
def mount(app: FastAPI):
|
||||
@app.get("/api/schedule/channels")
|
||||
@app.get("/api/schedule/channels", tags=["API"])
|
||||
async def get_api_schedule_channels(request: AppRequest) -> list[ChannelId]:
|
||||
schedule_api = request.app.state.api.schedule
|
||||
return await schedule_api.get_channels()
|
||||
|
||||
@app.get("/api/schedule/{channel}/{date}")
|
||||
@app.get("/api/schedule/{channel}/{date}", tags=["API"])
|
||||
async def get_api_schedule_channel_schedule(
|
||||
request: AppRequest, channel: str, date: datetime.date
|
||||
) -> Schedule:
|
||||
|
||||
@@ -7,21 +7,21 @@ from gallery.sketch.weather.model import Location, WeatherResponse
|
||||
|
||||
|
||||
def mount(app: FastAPI):
|
||||
@app.get("/api/weather/locations")
|
||||
@app.get("/api/weather/locations", tags=["API"])
|
||||
async def get_api_weather_locations(
|
||||
request: AppRequest, query: str
|
||||
) -> list[Location]:
|
||||
weather_api = request.app.state.api.weather
|
||||
return await weather_api.find_locations(query)
|
||||
|
||||
@app.get("/api/weather/{location}/day/{date}")
|
||||
@app.get("/api/weather/{location}/day/{date}", tags=["API"])
|
||||
async def get_api_weather_day(
|
||||
request: AppRequest, location: str, date: datetime.date
|
||||
) -> WeatherResponse:
|
||||
weather_api = request.app.state.api.weather
|
||||
return await weather_api.get_day(location, date)
|
||||
|
||||
@app.get("/api/weather/{location}/days/{days}")
|
||||
@app.get("/api/weather/{location}/days/{days}", tags=["API"])
|
||||
async def get_api_weather_days(
|
||||
request: AppRequest, location: str, days: int
|
||||
) -> WeatherResponse:
|
||||
|
||||
@@ -6,6 +6,7 @@ from fastapi.responses import HTMLResponse
|
||||
from fastapi.staticfiles import StaticFiles
|
||||
from fastapi.templating import Jinja2Templates
|
||||
|
||||
from gallery.util import root_path
|
||||
from gallery.version import __version__
|
||||
|
||||
|
||||
@@ -15,13 +16,15 @@ class Section(NamedTuple):
|
||||
|
||||
|
||||
SECTIONS = [
|
||||
Section("weather", "Погода"),
|
||||
Section("schedule", "Телепрограмма"),
|
||||
Section("weather", "Weather"),
|
||||
Section("schedule", "TV program"),
|
||||
]
|
||||
|
||||
|
||||
def mount(app: FastAPI):
|
||||
base_dir = Path(__file__).parent
|
||||
print("!", root_path / "static/dist")
|
||||
app.mount("/static/main", StaticFiles(directory=root_path / "static/dist"))
|
||||
app.mount("/static/common", StaticFiles(directory=base_dir / "static"))
|
||||
templates = Jinja2Templates(directory=base_dir / "templates")
|
||||
|
||||
|
||||
@@ -1,84 +1,3 @@
|
||||
/*
|
||||
base
|
||||
*/
|
||||
body {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
/*
|
||||
table
|
||||
*/
|
||||
table {
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table,
|
||||
th,
|
||||
td {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0.1rem 0.4rem;
|
||||
}
|
||||
|
||||
/*
|
||||
a.button
|
||||
*/
|
||||
a.button {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.button.disabled {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
color: gray;
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
/*
|
||||
app
|
||||
*/
|
||||
.app-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.app-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
.app-content {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 0.5rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.app-link-home > * {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
background-image: url("/static/common/gallery.png");
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
width: 2rem;
|
||||
@@ -86,29 +5,20 @@ app
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
ul.app-list {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
width: 30rem;
|
||||
margin: auto;
|
||||
.widget .app {
|
||||
padding: 0.5rem !important;
|
||||
}
|
||||
|
||||
ul.app-list > li {
|
||||
border: 1px solid lightgrey;
|
||||
.widget header {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
ul.app-list > li > a {
|
||||
.widget main {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
padding: 0.5rem 2rem;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
ul.app-list > li:hover {
|
||||
border-color: rgb(125, 125, 255);
|
||||
}
|
||||
|
||||
ul.app-list > li:hover > a {
|
||||
color: rgb(125, 125, 255);
|
||||
.widget footer {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@@ -9,6 +9,10 @@
|
||||
<meta http-equiv="X-UA-Compatible"
|
||||
content="ie=edge">
|
||||
<title>{% block title %}{% endblock %}</title>
|
||||
<link rel="stylesheet"
|
||||
href="/static/main/gallery-static.css?v={{version}}">
|
||||
<script type="module"
|
||||
src="/static/main/gallery-static.js?v={{version}}"></script>
|
||||
<link rel="stylesheet"
|
||||
href="/static/common/style.css?v={{version}}">
|
||||
<link rel="icon"
|
||||
@@ -17,22 +21,83 @@
|
||||
{% endblock %}
|
||||
</head>
|
||||
|
||||
<body class="app-container">
|
||||
<div class="app-menu">
|
||||
<a class="app-link-home"
|
||||
href="/">
|
||||
<div></div>
|
||||
<body>
|
||||
<div class="app col-lg-8 mx-auto p-3 py-md-5">
|
||||
<header class="d-flex align-items-center pb-3 mb-5 border-bottom">
|
||||
<a href="/"
|
||||
class="d-flex align-items-center text-dark text-decoration-none">
|
||||
<div class="icon me-2"
|
||||
style="background-image: url(/static/common/gallery.png);"></div>
|
||||
<span class="fs-4 text-body">API Gallery</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="app-content">
|
||||
<h3 class="app-header">
|
||||
{% block header %}{% endblock %}</span>
|
||||
</h3>
|
||||
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
||||
<li class="nav-item dropdown">
|
||||
<button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="Toggle theme (auto)">
|
||||
<i class="bi me-2 opacity-50 theme-icon-active"></i>
|
||||
<span class="d-lg-none ms-2"
|
||||
id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end"
|
||||
aria-labelledby="bd-theme-text">
|
||||
<li>
|
||||
<button type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="light"
|
||||
aria-pressed="false">
|
||||
<i class="bi bi-sun-fill me-2 opacity-50 theme-icon"></i>
|
||||
Light
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="dark"
|
||||
aria-pressed="false">
|
||||
<i class="bi bi-moon-stars-fill me-2 opacity-50 theme-icon"></i>
|
||||
Dark
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button"
|
||||
class="dropdown-item d-flex align-items-center active"
|
||||
data-bs-theme-value="auto"
|
||||
aria-pressed="true">
|
||||
<i class="bi bi-circle-half me-2 opacity-50 theme-icon"></i>
|
||||
Auto
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</header>
|
||||
<main>
|
||||
{% block content %}{% endblock %}
|
||||
<div class="app-footer">
|
||||
{% block footer %}{% endblock %}
|
||||
</div>
|
||||
</main>
|
||||
<footer class="pt-5 my-5 text-muted border-top">
|
||||
Created by shmyga · © 2026
|
||||
</footer>
|
||||
</div>
|
||||
<script>
|
||||
(function () {
|
||||
document.toggleTheme = () => {
|
||||
const current = document.documentElement.getAttribute('data-bs-theme');
|
||||
const next = current === 'dark' ? 'light' : 'dark';
|
||||
document.documentElement.setAttribute('data-bs-theme', next);
|
||||
localStorage.setItem('theme', next);
|
||||
};
|
||||
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const widget = params.get('widget') || window.location.hostname.startsWith('weather');
|
||||
if (widget) {
|
||||
document.body.classList.add('widget');
|
||||
}
|
||||
}());
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,21 +1,24 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Информация{% endblock %}
|
||||
{% block title %}Index{% endblock %}
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block header %}Информация{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<ul class="app-list">
|
||||
<h1>View</h1>
|
||||
<div class="list-group mb-5">
|
||||
{% for section in sections %}
|
||||
<li>
|
||||
<a href="{{section.link}}">
|
||||
<span class="icon"
|
||||
<a href="{{section.link}}"
|
||||
class="list-group-item list-group-item-action px-4">
|
||||
<div class="d-flex w-100">
|
||||
<span class="icon me-2"
|
||||
style="background-image: url(/static/{{section.link}}/{{section.link}}.png);"></span>
|
||||
<span>{{section.title}}</span>
|
||||
<h4>{{section.title}}</h4>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
<hr class="col-3 col-md-2 mb-5">
|
||||
<h1>Docs</h1>
|
||||
<a href="/docs" target="_blank"><h4>Swagger</h4></a>
|
||||
{% endblock %}
|
||||
@@ -1,25 +0,0 @@
|
||||
table.schedule-table {
|
||||
width: 60rem;
|
||||
margin: auto;
|
||||
table-layout: auto
|
||||
}
|
||||
|
||||
table.schedule-table tr {
|
||||
border-bottom: 1px solid lightgray;
|
||||
}
|
||||
|
||||
table.schedule-table td {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.schedule-table tr.live {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.schedule-table .title {
|
||||
margin-top: 0.5rem;
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
font-size: 120%;
|
||||
background-color: lightgray;
|
||||
}
|
||||
|
||||
@@ -11,18 +11,17 @@
|
||||
type="image/x-icon">
|
||||
{% endblock %}
|
||||
|
||||
{% block header %}
|
||||
<a class="button {{'disabled' if response.date == datetime.date.today() else ''}}"
|
||||
href="../tag/{{tag_util.create_tag('day', response.date, -1)}}">⬅️</a>
|
||||
<a class="button"
|
||||
href="../..">⬆️</a>
|
||||
<span>{{response.channel.name}} | {{response.date.strftime('%a, %d %B %Y')}}</span>
|
||||
<a class="button"
|
||||
href="../tag/{{tag_util.create_tag('day', response.date, 1)}}">➡️</a>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<table class="schedule-table">
|
||||
<h4>
|
||||
<a class="button {{'disabled' if response.date == datetime.date.today() else ''}}"
|
||||
href="../tag/{{tag_util.create_tag('day', response.date, -1)}}">⬅️</a>
|
||||
<a class="button"
|
||||
href="../..">⬆️</a>
|
||||
<span>{{response.channel.name}} | {{response.date.strftime('%a, %d %B %Y')}}</span>
|
||||
<a class="button"
|
||||
href="../tag/{{tag_util.create_tag('day', response.date, 1)}}">➡️</a>
|
||||
</h4>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
@@ -32,7 +31,7 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for value in response.values %}
|
||||
<tr class="{{'live' if value.live else ''}}">
|
||||
<tr class="{{'table-success' if value.live else ''}}">
|
||||
<td>{{value.start.strftime('%H:%M')}}</td>
|
||||
<td>{{(value.end - value.start) | timedelta_format}}</td>
|
||||
<td>{{value.label}}</td>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}ТВ{% endblock %}
|
||||
{% block title %}TV program{% endblock %}
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
<link rel="stylesheet"
|
||||
@@ -9,13 +9,18 @@
|
||||
type="image/x-icon">
|
||||
{% endblock %}
|
||||
|
||||
{% block header %}Телепрограмма{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<ul class="app-list">
|
||||
<li style="margin-bottom: 0.25rem; font-weight: bold;"><a href="schedule/tag/today">Все</a></li>
|
||||
<h1>TV program</h1>
|
||||
<div class="list-group mb-5">
|
||||
<a href="schedule/tag/today"
|
||||
class="list-group-item list-group-item-action px-4">
|
||||
<span class="fw-bold">Все</span>
|
||||
</a>
|
||||
{% for channel in channels %}
|
||||
<li><a href="schedule/{{channel.id}}">{{channel.name}}</a></li>
|
||||
<a href="schedule/{{channel.id}}"
|
||||
class="list-group-item list-group-item-action px-4">
|
||||
<span class="text-primary">{{channel.name}}</span>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -11,19 +11,18 @@
|
||||
type="image/x-icon">
|
||||
{% endblock %}
|
||||
|
||||
{% block header %}
|
||||
<a class="button {{'disabled' if response.date == datetime.date.today() else ''}}"
|
||||
href="../tag/{{tag_util.create_tag('day', response.date, -1)}}">⬅️</a>
|
||||
<a class="button"
|
||||
href="..">⬆️</a>
|
||||
<span>{{'Прямые трансляции' if live else 'Программа'}} | {{response.date.strftime('%a, %d %B %Y')}}</span>
|
||||
<a class="button"
|
||||
href="../tag/{{tag_util.create_tag('day', response.date, 1)}}">➡️</a>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h4>
|
||||
<a class="button {{'disabled' if response.date == datetime.date.today() else ''}}"
|
||||
href="../tag/{{tag_util.create_tag('day', response.date, -1)}}">⬅️</a>
|
||||
<a class="button"
|
||||
href="..">⬆️</a>
|
||||
<span>{{'Прямые трансляции' if live else 'Программа'}} | {{response.date.strftime('%a, %d %B %Y')}}</span>
|
||||
<a class="button"
|
||||
href="../tag/{{tag_util.create_tag('day', response.date, 1)}}">➡️</a>
|
||||
</h4>
|
||||
<div>
|
||||
<table class="schedule-table {{'live' if live else ''}}">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
@@ -35,7 +34,7 @@
|
||||
{% for response in responses %}
|
||||
{% set values = (response.values|selectattr('live') if live else response.values)|list %}
|
||||
{% if values|length > 0 %}
|
||||
<tr class="title">
|
||||
<tr class="table-primary fs-4">
|
||||
<td colspan="3">
|
||||
<div>{{response.channel.name}}</div>
|
||||
</td>
|
||||
@@ -43,7 +42,7 @@
|
||||
<td></td>
|
||||
</tr>
|
||||
{% for value in values %}
|
||||
<tr class="{{'live' if not live and value.live else ''}}">
|
||||
<tr class="{{'table-success' if not live and value.live else ''}}">
|
||||
<td>{{value.start.strftime('%H:%M')}}</td>
|
||||
<td>{{(value.end - value.start) | timedelta_format}}</td>
|
||||
<td>{{value.label}}</td>
|
||||
|
||||
@@ -1,16 +1,15 @@
|
||||
.header {
|
||||
font-size: 1rem;
|
||||
font-size: 0.9rem;
|
||||
text-align: left;
|
||||
padding-top: 0.25rem;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 1.5rem;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
background: rgba(1, 0, 0, 0.1) !important;
|
||||
}
|
||||
|
||||
.date.now {
|
||||
background: rgba(0, 128, 255, 0.2);
|
||||
background: rgba(0, 128, 255, 0.2) !important;
|
||||
}
|
||||
|
||||
.date .value a {
|
||||
@@ -59,7 +58,7 @@
|
||||
}
|
||||
|
||||
.pressure {
|
||||
padding: 0;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.pressure .value {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Погода{% endblock %}
|
||||
{% block title %}Weather{% endblock %}
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
<link rel="stylesheet"
|
||||
@@ -9,27 +9,73 @@
|
||||
type="image/x-icon">
|
||||
{% endblock %}
|
||||
|
||||
{% block header %}Погода{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h1>Weather</h1>
|
||||
<form action=""
|
||||
method="get"
|
||||
style="margin: 0 auto 1rem;">
|
||||
<input id="query"
|
||||
name="query">
|
||||
<button type="submit">Search</button>
|
||||
class="mb-4">
|
||||
<div class="input-group mb-3">
|
||||
<input type="text"
|
||||
class="form-control"
|
||||
id="query"
|
||||
name="query"
|
||||
placeholder="Enter the city name">
|
||||
<button class="btn btn-primary"
|
||||
type="submit">Search</button>
|
||||
</div>
|
||||
</form>
|
||||
<ul class="app-list">
|
||||
<ul id="locations"
|
||||
class="list-group mb-5">
|
||||
{% for location in locations %}
|
||||
<li>
|
||||
<a href="weather/{{location.id}}">
|
||||
<span>{{location.name}}</span>
|
||||
<span style="font-size: 70%; margin-left: 0.5rem;">
|
||||
<a href="weather/{{location.id}}"
|
||||
class="list-group-item list-group-item-action px-4"
|
||||
onclick="saveLocation({id:'{{location.id}}', name:'{{location.name}}'});">
|
||||
<span class="text-primary">{{location.name}}</span>
|
||||
<span class="small ms-1 text-secondary">
|
||||
{{location.country}}, {{location.district}}, {{location.subdistrict}}
|
||||
</span>
|
||||
<span></span>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<script>
|
||||
(function () {
|
||||
document.loadLocations = () => {
|
||||
const locations = JSON.parse(window.localStorage.getItem('locations') || '{}');
|
||||
const container = document.querySelector('#locations');
|
||||
container.innerHTML = '';
|
||||
for (const [id, name] of Object.entries(locations)) {
|
||||
const element = document.createElement('a');
|
||||
element.href = `weather/${id}`;
|
||||
element.className = 'list-group-item list-group-item-action px-4 d-flex justify-content-between align-items-start';
|
||||
element.innerHTML = `
|
||||
<span class="text-primary me-auto">${name}</span>
|
||||
<span class="text-danger" onclick="removeLocation('${id}'); event.preventDefault();">✕</span>
|
||||
`;
|
||||
container.appendChild(element);
|
||||
}
|
||||
}
|
||||
|
||||
document.saveLocation = (location) => {
|
||||
const locations = JSON.parse(window.localStorage.getItem('locations') || '{}');
|
||||
locations[location.id] = location.name;
|
||||
window.localStorage.setItem('locations', JSON.stringify(locations));
|
||||
}
|
||||
|
||||
document.removeLocation = (id) => {
|
||||
const locations = JSON.parse(window.localStorage.getItem('locations') || '{}');
|
||||
delete locations[id];
|
||||
window.localStorage.setItem('locations', JSON.stringify(locations));
|
||||
document.loadLocations();
|
||||
}
|
||||
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const searchQuery = params.get('query');
|
||||
if (searchQuery) {
|
||||
document.querySelector('#query').value = searchQuery;
|
||||
} else {
|
||||
document.loadLocations();
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -9,24 +9,23 @@
|
||||
type="image/x-icon">
|
||||
{% endblock %}
|
||||
|
||||
{% block header %}
|
||||
{% if response.period == 'day' %}
|
||||
<a class="button {{'disabled' if response.date == datetime.date.today() else ''}}"
|
||||
href="../tag/{{tag_util.create_tag('day', response.date, -1)}}">⬅️</a>
|
||||
<a class="button"
|
||||
href="../tag/days-10">⬆️</a>
|
||||
<span>{{response.location}} | {{response.date.strftime('%a, %d %B %Y')}}</span>
|
||||
<a class="button"
|
||||
href="../tag/{{tag_util.create_tag('day', response.date, 1)}}">➡️</a>
|
||||
{% endif %}
|
||||
{% if response.period == 'days' %}
|
||||
<span>{{response.location}} | {{response.date.strftime('%a, %d %B %Y')}}</span>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div>
|
||||
<table style="margin: auto;">
|
||||
<h4>
|
||||
{% if response.period == 'day' %}
|
||||
<a class="button {{'disabled' if response.date == datetime.date.today() else ''}}"
|
||||
href="../tag/{{tag_util.create_tag('day', response.date, -1)}}">⬅️</a>
|
||||
<a class="button"
|
||||
href="../tag/days-10">⬆️</a>
|
||||
<span>{{response.location}} | {{response.date.strftime('%a, %d %B %Y')}}</span>
|
||||
<a class="button"
|
||||
href="../tag/{{tag_util.create_tag('day', response.date, 1)}}">➡️</a>
|
||||
{% endif %}
|
||||
{% if response.period == 'days' %}
|
||||
<span>{{response.location}} | {{response.date.strftime('%a, %d %B %Y')}}</span>
|
||||
{% endif %}
|
||||
</h4>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-borderless table-compact text-center w-auto" style="font-size: 130%;">
|
||||
<tbody>
|
||||
<!-- date -->
|
||||
<tr>
|
||||
|
||||
@@ -1,5 +1,11 @@
|
||||
from pathlib import Path
|
||||
|
||||
|
||||
class TimeUnit:
|
||||
SECOND = 1
|
||||
MINUTE = 60 * SECOND
|
||||
HOUR = 60 * MINUTE
|
||||
DAY = 24 * HOUR
|
||||
|
||||
|
||||
root_path = Path(__file__).parent.parent
|
||||
|
||||
2
static/.dockerignore
Normal file
2
static/.dockerignore
Normal file
@@ -0,0 +1,2 @@
|
||||
node_modules/
|
||||
dist/
|
||||
1
static/.nvmrc
Normal file
1
static/.nvmrc
Normal file
@@ -0,0 +1 @@
|
||||
24
|
||||
1234
static/package-lock.json
generated
Normal file
1234
static/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
20
static/package.json
Normal file
20
static/package.json
Normal file
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "gallery-static",
|
||||
"version": "0.1.0",
|
||||
"scripts": {
|
||||
"build": "vite build",
|
||||
"dev": "vite build --watch"
|
||||
},
|
||||
"author": "shmyga <shmyga.z@gmail.com>",
|
||||
"license": "ISC",
|
||||
"description": "",
|
||||
"dependencies": {
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"bootstrap": "^5.3.8",
|
||||
"bootstrap-icons": "^1.13.1",
|
||||
"sass": "^1.99.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"vite": "^8.0.9"
|
||||
}
|
||||
}
|
||||
3
static/src/index.ts
Normal file
3
static/src/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
import "./main.scss";
|
||||
import "bootstrap";
|
||||
import "./theme";
|
||||
9
static/src/main.scss
Normal file
9
static/src/main.scss
Normal file
@@ -0,0 +1,9 @@
|
||||
@import "bootstrap/scss/bootstrap";
|
||||
$bootstrap-icons-font-dir: "bootstrap-icons/font/fonts";
|
||||
@import "bootstrap-icons/font/bootstrap-icons";
|
||||
|
||||
.table.table-compact {
|
||||
td {
|
||||
padding: 0.1rem 0.4rem;
|
||||
}
|
||||
}
|
||||
84
static/src/theme.js
Normal file
84
static/src/theme.js
Normal file
@@ -0,0 +1,84 @@
|
||||
/*!
|
||||
* Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
|
||||
* Copyright 2011-2025 The Bootstrap Authors
|
||||
* Licensed under the Creative Commons Attribution 3.0 Unported License.
|
||||
*/
|
||||
|
||||
(() => {
|
||||
"use strict";
|
||||
|
||||
const getStoredTheme = () => localStorage.getItem("theme");
|
||||
const setStoredTheme = (theme) => localStorage.setItem("theme", theme);
|
||||
|
||||
const getPreferredTheme = () => {
|
||||
const storedTheme = getStoredTheme();
|
||||
if (storedTheme) {
|
||||
return storedTheme;
|
||||
}
|
||||
|
||||
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
||||
};
|
||||
|
||||
const setTheme = (theme) => {
|
||||
if (theme === "auto") {
|
||||
document.documentElement.setAttribute(
|
||||
"data-bs-theme",
|
||||
window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light",
|
||||
);
|
||||
} else {
|
||||
document.documentElement.setAttribute("data-bs-theme", theme);
|
||||
}
|
||||
};
|
||||
|
||||
setTheme(getPreferredTheme());
|
||||
|
||||
const showActiveTheme = (theme, focus = false) => {
|
||||
const themeSwitcher = document.querySelector("#bd-theme");
|
||||
|
||||
if (!themeSwitcher) {
|
||||
return;
|
||||
}
|
||||
|
||||
const themeSwitcherText = document.querySelector("#bd-theme-text");
|
||||
const activeThemeIcon = document.querySelector(".theme-icon-active");
|
||||
const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`);
|
||||
const activeThemeIconClass = btnToActive.querySelector("i.bi").className.match(/bi-[\w-]+/)[0];
|
||||
|
||||
document.querySelectorAll("[data-bs-theme-value]").forEach((element) => {
|
||||
element.classList.remove("active");
|
||||
element.setAttribute("aria-pressed", "false");
|
||||
});
|
||||
|
||||
btnToActive.classList.add("active");
|
||||
btnToActive.setAttribute("aria-pressed", "true");
|
||||
const classesToRemove = Array.from(activeThemeIcon.classList).filter((className) => className.startsWith("bi-"));
|
||||
activeThemeIcon.classList.remove(...classesToRemove);
|
||||
activeThemeIcon.classList.add(activeThemeIconClass);
|
||||
const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`;
|
||||
themeSwitcher.setAttribute("aria-label", themeSwitcherLabel);
|
||||
|
||||
if (focus) {
|
||||
themeSwitcher.focus();
|
||||
}
|
||||
};
|
||||
|
||||
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
|
||||
const storedTheme = getStoredTheme();
|
||||
if (storedTheme !== "light" && storedTheme !== "dark") {
|
||||
setTheme(getPreferredTheme());
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener("DOMContentLoaded", () => {
|
||||
showActiveTheme(getPreferredTheme());
|
||||
|
||||
document.querySelectorAll("[data-bs-theme-value]").forEach((toggle) => {
|
||||
toggle.addEventListener("click", () => {
|
||||
const theme = toggle.getAttribute("data-bs-theme-value");
|
||||
setStoredTheme(theme);
|
||||
setTheme(theme);
|
||||
showActiveTheme(theme, true);
|
||||
});
|
||||
});
|
||||
});
|
||||
})();
|
||||
14
static/vite.config.ts
Normal file
14
static/vite.config.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import { defineConfig } from "vite";
|
||||
import packageJson from "./package.json";
|
||||
|
||||
export default defineConfig({
|
||||
base: "./",
|
||||
build: {
|
||||
outDir: "./dist",
|
||||
lib: {
|
||||
entry: "./src/index.ts",
|
||||
name: packageJson.name,
|
||||
fileName: (format) => `${packageJson.name}.js`,
|
||||
},
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user