csmith1865/obscreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 16 Wiki Activity

working fleet mode

Browse Source
This commit is contained in:
jr-k 2024-02-27 13:37:31 +01:00
parent ca444f4c52
commit 51f1f55163
11 changed files with 161 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
data/www/css/main.css
View File

@ -77,7 +77,7 @@ header .logo img {
margin-right: 10px;
}
header menu {
header nav {
display: flex;
flex-direction: row;
justify-content: flex-end;
@ -85,7 +85,7 @@ header menu {
flex: 1;
}
header menu ul {
header nav ul {
list-style: none;
display: flex;
flex-direction: row;
@ -93,18 +93,18 @@ header menu ul {
align-items: center;
}
header menu ul li {
header nav ul li {
margin: 0 15px;
}
header menu ul li a {
header nav ul li a {
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
}
header menu ul li a:hover,
header menu ul li.active a {
header nav ul li a:hover,
header nav ul li.active a {
color: white;
}
@ -127,10 +127,11 @@ header menu ul li.active a {
align-items: center;
}
a.btn,
button {
background-color: #fff;
border-radius: 5px;
border: 1px solid #ffe333;
border: 1px solid #bc48ff;
color: #270035;
padding: 10px 30px;
text-decoration: none;
@ -141,9 +142,15 @@ button {
justify-content: center;
align-items: center;
font-weight: 400;
font-size: 14px;
transition: .2s linear all;
}
a.btn:hover,
button:hover {
color: #bc48ff;
}
button.purple {
font-weight: bold;
border: 1px solid #692fbd;

1
lang/en.json
View File

@ -27,6 +27,7 @@
"fleet_page_title": "Devices",
"fleet_screen_button_add": "Add a screen",
"fleet_screen_button_fleetview": "Fleet view",
"fleet_screen_panel_active": "Active screens",
"fleet_screen_panel_inactive": "Inactive screens",
"fleet_screen_panel_empty": "Currently, there are no screens. %link% now.",

1
lang/fr.json
View File

@ -27,6 +27,7 @@
"fleet_page_title": "Appareils",
"fleet_screen_button_add": "Ajouter un écran",
"fleet_screen_button_fleetview": "Vue flotte",
"fleet_screen_panel_active": "Écrans actifs",
"fleet_screen_panel_inactive": "Écrans inactifs",
"fleet_screen_panel_empty": "Actuellement, il n'y a pas d'écrans. %link% maintenant.",

10
src/controller/FleetController.py
View File

@ -13,6 +13,7 @@ class FleetController:
self.register()
def register(self):
self._app.add_url_rule('/fleet', 'fleet', self.fleet, methods=['GET'])
self._app.add_url_rule('/fleet/screen/list', 'fleet_screen_list', self.fleet_screen_list, methods=['GET'])
self._app.add_url_rule('/fleet/screen/add', 'fleet_screen_add', self.fleet_screen_add, methods=['POST'])
self._app.add_url_rule('/fleet/screen/edit', 'fleet_screen_edit', self.fleet_screen_edit, methods=['POST'])
@ -20,10 +21,17 @@ class FleetController:
self._app.add_url_rule('/fleet/screen/delete', 'fleet_screen_delete', self.fleet_screen_delete, methods=['DELETE'])
self._app.add_url_rule('/fleet/screen/position', 'fleet_screen_position', self.fleet_screen_position, methods=['POST'])
def fleet_screen_list(self):
def fleet(self):
return render_template(
'fleet/fleet.jinja.html',
l=self._l,
screens=self._screen_manager.get_enabled_screens(),
)
def fleet_screen_list(self):
return render_template(
'fleet/list.jinja.html',
l=self._l,
enabled_screens=self._screen_manager.get_enabled_screens(),
disabled_screens=self._screen_manager.get_disabled_screens(),
)

8
src/controller/SlideshowController.py
View File

@ -17,7 +17,7 @@ class SlideshowController:
self.register()
def register(self):
self._app.add_url_rule('/slideshow', 'slideshow', self.slideshow, methods=['GET'])
self._app.add_url_rule('/slideshow', 'slideshow_slide_list', self.slideshow, methods=['GET'])
self._app.add_url_rule('/slideshow/slide/add', 'slideshow_slide_add', self.slideshow_slide_add, methods=['POST'])
self._app.add_url_rule('/slideshow/slide/edit', 'slideshow_slide_edit', self.slideshow_slide_edit, methods=['POST'])
self._app.add_url_rule('/slideshow/slide/toggle', 'slideshow_slide_toggle', self.slideshow_slide_toggle, methods=['POST'])
@ -26,7 +26,7 @@ class SlideshowController:
def slideshow(self):
return render_template(
'slideshow/slideshow.jinja.html',
'slideshow/list.jinja.html',
l=self._l,
enabled_slides=self._slide_manager.get_enabled_slides(),
disabled_slides=self._slide_manager.get_disabled_slides(),
@ -58,11 +58,11 @@ class SlideshowController:
self._slide_manager.add_form(slide)
return redirect(url_for('slideshow'))
return redirect(url_for('slideshow_slide_list'))
def slideshow_slide_edit(self):
self._slide_manager.update_form(request.form['id'], request.form['name'], request.form['duration'])
return redirect(url_for('slideshow'))
return redirect(url_for('slideshow_slide_list'))
def slideshow_slide_toggle(self):
data = request.get_json()

4
src/controller/SysinfoController.py
View File

@ -12,11 +12,11 @@ class SysinfoController:
self.register()
def register(self):
self._app.add_url_rule('/sysinfo', 'sysinfo', self.sysinfo, methods=['GET'])
self._app.add_url_rule('/sysinfo', 'sysinfo_attribute_list', self.sysinfo, methods=['GET'])
def sysinfo(self):
return render_template(
'sysinfo/sysinfo.jinja.html',
'sysinfo/list.jinja.html',
ipaddr=get_ip_address(),
l=self._l,
)

61
views/base.jinja.html
View File

@ -17,38 +17,35 @@
<div class="container">
{% block header %}
<header>
<h1 class="logo">
<img src="{{ STATIC_PREFIX }}img/logo.png" />
Obscreen
</h1>
<menu>
<ul>
<li class="{{ 'active' if request.url_rule.endpoint == 'slideshow' }}">
<a href="{{ url_for('slideshow') }}">
<i class="fa-regular fa-clock"></i> {{ l.slideshow_page_title }}
</a>
</li>
{% if FLEET_MODE %}
<li class="{{ 'active' if request.url_rule.endpoint == 'fleet_screen_list' }}">
<a href="{{ url_for('fleet_screen_list') }}">
<i class="fa fa-tv"></i> {{ l.fleet_page_title }}
</a>
</li>
{% endif %}
{# <li class="{{ 'active' if request.url_rule.endpoint == 'settings' }}">#}
{# <a href="#">#}
{# <i class="fa-solid fa-gear"></i> {{ l.settings_page_title }}#}
{# </a>#}
{# </li>#}
<li class="{{ 'active' if request.url_rule.endpoint == 'sysinfo' }}">
<a href="{{ url_for('sysinfo') }}">
<i class="fa-solid fa-list-check"></i> {{ l.sysinfo_page_title }}
</a>
</li>
</ul>
</menu>
</header>
{% if request.args.get('fleet_mode') != '1' %}
<header>
<h1 class="logo">
<img src="{{ STATIC_PREFIX }}img/logo.png" />
Obscreen
</h1>
<nav>
<ul>
<li class="{{ 'active' if request.url_rule.endpoint == 'slideshow_slide_list' }}">
<a href="{{ url_for('slideshow_slide_list') }}">
<i class="fa-regular fa-clock"></i> {{ l.slideshow_page_title }}
</a>
</li>
{% if FLEET_MODE %}
<li class="{{ 'active' if request.url_rule.endpoint == 'fleet_screen_list' }}">
<a href="{{ url_for('fleet_screen_list') }}">
<i class="fa fa-tv"></i> {{ l.fleet_page_title }}
</a>
</li>
{% endif %}
<li class="{{ 'active' if request.url_rule.endpoint == 'sysinfo_attribute_list' }}">
<a href="{{ url_for('sysinfo_attribute_list') }}">
<i class="fa-solid fa-list-check"></i> {{ l.sysinfo_page_title }}
</a>
</li>
</ul>
</nav>
</header>
{% endif %}
{% endblock %}
{% block page %}

99
views/fleet/fleet.jinja.html
View File

@ -1,52 +1,49 @@
{% extends 'base.jinja.html' %}
{% block page_title %}
{{ l.fleet_page_title }}
{% endblock %}
{% block add_js %}
<script src="{{ STATIC_PREFIX }}js/tablednd-fixed.js"></script>
<script src="{{ STATIC_PREFIX }}js/fleet.js"></script>
{% endblock %}
{% block page %}
<div class="toolbar">
<h2>{{ l.fleet_page_title }}</h2>
<div class="toolbar-actions">
<button class="purple screen-add item-add"><i class="fa fa-plus icon-left"></i>{{ l.fleet_screen_button_add }}</button>
<html>
<head>
<title>Obscreen - Fleet View</title>
<style>
html {margin:0;padding:0;display:flex;flex:1;background: #0f0035;font-family: 'Arial', 'sans-serif'; color: white;}
body {margin:0;padding:0;display:flex;flex:1;flex-direction: column}
ul {list-style:none;margin: 0;padding:0;display: flex;flex-direction: row;border-bottom: 1px solid #0eef5f;}
ul li {flex:1;display: flex;flex-direction: row;justify-content: center;align-items: center;border-right: 1px solid #0eef5f;}
ul li a {flex:1;display: flex;flex-direction: row;justify-content: center;align-items: center;padding: 20px 5px;color:#0eef5f;font-weight: bold;text-decoration: none;}
ul li.active a { background: #0eef5f;color:white; }
main {display: flex;flex:1;}
main .screen-frame {display: flex; flex:1;}
main .screen-frame iframe {display: flex; flex: 1;}
.hidden {display: none !important;}
</style>
</head>
<body>
<ul>
{% for screen in screens %}
<li class="{% if loop.first %}active{% endif %}">
<a href="javascript:void(0);" class="screen-switch" data-id="{{ screen.id }}" onclick="tab('{{ screen.id }}')">
{{ screen.name }}
</a>
</li>
{% endfor %}
</ul>
<main>
{% for screen in screens %}
<div class="screen-frame {% if not loop.first %}hidden{% endif %}" data-id="{{ screen.id }}">
<iframe src="http://{{ screen.host }}:{{ screen.port }}/slideshow?fleet_mode=1" frameborder="0" allowtransparency=""></iframe>
</div>
</div>
<div class="panel">
<div class="panel-body">
<h3>{{ l.fleet_screen_panel_active }}</h3>
{% with tclass='active', screens=enabled_screens %}
{% include 'fleet/component/table.jinja.html' %}
{% endwith %}
</div>
</div>
<div class="panel panel-inactive">
<div class="panel-body">
<h3>{{ l.fleet_screen_panel_inactive }}</h3>
{% with tclass='inactive', screens=disabled_screens %}
{% include 'fleet/component/table.jinja.html' %}
{% endwith %}
</div>
</div>
<div class="modals hidden">
<div class="modals-outer">
<a href="javascript:void(0);" class="modal-close">
<i class="fa fa-close"></i>
</a>
<div class="modals-inner">
{% include 'fleet/modal/add.jinja.html' %}
{% include 'fleet/modal/edit.jinja.html' %}
</div>
</div>
</div>
{% endblock %}
{% endfor %}
</main>
<script type="text/javascript">
const tab = function(id) {
const $switches = document.getElementsByClassName('screen-switch');
const $frames = document.getElementsByClassName('screen-frame');
for (let i = 0; i < $switches.length; i++) {
const $switch = $switches[i];
$switch.parentElement.className = $switch.dataset.id === id ? 'active' : '';
}
for (let j = 0; j < $frames.length; j++) {
const $frame = $frames[j];
$frame.className = $frame.dataset.id === id ? 'screen-frame' : 'screen-frame hidden';
}
};
</script>
</body>
</html>

53
views/fleet/list.jinja.html Normal file
View File

@ -0,0 +1,53 @@
{% extends 'base.jinja.html' %}
{% block page_title %}
{{ l.fleet_page_title }}
{% endblock %}
{% block add_js %}
<script src="{{ STATIC_PREFIX }}js/tablednd-fixed.js"></script>
<script src="{{ STATIC_PREFIX }}js/fleet.js"></script>
{% endblock %}
{% block page %}
<div class="toolbar">
<h2>{{ l.fleet_page_title }}</h2>
<div class="toolbar-actions">
<a class="btn normal" href="{{ url_for('fleet') }}" target="_blank"><i class="fa fa-table icon-left"></i>{{ l.fleet_screen_button_fleetview }}</a>
<button class="purple screen-add item-add"><i class="fa fa-plus icon-left"></i>{{ l.fleet_screen_button_add }}</button>
</div>
</div>
<div class="panel">
<div class="panel-body">
<h3>{{ l.fleet_screen_panel_active }}</h3>
{% with tclass='active', screens=enabled_screens %}
{% include 'fleet/component/table.jinja.html' %}
{% endwith %}
</div>
</div>
<div class="panel panel-inactive">
<div class="panel-body">
<h3>{{ l.fleet_screen_panel_inactive }}</h3>
{% with tclass='inactive', screens=disabled_screens %}
{% include 'fleet/component/table.jinja.html' %}
{% endwith %}
</div>
</div>
<div class="modals hidden">
<div class="modals-outer">
<a href="javascript:void(0);" class="modal-close">
<i class="fa fa-close"></i>
</a>
<div class="modals-inner">
{% include 'fleet/modal/add.jinja.html' %}
{% include 'fleet/modal/edit.jinja.html' %}
</div>
</div>
</div>
{% endblock %}

0
views/slideshow/slideshow.jinja.html → views/slideshow/list.jinja.html
View File

0
views/sysinfo/sysinfo.jinja.html → views/sysinfo/list.jinja.html
View File