Skip to content
This repository has been archived by the owner on Oct 10, 2021. It is now read-only.

Commit

Permalink
Browse files Browse the repository at this point in the history
update HTML views using UIkit
  • Loading branch information
hoelsner committed Jan 8, 2016
1 parent 1233920 commit c952c9f
Show file tree
Hide file tree
Showing 40 changed files with 1,005 additions and 273 deletions.
4 changes: 3 additions & 1 deletion app/__init__.py
@@ -1,10 +1,12 @@
import os
from flask import Flask
from flask.ext.sqlalchemy import SQLAlchemy
from config import STATIC_URL_PATH

app = Flask(__name__)
app = Flask(__name__, static_url_path=STATIC_URL_PATH)
app.config.from_object(os.getenv('APP_SETTINGS', "config.DefaultConfig"))
db = SQLAlchemy(app)

from app import models
from app import views
from app.context_processors import inject_all_project_data
27 changes: 27 additions & 0 deletions app/context_processors.py
@@ -0,0 +1,27 @@
from app import app
from app.models import Project


@app.context_processor
def inject_all_project_data():
"""
returns all Project names and ID's from the database to build the sidebar
:return:
"""
projects = Project.query.all()
result = []
for p in projects:
p_dict = dict()
p_dict["id"] = p.id
p_dict["name"] = p.name
p_dict["config_templates"] = []

for cfg in p.configtemplates.all():
p_dict["config_templates"].append({
"id": cfg.id,
"name": cfg.name
})

result.append(p_dict)

return dict(all_project_data=result)
Binary file added app/static/images/apple-touch-icon.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/static/images/favicon.ico
Binary file not shown.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/static/images/how_to/add_project.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/static/images/how_to/view_configuration.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
201 changes: 190 additions & 11 deletions app/templates/base.html
Expand Up @@ -2,21 +2,200 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>{% block title %}{% endblock %}</title>
<link rel="shortcut icon" href="{{ url_for("static", filename="images/favicon.ico") }}" type="image/x-icon">
<link rel="apple-touch-icon-precomposed" href="{{ url_for("static", filename="images/apple-touch-icon.png") }}">

<script src="{{ url_for("static", filename="js/jquery.min.js") }}"></script>
<link rel="stylesheet" href="{{ url_for("static", filename="css/uikit.almost-flat.min.css") }}">
<link rel="stylesheet" href="{{ url_for("static", filename="css/components/sticky.almost-flat.min.css") }}">
<link rel="stylesheet" href="{{ url_for("static", filename="css/components/notify.almost-flat.min.css") }}">
<link rel="stylesheet" href="{{ url_for("static", filename="css/components/tooltip.min.css") }}">
<script src="{{ url_for("static", filename="js/uikit.min.js") }}"></script>
<script src="{{ url_for("static", filename="js/components/sticky.min.js") }}"></script>
<script src="{{ url_for("static", filename="js/components/notify.min.js") }}"></script>
<script src="{{ url_for("static", filename="js/components/tooltip.min.js") }}"></script>
<style type="text/css">
/* reformat the notification container */
body {
margin-bottom: 100px;
}
.uk-notify {
width: 60%;
left: 0;
margin-left: 20%
}

</style>
</head>
<body>
<h1>Network Configuration Generator</h1>
<hr>
<div class="uk-container uk-container-center">
<!-- Navigation Bar -->
<nav class="uk-navbar" data-uk-sticky="{top:10}">
<a class="uk-navbar-brand uk-hidden-small" href="{{ url_for("home") }}"><span class="uk-icon-cogs"></span> Network Configuration Generator</a>
<a href="#sidebar" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>
<div class="uk-navbar-brand uk-navbar-center uk-visible-small">Network Configuration Generator</div>
<div class="uk-navbar-flip">
<ul class="uk-navbar-nav uk-hidden-small">
<li class="">
<a href="#" title="back to top" data-uk-tooltip="{pos:'bottom'}">
<span class="uk-icon-arrow-up"></span>
</a>
</li>
</ul>
</div>
</nav>

<!-- Responsive Menu -->
<div class="uk-offcanvas" id="sidebar">
<div class="uk-offcanvas-bar">
<ul class="uk-nav uk-nav-offcanvas" data-uk-nav>
<li class=""><a href="{{ url_for("home") }}"><span class="uk-icon-home"></span> Homepage</a></li>
<li class="uk-nav-divider"></li>
<li class=""><a href="{{ url_for("view_all_projects") }}"><span class="uk-icon-folder"></span> View all Projects</a></li>
<li class="uk-nav-divider"></li>
<li class="">
<a href="{{ url_for("how_to_use") }}">
<i class="uk-icon-info-circle uk-margin-small-right"></i>How to use
</a>
</li>
<li>
<a href="{{ url_for("template_syntax") }}">
<i class="uk-icon-question-circle uk-margin-small-right"></i> Template Syntax
</a>
</li>
<li class="">
<a href="https://github.com/hoelsner/network-config-generator" target="_blank">
<i class="uk-icon-github uk-margin-small-right"></i> Github Repository
</a>
</li>
</ul>
</div>
</div>

<!-- used to increase the space -->
<div class="uk-grid" data-uk-grid-margin>
<div class="uk-width-medium-1-4 uk-hidden-small" style="margin-top:50px">
<!-- Menu -->
<div class="uk-panel uk-panel-box" data-uk-sticky="{top:60}">
<ul class="uk-nav uk-nav-side uk-nav-parent-icon" data-uk-scrollspy-nav="{closest:'li', smoothscroll:true}" data-uk-nav>
<li><a href="{{ url_for("home") }}"><span class="uk-icon-home"></span> Homepage</a></li>

<li class="uk-nav-divider"></li>
<li class="uk-nav-header">Projects</li>
{% if all_project_data|length != 0 %}
{% for p in all_project_data %}
{% if project %}
{% if project.name == p.name %}
<li class="uk-parent uk-active">
{% else %}
<li class="uk-parent">
{% endif %}
{% else %}
<li class="uk-parent">
{% endif %}
<a href="{{ url_for("view_project", project_id=p.id) }}">
<span class="uk-icon-folder"></span>
{{ p.name }}
</a>
<ul class="uk-nav-sub">
<ul>
<li>
<a href="{{ url_for("edit_config_template", project_id=p.id) }}">
<span class="uk-icon-plus"></span>
add a Config Template
</a>
</li>
<li class="uk-nav-divider"></li>
{% if p.config_templates|length != 0 %}
{% for cfg in p.config_templates %}
<li>
<a href="{{ url_for("view_config_template", project_id=p.id, config_template_id=cfg.id) }}">
<span class="uk-icon-file"></span>
{{ cfg.name }}
</a>
</li>
{% endfor %}
{% else %}
<li>(no templates defined)</li>
{% endif %}
<li></li>
</ul>
</ul>
</li>
{% endfor %}
<li class="uk-nav-divider"></li>
<li class="">
<a href="{{ url_for("edit_project") }}">
<span class="uk-icon-folder"></span> Add a new Project
</a>
</li>
{% else %}
<li class="">
<a href="{{ url_for("edit_project") }}" class="uk-text-danger">
<span class="uk-icon-folder"></span> Add your first Project
</a>
</li>
{% endif %}
<li class="uk-nav-divider"></li>
<li class="">
<a href="{{ url_for("how_to_use") }}">
<i class="uk-icon-info-circle uk-margin-small-right"></i> How to use
</a>
</li>
<li class="">
<a href="{{ url_for("template_syntax") }}">
<i class="uk-icon-question-circle uk-margin-small-right"></i> Template Syntax
</a>
</li>
<li class="">
<a href="https://github.com/hoelsner/network-config-generator" target="_blank">
<i class="uk-icon-github uk-margin-small-right"></i> Github Repository
</a>
</li>
</ul>
</div>
</div>
<div class="uk-width-medium-3-4" id="main_content" style="margin-top:50px">
<!-- Content -->
{% block content %}{% endblock %}
</div>
</div>
</div>
<script type="application/javascript">
$(document).ready(function() {
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<ul class="flashes">
{% for category, message in messages %}
<li class="{{ category }}">{{ message }}</li>
{% endfor %}
</ul>
<hr>
{% endif %}
{% if messages %}{% for category, message in messages %}
{% if category == "error" %}
UIkit.notify("<i class='uk-icon-exclamation'></i> {{ message|safe }}", {
status:'danger',
timeout: 0,
pos:'top-center'
});
{% elif category == "warning" %}
UIkit.notify("<i class='uk-icon-check'></i> {{ message|safe }}", {
status:'warning',
timeout: 3000,
pos:'top-center'
});
{% elif category == "success" %}
UIkit.notify("<i class='uk-icon-check'></i> {{ message|safe }}", {
status:'success',
timeout: 3000,
pos:'top-center'
});
{% else %}
UIkit.notify("<i class='uk-icon-info'></i> {{ message|safe }}", {
status:'info',
timeout: 5000,
pos:'top-center'
});
{% endif %}
{% endfor %}{% endif %}
{% endwith %}
{% block content %}{% endblock %}
})
</script>
</body>
</html>
8 changes: 5 additions & 3 deletions app/templates/config_template/_variable_table.html
@@ -1,4 +1,4 @@
<table>
<table class="uk-table">
<comment>The following variables are used within this template:</comment>
<thead>
<tr>
Expand All @@ -10,11 +10,13 @@
<tbody>
{% for var in config_template.variables.all() %}
<tr>
<td>{{ var.var_name }}</td>
<td><code>{{ var.var_name }}</code></td>
<td>{{ var.description }}</td>
<td>
{% if var.var_name != "hostname" %}
<a href="{{ url_for("edit_template_variable", config_template_id=config_template.id, template_variable_id=var.id) }}" id="edit_variable_{{ config_template.id }}">edit</a>
<a href="{{ url_for("edit_template_variable", config_template_id=config_template.id, template_variable_id=var.id) }}" id="edit_variable_{{ config_template.id }}" data-uk-tooltip title="edit variable">
<span class="uk-icon-edit"></span>
</a>
{% endif %}
</td>
</tr>
Expand Down
22 changes: 15 additions & 7 deletions app/templates/config_template/delete_config_template.html
Expand Up @@ -2,12 +2,20 @@
{% block title %}Delete Config Template{% endblock %}

{% block content %}
<h2>Config Template: {{ config_template.name }}</h2>
<p>
<a href="{{ url_for("view_project", project_id=config_template.project.id) }}" id="_back">back</a>
</p>
<form action="" method="POST">
<p>Do you really want to delete the config template? All associated elements are also removed.</p>
<input id="submit" type="submit" name="yes" value="yes" />
<h1>
<span class="uk-icon-fiel"></span> Delete "{{ config_template.name }}"
</h1>

<ul class="uk-subnav uk-subnav-line">
<li>
<a href="{{ url_for("view_project", project_id=config_template.project.id) }}" id="_back">
<span class="uk-icon-arrow-left"></span> back
</a>
</li>
</ul>

<form action="" method="POST" class="uk-form">
<p class="uk-text-large uk-text-danger">Do you really want to delete this <strong>Config Template</strong>? All associated elements are also deleted!</p>
<button id="submit" type="submit" name="yes" value="yes" class="uk-button uk-button-danger">Delete Config Template</button>
</form>
{% endblock %}
34 changes: 24 additions & 10 deletions app/templates/config_template/edit_all_config_template_values.html
Expand Up @@ -2,23 +2,37 @@
{% block title %}Edit Values for Config Template{% endblock %}

{% block content %}
<h2>Edit all values for the Config Template: {{ config_template.name }}</h2>
<p>
<a href="{{ url_for("view_config_template", project_id=project_id, config_template_id=config_template.id) }}" id="_back">back</a>
</p>
<h1><span class="uk-icon-table"></span> Edit all values for the Config Template "{{ config_template.name }}"</h1>

<ul class="uk-subnav uk-subnav-line">
<li>
<a href="{{ url_for("view_config_template", project_id=project_id, config_template_id=config_template.id) }}" id="_back">
<span class="uk-icon-arrow-left"></span> back
</a>
</li>
</ul>

<p>You can change all values for the Config Template within the following textarea. The first line contains all variables that are defined within the Config Template. Every variable and value is separated by a semicolon. A line break will edit an existing Template Value Set or create a new one.</p>

{% include 'config_template/_variable_table.html' %}

<form method="POST" action="">
<form method="POST" action="" class="uk-form uk-form-stacked">
{{ form.csrf_token }}

{% if form.csv_content.errors %}
<ul class="errors">{% for error in form.csv_content.errors %}<li>{{ error }}</li>{% endfor %}</ul>
{% endif %}
<div>{{ form.csv_content.label }}: {{ form.csv_content(rows=20, cols=80)|safe }}</div>
<div class="uk-form-row">
{{ form.csv_content.label(class_="uk-form-label") }}
{% if form.csv_content.errors %}
{{ form.csv_content(class_="uk-form-controls uk-width-1-1 uk-form-danger", rows=20, cols=80)|safe }}
{% else %}
{{ form.csv_content(class_="uk-form-controls uk-width-1-1", rows=20, cols=80)|safe }}
{% endif %}
{% if form.csv_content.errors %}
{% for error in form.csv_content.errors %}<p class="uk-text-danger">{{ csv_content }}</p>{% endfor %}
{% endif %}
</div>

<input id="submit" type="submit" value="update values">
<div class="uk-form-row">
<button id="submit" type="submit" name="yes" value="yes" class="uk-button uk-width-1-1 uk-button-success">update values</button>
</div>
</form>
{% endblock %}

0 comments on commit c952c9f

Please sign in to comment.