forked from mirrors/thatmattlove-hyperglass
rework of front end
This commit is contained in:
checktheroads
parent
b901955964
commit
2c9cd88326
15 changed files with 332 additions and 268 deletions
BIN
.flask_cache/2029240f6d1128be89ddc32729463129
Normal file
BIN
.flask_cache/2029240f6d1128be89ddc32729463129
Normal file
Binary file not shown.
BIN
.flask_cache/49c1419bef5213bdee92277928c7c241
Normal file
BIN
.flask_cache/49c1419bef5213bdee92277928c7c241
Normal file
Binary file not shown.
BIN
.flask_cache/74bc75c0764cbc805c70645cef1f026b
Normal file
BIN
.flask_cache/74bc75c0764cbc805c70645cef1f026b
Normal file
Binary file not shown.
BIN
.flask_cache/c59a0149864f3a0ccffa8e150c81bc43
Normal file
BIN
.flask_cache/c59a0149864f3a0ccffa8e150c81bc43
Normal file
Binary file not shown.
|
|
@ -298,13 +298,13 @@ class brand:
|
||||||
else:
|
else:
|
||||||
return t["color_progressbar"]
|
return t["color_progressbar"]
|
||||||
|
|
||||||
def color_hero():
|
def color_bg():
|
||||||
list = []
|
list = []
|
||||||
for t in branding:
|
for t in branding:
|
||||||
if len(t["color_hero"]) == 0:
|
if len(t["color_bg"]) == 0:
|
||||||
return "#fbfffe"
|
return "#fbfffe"
|
||||||
else:
|
else:
|
||||||
return t["color_hero"]
|
return t["color_bg"]
|
||||||
|
|
||||||
def logo_path():
|
def logo_path():
|
||||||
list = []
|
list = []
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,6 @@ env = jinja2.Environment(loader=file_loader)
|
||||||
|
|
||||||
# Converts templates/footer.md from Markdown to HTML
|
# Converts templates/footer.md from Markdown to HTML
|
||||||
md = Markdown()
|
md = Markdown()
|
||||||
# footer_file = os.path.join(dir, "templates/footer.md")
|
|
||||||
footer_template = env.get_template("templates/footer.md")
|
footer_template = env.get_template("templates/footer.md")
|
||||||
footer_jinja = footer_template.render(title=configuration.brand.title())
|
footer_jinja = footer_template.render(title=configuration.brand.title())
|
||||||
footer = footer_jinja
|
footer = footer_jinja
|
||||||
|
|
@ -53,7 +52,13 @@ class html:
|
||||||
title=configuration.brand.title(),
|
title=configuration.brand.title(),
|
||||||
subtitle=configuration.brand.subtitle(),
|
subtitle=configuration.brand.subtitle(),
|
||||||
title_mode=configuration.brand.title_mode(),
|
title_mode=configuration.brand.title_mode(),
|
||||||
color_hero=configuration.brand.color_hero(),
|
color_bg=configuration.brand.color_bg(),
|
||||||
|
color_btn_submit=configuration.brand.color_btn_submit(),
|
||||||
|
color_progressbar=configuration.brand.color_progressbar(),
|
||||||
|
color_tag_loctitle=configuration.brand.color_tag_loctitle(),
|
||||||
|
color_tag_cmdtitle=configuration.brand.color_tag_cmdtitle(),
|
||||||
|
color_tag_cmd=configuration.brand.color_tag_cmd(),
|
||||||
|
color_tag_loc=configuration.brand.color_tag_loc(),
|
||||||
enable_credit=configuration.brand.enable_credit(),
|
enable_credit=configuration.brand.enable_credit(),
|
||||||
enable_footer=configuration.brand.enable_footer(),
|
enable_footer=configuration.brand.enable_footer(),
|
||||||
footer_content=md.convert(footer),
|
footer_content=md.convert(footer),
|
||||||
|
|
@ -94,7 +99,7 @@ class css:
|
||||||
color_tag_cmdtitle=configuration.brand.color_tag_cmdtitle(),
|
color_tag_cmdtitle=configuration.brand.color_tag_cmdtitle(),
|
||||||
color_tag_cmd=configuration.brand.color_tag_cmd(),
|
color_tag_cmd=configuration.brand.color_tag_cmd(),
|
||||||
color_tag_loc=configuration.brand.color_tag_loc(),
|
color_tag_loc=configuration.brand.color_tag_loc(),
|
||||||
color_hero=configuration.brand.color_hero(),
|
color_bg=configuration.brand.color_bg(),
|
||||||
primary_font_url=configuration.brand.primary_font_url(),
|
primary_font_url=configuration.brand.primary_font_url(),
|
||||||
primary_font_name=configuration.brand.primary_font_name(),
|
primary_font_name=configuration.brand.primary_font_name(),
|
||||||
mono_font_url=configuration.brand.mono_font_url(),
|
mono_font_url=configuration.brand.mono_font_url(),
|
||||||
|
|
@ -112,4 +117,4 @@ class css:
|
||||||
logger.info("Rendered Sass templates to CSS files.")
|
logger.info("Rendered Sass templates to CSS files.")
|
||||||
except:
|
except:
|
||||||
logger.error("Error rendering Sass template.")
|
logger.error("Error rendering Sass template.")
|
||||||
raise TypeError("Error rendering Sass template.")
|
raise
|
||||||
|
|
|
||||||
|
|
@ -1,29 +1,26 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
<head>
|
<head>
|
||||||
{% block head %}
|
{% block head %}
|
||||||
<title>{{ site_title }}</title>
|
<title>{{ site_title }}</title>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="static/images/favicon/apple-touch-icon.png">
|
<link rel="apple-touch-icon" sizes="180x180" href="static/images/favicon/apple-touch-icon.png">
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="static/images/favicon/favicon-32x32.png">
|
<link rel="icon" type="image/png" sizes="32x32" href="static/images/favicon/favicon-32x32.png">
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="static/images/favicon/favicon-16x16.png">
|
<link rel="icon" type="image/png" sizes="16x16" href="static/images/favicon/favicon-16x16.png">
|
||||||
<link rel="manifest" href="static/images/favicon/site.webmanifest">
|
<link rel="manifest" href="static/images/favicon/site.webmanifest">
|
||||||
<link rel="mask-icon" href="static/images/favicon/safari-pinned-tab.svg" color="#ff5e5b">
|
<link rel="mask-icon" href="static/images/favicon/safari-pinned-tab.svg" color="{{ color_tag_cmd }}">
|
||||||
<link rel="shortcut icon" href="static/images/favicon/favicon.ico">
|
<link rel="shortcut icon" href="static/images/favicon/favicon.ico">
|
||||||
<meta name="msapplication-TileColor" content="#330036">
|
<meta name="msapplication-TileColor" content="{{ color_tag_loctitle }}">
|
||||||
<meta name="msapplication-config" content="static/images/favicon/browserconfig.xml">
|
<meta name="msapplication-config" content="static/images/favicon/browserconfig.xml">
|
||||||
<meta name="theme-color" content="#330036">
|
<meta name="theme-color" content="{{ color_btn_submit }}">
|
||||||
<link href="static/css/icofont/icofont.min.css" rel="stylesheet" />
|
<link href="static/css/icofont/icofont.min.css" rel="stylesheet" />
|
||||||
<link href="static/css/hyperglass.css" rel="stylesheet" />
|
<link href="static/css/hyperglass.css" rel="stylesheet" />
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
{% block content %}{% endblock %}
|
{% block content %}{% endblock %}
|
||||||
{% if enable_footer == true and enable_credit == true %}
|
|
||||||
<br>
|
|
||||||
{% endif %}
|
|
||||||
</body>
|
</body>
|
||||||
{% block scripts %}
|
{% block scripts %}
|
||||||
<script src="static/js/jquery-3.4.0.min.js"></script>
|
<script src="static/js/jquery-3.4.0.min.js"></script>
|
||||||
|
|
|
||||||
1
hyperglass/render/templates/credit.html
Normal file
1
hyperglass/render/templates/credit.html
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<p>Powered by <a href="https://github.com/checktheroads/hyperglass">Hyperglass</a>. Source code licensed <a href="https://github.com/checktheroads/hyperglass/blob/master/LICENSE">BSD 3-Clause Clear.</a</p>
|
||||||
|
|
@ -1,30 +1,12 @@
|
||||||
<div class="hero-foot lg-hero-bg">
|
<footer class="footer">
|
||||||
<div class="columns">
|
<div class="container">
|
||||||
<div class="column is-1"></div>
|
<div class="content is-small has-text-centered">
|
||||||
<div class="column">
|
{{ footer_content }}
|
||||||
<div class="content is-small has-text-justified">
|
|
||||||
{{ footer_content }}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
{% if enable_credit == true %}
|
{% if enable_credit == true %}
|
||||||
<div class="column is-1"></div>
|
<div class="content is-small has-text-centered">
|
||||||
<div class="column is-1">
|
{% include "templates/credit.html" %}
|
||||||
<div class="dropdown is-up is-right is-hoverable">
|
|
||||||
<div class="dropdown-trigger">
|
|
||||||
<span class="icon has-text is-size-5 lg-icon-help">
|
|
||||||
<i class="icofont-info-circle" aria-hidden="true"></i>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="dropdown-menu is-expanded" id="dropdown-menu2" role="menu">
|
|
||||||
<div class="dropdown-content">
|
|
||||||
<div class="dropdown-item">
|
|
||||||
<p class="is-small has-icons">
|
|
||||||
<strong>Powered by <a href="https://github.com/checktheroads/hyperglass">hyperglass</a></strong>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="column is-1"></div>
|
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
</div>
|
||||||
|
</footer>
|
||||||
|
{% endif %}
|
||||||
|
|
|
||||||
|
|
@ -7,15 +7,21 @@
|
||||||
$family-sans-serif: "{{ primary_font_name }}", sans-serif;
|
$family-sans-serif: "{{ primary_font_name }}", sans-serif;
|
||||||
$family-monospace: "{{ mono_font_name }}", monospace;
|
$family-monospace: "{{ mono_font_name }}", monospace;
|
||||||
|
|
||||||
|
/* Color Changes */
|
||||||
|
$body-background-color: {{ color_bg }};
|
||||||
|
$footer-background-color: $body-background-color;
|
||||||
|
|
||||||
/* Custom Colors */
|
/* Custom Colors */
|
||||||
$lg-btn-submit: {{ color_btn_submit }};
|
$lg-btn-submit: {{ color_btn_submit }};
|
||||||
$lg-tag-loctitle: {{ color_tag_loctitle }};
|
$lg-tag-loctitle: {{ color_tag_loctitle }};
|
||||||
$lg-tag-cmdtitle: {{ color_tag_cmdtitle }};
|
$lg-tag-cmdtitle: {{ color_tag_cmdtitle }};
|
||||||
$lg-tag-cmd: {{ color_tag_cmd }};
|
$lg-tag-cmd: {{ color_tag_cmd }};
|
||||||
$lg-hero-bg: {{ color_hero }};
|
|
||||||
$lg-progressbar: {{ color_progressbar }};
|
$lg-progressbar: {{ color_progressbar }};
|
||||||
$lg-tag-loc: {{ color_tag_loc }};
|
$lg-tag-loc: {{ color_tag_loc }};
|
||||||
|
|
||||||
|
/* Element Changes */
|
||||||
|
$footer-padding: 3rem 1.5rem 3rem ;
|
||||||
|
|
||||||
/*! bulma.io v0.7.4 | MIT License | github.com/jgthms/bulma */
|
/*! bulma.io v0.7.4 | MIT License | github.com/jgthms/bulma */
|
||||||
@import "utilities/_all";
|
@import "utilities/_all";
|
||||||
@import "base/_all";
|
@import "base/_all";
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
{% block content %}
|
{% block content %}
|
||||||
{% if modal_active %}
|
{% if modal_active %}
|
||||||
<div class="modal is-active" id="ratelimit">
|
<div class="modal is-active" id="ratelimit">
|
||||||
{% else %}
|
{% else %}
|
||||||
|
|
@ -27,206 +27,210 @@
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<section class="hero lg-hero-bg is-fullheight is-clipped">
|
<nav class="navbar">
|
||||||
<div class="hero-head">
|
<div class="container is-fluid">
|
||||||
<nav class="navbar">
|
<div class="navbar-brand">
|
||||||
<div class="container">
|
</div>
|
||||||
<div class="navbar-brand">
|
{% if show_peeringdb == true %}
|
||||||
</div>
|
<div class="navbar-menu">
|
||||||
{% if show_peeringdb == true %}
|
<div class="navbar-end">
|
||||||
<div id="navbarMenuHero" class="navbar-menu">
|
<a class="navbar-item" href="https://as{{ primary_asn }}.peeringdb.com">
|
||||||
<div class="navbar-end">
|
<span>PeeringDB</span>
|
||||||
<a class="navbar-item" href="https://as{{ primary_asn }}.peeringdb.com">
|
<span class="icon">
|
||||||
<span>PeeringDB</span>
|
<i class="icofont-external"></i>
|
||||||
<span class="icon">
|
</span>
|
||||||
<i class="icofont-external"></i>
|
</a>
|
||||||
</span>
|
</span>
|
||||||
</a>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</div>
|
||||||
<div class="container has-text-centered">
|
{% endif %}
|
||||||
{% if title_mode == 'both' %}
|
</div>
|
||||||
<img src="{{ logo_path }}" style="width: {{ logo_width }}px;">
|
</nav>
|
||||||
<h1 class="title is-3">
|
<section class="section">
|
||||||
{{ title }}
|
<div class="container has-text-centered is-fluid">
|
||||||
</h1>
|
{% if title_mode == 'all' %}
|
||||||
<h2 class="subtitle is-5">
|
<img src="{{ logo_path }}" style="width: {{ logo_width }}px;">
|
||||||
{{ subtitle }}
|
<h1 class="title is-3" id="lg-title">
|
||||||
</h2>
|
{{ title }}
|
||||||
<br>
|
</h1>
|
||||||
{% elif title_mode == 'hide_subtitle' %}
|
<h2 class="subtitle is-5" id="lg-subtitle">
|
||||||
<img src="{{ logo_path }}" style="width: {{ logo_width }}px;">
|
{{ subtitle }}
|
||||||
<h1 class="title is-3">
|
</h2>
|
||||||
{{ title }}
|
<br>
|
||||||
</h1>
|
{% elif title_mode == 'text_only' %}
|
||||||
{% elif title_mode == 'logo_only' %}
|
<h1 class="title is-1" id="lg-title">
|
||||||
<br>
|
{{ title }}
|
||||||
<br>
|
</h1>
|
||||||
<br>
|
<h2 class="subtitle is-3" id="lg-subtitle">
|
||||||
<img src="{{ logo_path }}" style="width: {{ logo_width }}px;">
|
{{ subtitle }}
|
||||||
<br>
|
</h2>
|
||||||
<br>
|
<br>
|
||||||
{% endif %}
|
{% elif title_mode == 'logo_title' %}
|
||||||
<br>
|
<img src="{{ logo_path }}" style="width: {{ logo_width }}px;">
|
||||||
<form onsubmit="return false" name="queryform" id="lgForm" action="?" method="POST">
|
<h1 class="title is-3">
|
||||||
<div class="container">
|
{{ title }}
|
||||||
<div class="field has-addons has-addons-centered">
|
</h1>
|
||||||
<div class="control has-icons-left is-expanded">
|
{% elif title_mode == 'logo_only' %}
|
||||||
<input type="text" class="input is-medium is-rounded" id="ipprefix" placeholder="{{ placeholder_prefix }}">
|
<br>
|
||||||
<span class="icon is-small is-left"><i class="icofont-at"></i></span>
|
<br>
|
||||||
</div>
|
<br>
|
||||||
|
<img src="{{ logo_path }}" style="width: {{ logo_width }}px;">
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
{% endif %}
|
||||||
|
<br>
|
||||||
|
<form onsubmit="return false" name="queryform" id="lgForm" action="?" method="POST">
|
||||||
|
<div class="container is-fluid">
|
||||||
|
<div class="field has-addons has-addons-centered">
|
||||||
|
<div class="control has-icons-left is-expanded">
|
||||||
|
<input type="text" class="input is-medium is-rounded is-family-monospace" id="ipprefix" placeholder="{{ placeholder_prefix }}">
|
||||||
|
<span class="icon is-small is-left"><i class="icofont-at"></i></span>
|
||||||
</div>
|
</div>
|
||||||
<br>
|
|
||||||
<div class="field has-addons has-addons-centered">
|
|
||||||
<div class="control has-icons-left">
|
|
||||||
<div class="select is-medium is-rounded">
|
|
||||||
<select id="network" name="network">
|
|
||||||
<!-- <option value="" disabled></option> -->
|
|
||||||
{% for net in device_networks %}
|
|
||||||
<option value="{{ net }}">AS{{ net }}</option>
|
|
||||||
{% endfor %}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<span class="icon is-left"><i class="icofont-cloudapp"></i></span>
|
|
||||||
</div>
|
|
||||||
<div class="control has-icons-left">
|
|
||||||
<div class="select is-medium is-rounded">
|
|
||||||
<select id="router">
|
|
||||||
<option id="text_location" selected disabled>{{ text_location }}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<span class="icon is-left"><i class="icofont-globe"></i></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="container">
|
<br>
|
||||||
<div class="field has-addons has-addons-centered is-grouped-centered">
|
<div class="field has-addons has-addons-centered">
|
||||||
<div class="control">
|
<div class="control has-icons-left">
|
||||||
<div class="dropdown is-right is-hoverable">
|
<div class="select is-medium is-rounded">
|
||||||
<div class="dropdown-trigger">
|
<select id="network" name="network">
|
||||||
<button class="button is-rounded is-medium" aria-haspopup="true" aria-controls="dropdown-menu2">
|
<!-- <option value="" disabled></option> -->
|
||||||
<span class="icon is-size-7 lg-icon-help">
|
{% for net in device_networks %}
|
||||||
<i class="icofont-question" aria-hidden="true"></i>
|
<option value="{{ net }}">AS{{ net }}</option>
|
||||||
</span>
|
{% endfor %}
|
||||||
</button>
|
</select>
|
||||||
</div>
|
|
||||||
<div class="dropdown-menu is-expanded" id="dropdown-menu2" role="menu">
|
|
||||||
<div class="dropdown-content lg-help">
|
|
||||||
{% if enable_bgp_route == true %}
|
|
||||||
<div class="dropdown-item">
|
|
||||||
<strong>BGP Route</strong>
|
|
||||||
<p>{{ text_help_bgp_route }}</p>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
{% if enable_bgp_community == true %}
|
|
||||||
<div class="dropdown-item">
|
|
||||||
<strong>BGP Community</strong>
|
|
||||||
<p>{{ text_help_bgp_community }}</p>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
{% if enable_bgp_aspath == true %}
|
|
||||||
<div class="dropdown-item">
|
|
||||||
<strong>BGP AS Path</strong>
|
|
||||||
<p>{{ text_help_bgp_aspath }}</p>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
{% if enable_ping == true %}
|
|
||||||
<div class="dropdown-item">
|
|
||||||
<strong>Ping</strong>
|
|
||||||
<p>{{ text_help_ping }}</p>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
{% if enable_traceroute == true %}
|
|
||||||
<div class="dropdown-item">
|
|
||||||
<strong>Traceroute</strong>
|
|
||||||
<p>{{ text_help_traceroute }}</p>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="control">
|
<span class="icon is-left"><i class="icofont-cloudapp"></i></span>
|
||||||
<div class="select is-medium is-rounded">
|
</div>
|
||||||
<select id="cmd">
|
<div class="control has-icons-left">
|
||||||
<option selected disabled>
|
<div class="select is-medium is-rounded">
|
||||||
Query Type
|
<select id="router">
|
||||||
</option>
|
<option id="text_location" selected disabled>{{ text_location }}</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<span class="icon is-left"><i class="icofont-location-arrow"></i></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
</div>
|
||||||
|
<div class="container is-fluid">
|
||||||
|
<div class="field has-addons has-addons-centered is-grouped-centered">
|
||||||
|
<div class="control">
|
||||||
|
<div class="dropdown is-right" id="help-dropdown">
|
||||||
|
<div class="dropdown-trigger">
|
||||||
|
<button class="button is-rounded is-medium" aria-haspopup="true" aria-controls="dropdown-menu2" onclick="adjustHeight()">
|
||||||
|
<span class="icon is-size-7 lg-icon-help">
|
||||||
|
<i class="icofont-question" aria-hidden="true"></i>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="dropdown-menu is-expanded" id="dropdown-menu2" role="menu">
|
||||||
|
<div class="dropdown-content lg-help">
|
||||||
{% if enable_bgp_route == true %}
|
{% if enable_bgp_route == true %}
|
||||||
<option name="cmd" id="cmd_bgp_route" value="bgp_route">
|
<div class="dropdown-item">
|
||||||
BGP Route
|
<strong>BGP Route</strong>
|
||||||
</option>
|
<p>{{ text_help_bgp_route }}</p>
|
||||||
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if enable_bgp_community == true %}
|
{% if enable_bgp_community == true %}
|
||||||
<option name="cmd" id="cmd_bgp_community" value="bgp_community">
|
<div class="dropdown-item">
|
||||||
BGP Community
|
<strong>BGP Community</strong>
|
||||||
</option>
|
<p>{{ text_help_bgp_community }}</p>
|
||||||
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if enable_bgp_aspath == true %}
|
{% if enable_bgp_aspath == true %}
|
||||||
<option name="cmd" id="cmd_bgp_aspath" value="bgp_aspath">
|
<div class="dropdown-item">
|
||||||
BGP AS Path
|
<strong>BGP AS Path</strong>
|
||||||
</option>
|
<p>{{ text_help_bgp_aspath }}</p>
|
||||||
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if enable_ping == true %}
|
{% if enable_ping == true %}
|
||||||
<option name="cmd" id="cmd_ping" value="ping">
|
<div class="dropdown-item">
|
||||||
Ping
|
<strong>Ping</strong>
|
||||||
</option>
|
<p>{{ text_help_ping }}</p>
|
||||||
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if enable_traceroute == true %}
|
{% if enable_traceroute == true %}
|
||||||
<option name="cmd" id="cmd_traceroute" value="traceroute">
|
<div class="dropdown-item">
|
||||||
Traceroute
|
<strong>Traceroute</strong>
|
||||||
</option>
|
<p>{{ text_help_traceroute }}</p>
|
||||||
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</select>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="control">
|
</div>
|
||||||
<button class="button lg-btn-submit is-medium is-rounded" type="submit" name="cmd">
|
<div class="control">
|
||||||
<span class="icon">
|
<div class="select is-medium is-rounded">
|
||||||
<i class="icofont-search-1"></i>
|
<select id="cmd">
|
||||||
</span>
|
<option selected disabled>
|
||||||
</button>
|
Query Type
|
||||||
|
</option>
|
||||||
|
{% if enable_bgp_route == true %}
|
||||||
|
<option name="cmd" id="cmd_bgp_route" value="bgp_route">
|
||||||
|
BGP Route
|
||||||
|
</option>
|
||||||
|
{% endif %}
|
||||||
|
{% if enable_bgp_community == true %}
|
||||||
|
<option name="cmd" id="cmd_bgp_community" value="bgp_community">
|
||||||
|
BGP Community
|
||||||
|
</option>
|
||||||
|
{% endif %}
|
||||||
|
{% if enable_bgp_aspath == true %}
|
||||||
|
<option name="cmd" id="cmd_bgp_aspath" value="bgp_aspath">
|
||||||
|
BGP AS Path
|
||||||
|
</option>
|
||||||
|
{% endif %}
|
||||||
|
{% if enable_ping == true %}
|
||||||
|
<option name="cmd" id="cmd_ping" value="ping">
|
||||||
|
Ping
|
||||||
|
</option>
|
||||||
|
{% endif %}
|
||||||
|
{% if enable_traceroute == true %}
|
||||||
|
<option name="cmd" id="cmd_traceroute" value="traceroute">
|
||||||
|
Traceroute
|
||||||
|
</option>
|
||||||
|
{% endif %}
|
||||||
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="control">
|
||||||
<div class="columns is-centered">
|
<button class="button lg-btn-submit is-medium is-rounded" type="submit" name="cmd">
|
||||||
<div class="column is-one-third" id="ipprefix_error">
|
<span class="icon">
|
||||||
</div>
|
<i class="icofont-search-1"></i>
|
||||||
</div>
|
</span>
|
||||||
</div>
|
</button>
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
<div class="hero-body">
|
|
||||||
<div class="container" id="resultsbox">
|
|
||||||
<div class="tile is-ancestor">
|
|
||||||
<div class="tile is-12 is-parent">
|
|
||||||
<div class="tile is-child box">
|
|
||||||
<p class="title" id="results">{{ text_results }}</p>
|
|
||||||
<p id="queryInfo">
|
|
||||||
</p>
|
|
||||||
<p id="progress">
|
|
||||||
<br>
|
|
||||||
<progress class="progress is-medium lg-progressbar" max="100">50%</progress>
|
|
||||||
</p>
|
|
||||||
<div id="output">
|
|
||||||
</div>
|
|
||||||
<hr>
|
|
||||||
<p class="is-size-7">{{ text_cache }}</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="columns is-centered">
|
||||||
|
<div class="column is-one-third" id="ipprefix_error">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
<section class="section">
|
||||||
|
<div class="container is-fluid">
|
||||||
|
<div class="box" id="resultsbox">
|
||||||
|
<p class="title" id="results">{{ text_results }}</p>
|
||||||
|
<p id="queryInfo">
|
||||||
|
</p>
|
||||||
|
<p id="progress">
|
||||||
|
<br>
|
||||||
|
<progress class="progress is-medium lg-progressbar" max="100">50%</progress>
|
||||||
|
</p>
|
||||||
|
<br>
|
||||||
|
<p class="query-output" id="output">
|
||||||
|
</p>
|
||||||
|
<hr>
|
||||||
|
<p class="is-size-7">{{ text_cache }}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% if enable_footer == true %}
|
|
||||||
{% include "templates/footer.html" %}
|
|
||||||
{% endif %}
|
|
||||||
</section>
|
</section>
|
||||||
{% endblock %}
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
{% if enable_footer == true %}
|
||||||
|
{% include "templates/footer.html" %}
|
||||||
|
{% endif %}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,9 @@
|
||||||
/* Fonts */
|
/* Fonts */
|
||||||
@import url("https://fonts.googleapis.com/css?family=Nunito:400,600,700");
|
@import url("https://fonts.googleapis.com/css?family=Nunito:400,600,700");
|
||||||
@import url("https://fonts.googleapis.com/css?family=Fira+Mono");
|
@import url("https://fonts.googleapis.com/css?family=Fira+Mono");
|
||||||
|
/* Color Changes */
|
||||||
/* Custom Colors */
|
/* Custom Colors */
|
||||||
|
/* Element Changes */
|
||||||
/*! bulma.io v0.7.4 | MIT License | github.com/jgthms/bulma */
|
/*! bulma.io v0.7.4 | MIT License | github.com/jgthms/bulma */
|
||||||
@keyframes spinAround {
|
@keyframes spinAround {
|
||||||
from {
|
from {
|
||||||
|
|
@ -275,7 +277,7 @@ th {
|
||||||
text-align: left; }
|
text-align: left; }
|
||||||
|
|
||||||
html {
|
html {
|
||||||
background-color: white;
|
background-color: #fbfffe;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
|
|
@ -6927,27 +6929,32 @@ label.panel-block {
|
||||||
padding: 18rem 1.5rem; } }
|
padding: 18rem 1.5rem; } }
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
background-color: #fafafa;
|
background-color: #fbfffe;
|
||||||
padding: 3rem 1.5rem 6rem; }
|
padding: 3rem 1.5rem 3rem; }
|
||||||
|
|
||||||
/* Looking Glass Imports */
|
/* Looking Glass Imports */
|
||||||
.hero.lg-hero-bg {
|
.footer {
|
||||||
background-color: #fbfffe;
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
bottom: 0;
|
||||||
|
overflow: hidden; }
|
||||||
|
|
||||||
|
#lg-title, #lg-subtitle {
|
||||||
color: rgba(0, 0, 0, 0.7); }
|
color: rgba(0, 0, 0, 0.7); }
|
||||||
|
|
||||||
.hero-foot.lg-hero-bg {
|
.is-danger #lg-title, .is-danger #lg-subtitle {
|
||||||
background-color: #fbfffe;
|
|
||||||
color: rgba(0, 0, 0, 0.7); }
|
|
||||||
|
|
||||||
.hero.lg-hero-bg .title, .subtitle {
|
|
||||||
color: rgba(0, 0, 0, 0.7); }
|
|
||||||
|
|
||||||
.hero.is-danger .title, .subtitle {
|
|
||||||
color: #fff; }
|
color: #fff; }
|
||||||
|
|
||||||
.hero.lg-hero-bg .navbar-item {
|
.navbar-menu, .navbar-brand, .navbar-tabs {
|
||||||
|
background-color: #fbfffe; }
|
||||||
|
|
||||||
|
.navbar-item {
|
||||||
color: rgba(0, 0, 0, 0.7); }
|
color: rgba(0, 0, 0, 0.7); }
|
||||||
|
|
||||||
|
a.navbar-item:hover {
|
||||||
|
color: #40798c;
|
||||||
|
background-color: transparent; }
|
||||||
|
|
||||||
.button.lg-btn-submit {
|
.button.lg-btn-submit {
|
||||||
background-color: #40798c;
|
background-color: #40798c;
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
|
|
@ -6979,13 +6986,29 @@ label.panel-block {
|
||||||
|
|
||||||
.query-output {
|
.query-output {
|
||||||
font-family: "Fira Mono", monospace;
|
font-family: "Fira Mono", monospace;
|
||||||
font-size: 0.875em;
|
font-size: 0.95em;
|
||||||
|
width: 100%;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
white-space: pre;
|
white-space: pre; }
|
||||||
word-wrap: normal; }
|
|
||||||
|
|
||||||
.dropdown-content.lg-help {
|
.dropdown-content.lg-help {
|
||||||
width: 24rem; }
|
width: 24rem; }
|
||||||
|
|
||||||
|
.dropdown-content.lg-help-mobile {
|
||||||
|
width: 20rem; }
|
||||||
|
|
||||||
.icon.lg-icon-help {
|
.icon.lg-icon-help {
|
||||||
color: #40798c; }
|
color: #40798c; }
|
||||||
|
|
||||||
|
#ipprefix::-webkit-input-placeholder {
|
||||||
|
font-family: "Nunito", sans-serif; }
|
||||||
|
|
||||||
|
#ipprefix:-ms-input-placeholder {
|
||||||
|
font-family: "Nunito", sans-serif; }
|
||||||
|
|
||||||
|
#ipprefix:-moz-placeholder {
|
||||||
|
font-family: "Nunito", sans-serif; }
|
||||||
|
|
||||||
|
#ipprefix::-moz-placeholder {
|
||||||
|
font-family: "Nunito", sans-serif; }
|
||||||
|
|
|
||||||
|
|
@ -5,18 +5,34 @@ var resultsbox = ($('#resultsbox'));
|
||||||
resultsbox.hide();
|
resultsbox.hide();
|
||||||
progress.hide();
|
progress.hide();
|
||||||
|
|
||||||
$( document ).ready(function(){
|
// Bulma Toggable Dropdown - help text
|
||||||
var defaultasn = $ ( "#network" ).val();
|
let dropdown = document.querySelector('#help-dropdown');
|
||||||
|
dropdown.addEventListener('click', function(event) {
|
||||||
|
event.stopPropagation();
|
||||||
|
dropdown.classList.toggle('is-active');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Adjust behavior of help text dropdown based on device screen size
|
||||||
|
function adjustHeight() {
|
||||||
|
var actual_width = window.innerWidth;
|
||||||
|
if (actual_width < 1024) {
|
||||||
|
$('#help-dropdown').removeClass('is-right');
|
||||||
|
$('.lg-help').addClass('lg-help-mobile').removeClass('lg-help');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$(document).ready(function() {
|
||||||
|
var defaultasn = $("#network").val();
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url: `/routers/${defaultasn}`,
|
url: `/routers/${defaultasn}`,
|
||||||
context: document.body,
|
context: document.body,
|
||||||
type: 'get',
|
type: 'get',
|
||||||
success: function (data) {
|
success: function(data) {
|
||||||
selectedRouters = JSON.parse(data)
|
selectedRouters = JSON.parse(data)
|
||||||
console.log(selectedRouters)
|
console.log(selectedRouters)
|
||||||
updateRouters(selectedRouters);
|
updateRouters(selectedRouters);
|
||||||
},
|
},
|
||||||
error: function (err) {
|
error: function(err) {
|
||||||
console.log(err)
|
console.log(err)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
@ -28,24 +44,24 @@ $('#network').on('change', () => {
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url: `/routers/${asn}`,
|
url: `/routers/${asn}`,
|
||||||
type: 'get',
|
type: 'get',
|
||||||
success: function (data) {
|
success: function(data) {
|
||||||
updateRouters(JSON.parse(data));
|
updateRouters(JSON.parse(data));
|
||||||
|
|
||||||
},
|
},
|
||||||
error: function (err) {
|
error: function(err) {
|
||||||
console.log(err)
|
console.log(err)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
function updateRouters (routers) {
|
function updateRouters(routers) {
|
||||||
routers.forEach(function (r) {
|
routers.forEach(function(r) {
|
||||||
$('#router').append($("<option>").attr('value', r.location).attr('type', r.type).text(r.location))
|
$('#router').append($("<option>").attr('value', r.location).attr('type', r.type).text(r.location))
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// Submit Form Action
|
// Submit Form Action
|
||||||
$('#lgForm').on('submit', function () {
|
$('#lgForm').on('submit', function() {
|
||||||
|
|
||||||
// Regex to match any IPv4 host address or CIDR prefix
|
// Regex to match any IPv4 host address or CIDR prefix
|
||||||
var ipv4_any = new RegExp('^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(/(3[0-2]|2[0-9]|1[0-9]|[0-9]))?$');
|
var ipv4_any = new RegExp('^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(/(3[0-2]|2[0-9]|1[0-9]|[0-9]))?$');
|
||||||
|
|
@ -100,7 +116,7 @@ $('#lgForm').on('submit', function () {
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
`);
|
`);
|
||||||
}
|
}
|
||||||
// If traceroute, and lookup is an IPv4 address *with* CIDR prefix (e.g. 192.0.2.0/24, NOT 192.0.2.1), show an error.
|
// If traceroute, and lookup is an IPv4 address *with* CIDR prefix (e.g. 192.0.2.0/24, NOT 192.0.2.1), show an error.
|
||||||
else if (ipv4_cidr.test(ipprefix) == true && cmd == 'traceroute') {
|
else if (ipv4_cidr.test(ipprefix) == true && cmd == 'traceroute') {
|
||||||
$('#ipprefix_error').show()
|
$('#ipprefix_error').show()
|
||||||
|
|
@ -116,7 +132,7 @@ $('#lgForm').on('submit', function () {
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
`);
|
`);
|
||||||
}
|
}
|
||||||
// If ping, and lookup is an IPv6 address *with* CIDR prefix (e.g. 2001:db8::/48, NOT 2001:db8::1), show an error.
|
// If ping, and lookup is an IPv6 address *with* CIDR prefix (e.g. 2001:db8::/48, NOT 2001:db8::1), show an error.
|
||||||
else if (ipv6_cidr.test(ipprefix) == true && cmd == 'ping') {
|
else if (ipv6_cidr.test(ipprefix) == true && cmd == 'ping') {
|
||||||
$('#ipprefix_error').show()
|
$('#ipprefix_error').show()
|
||||||
|
|
@ -132,7 +148,7 @@ $('#lgForm').on('submit', function () {
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
`);
|
`);
|
||||||
}
|
}
|
||||||
// If traceroute, and lookup is an IPv6 address *with* CIDR prefix (e.g. 2001:db8::/48, NOT 2001:db8::1), show an error.
|
// If traceroute, and lookup is an IPv6 address *with* CIDR prefix (e.g. 2001:db8::/48, NOT 2001:db8::1), show an error.
|
||||||
else if (ipv6_cidr.test(ipprefix) == true && cmd == 'traceroute') {
|
else if (ipv6_cidr.test(ipprefix) == true && cmd == 'traceroute') {
|
||||||
$('#ipprefix_error').show()
|
$('#ipprefix_error').show()
|
||||||
|
|
@ -148,9 +164,8 @@ $('#lgForm').on('submit', function () {
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
`);
|
`);
|
||||||
}
|
} else submitForm();
|
||||||
else submitForm();
|
});
|
||||||
});
|
|
||||||
|
|
||||||
var submitForm = function() {
|
var submitForm = function() {
|
||||||
progress.hide();
|
progress.hide();
|
||||||
|
|
@ -187,7 +202,11 @@ var submitForm = function() {
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url: `/lg`,
|
url: `/lg`,
|
||||||
type: 'POST',
|
type: 'POST',
|
||||||
data: JSON.stringify({router: router, cmd: cmd, ipprefix: ipprefix}),
|
data: JSON.stringify({
|
||||||
|
router: router,
|
||||||
|
cmd: cmd,
|
||||||
|
ipprefix: ipprefix
|
||||||
|
}),
|
||||||
contentType: "application/json; charset=utf-8",
|
contentType: "application/json; charset=utf-8",
|
||||||
context: document.body,
|
context: document.body,
|
||||||
readyState: resultsbox.show() && progress.show(),
|
readyState: resultsbox.show() && progress.show(),
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,26 @@
|
||||||
// Custom Elements
|
// Custom Elements
|
||||||
|
|
||||||
.hero.lg-hero-bg
|
.footer
|
||||||
background-color: $lg-hero-bg
|
position: absolute
|
||||||
color: findColorInvert($lg-hero-bg)
|
width: 100%
|
||||||
|
bottom: 0
|
||||||
|
overflow: hidden
|
||||||
|
|
||||||
.hero-foot.lg-hero-bg
|
#lg-title, #lg-subtitle
|
||||||
background-color: $lg-hero-bg
|
color: findColorInvert($body-background-color)
|
||||||
color: findColorInvert($lg-hero-bg)
|
|
||||||
|
|
||||||
.hero.lg-hero-bg .title, .subtitle
|
.is-danger #lg-title, .is-danger #lg-subtitle
|
||||||
color: findColorInvert($lg-hero-bg)
|
|
||||||
|
|
||||||
.hero.is-danger .title, .subtitle
|
|
||||||
color: findColorInvert($danger)
|
color: findColorInvert($danger)
|
||||||
|
|
||||||
.hero.lg-hero-bg .navbar-item
|
.navbar-menu, .navbar-brand, .navbar-tabs
|
||||||
color: findColorInvert($lg-hero-bg)
|
background-color: $body-background-color
|
||||||
|
|
||||||
|
.navbar-item
|
||||||
|
color: findColorInvert($body-background-color)
|
||||||
|
|
||||||
|
a.navbar-item:hover
|
||||||
|
color: $lg-btn-submit
|
||||||
|
background-color: transparent
|
||||||
|
|
||||||
.button.lg-btn-submit
|
.button.lg-btn-submit
|
||||||
background-color: $lg-btn-submit
|
background-color: $lg-btn-submit
|
||||||
|
|
@ -48,13 +53,29 @@
|
||||||
|
|
||||||
.query-output
|
.query-output
|
||||||
font-family: $family-monospace
|
font-family: $family-monospace
|
||||||
font-size: 0.875em
|
font-size: 0.95em
|
||||||
|
width: 100%
|
||||||
|
-webkit-overflow-scrolling: touch
|
||||||
overflow-x: auto
|
overflow-x: auto
|
||||||
white-space: pre
|
white-space: pre
|
||||||
word-wrap: normal
|
|
||||||
|
|
||||||
.dropdown-content.lg-help
|
.dropdown-content.lg-help
|
||||||
width: 24rem
|
width: 24rem
|
||||||
|
|
||||||
|
.dropdown-content.lg-help-mobile
|
||||||
|
width: 20rem
|
||||||
|
|
||||||
.icon.lg-icon-help
|
.icon.lg-icon-help
|
||||||
color: $lg-btn-submit
|
color: $lg-btn-submit
|
||||||
|
|
||||||
|
#ipprefix::-webkit-input-placeholder
|
||||||
|
font-family: $family-sans-serif
|
||||||
|
|
||||||
|
#ipprefix:-ms-input-placeholder
|
||||||
|
font-family: $family-sans-serif
|
||||||
|
|
||||||
|
#ipprefix:-moz-placeholder
|
||||||
|
font-family: $family-sans-serif
|
||||||
|
|
||||||
|
#ipprefix::-moz-placeholder
|
||||||
|
font-family: $family-sans-serif
|
||||||
|
|
|
||||||
|
|
@ -7,15 +7,21 @@
|
||||||
$family-sans-serif: "Nunito", sans-serif;
|
$family-sans-serif: "Nunito", sans-serif;
|
||||||
$family-monospace: "Fira Mono", monospace;
|
$family-monospace: "Fira Mono", monospace;
|
||||||
|
|
||||||
|
/* Color Changes */
|
||||||
|
$body-background-color: #fbfffe;
|
||||||
|
$footer-background-color: $body-background-color;
|
||||||
|
|
||||||
/* Custom Colors */
|
/* Custom Colors */
|
||||||
$lg-btn-submit: #40798c;
|
$lg-btn-submit: #40798c;
|
||||||
$lg-tag-loctitle: #330036;
|
$lg-tag-loctitle: #330036;
|
||||||
$lg-tag-cmdtitle: #330036;
|
$lg-tag-cmdtitle: #330036;
|
||||||
$lg-tag-cmd: #ff5e5b;
|
$lg-tag-cmd: #ff5e5b;
|
||||||
$lg-hero-bg: #fbfffe;
|
|
||||||
$lg-progressbar: #40798c;
|
$lg-progressbar: #40798c;
|
||||||
$lg-tag-loc: #40798c;
|
$lg-tag-loc: #40798c;
|
||||||
|
|
||||||
|
/* Element Changes */
|
||||||
|
$footer-padding: 3rem 1.5rem 3rem ;
|
||||||
|
|
||||||
/*! bulma.io v0.7.4 | MIT License | github.com/jgthms/bulma */
|
/*! bulma.io v0.7.4 | MIT License | github.com/jgthms/bulma */
|
||||||
@import "utilities/_all";
|
@import "utilities/_all";
|
||||||
@import "base/_all";
|
@import "base/_all";
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue