<head>
<title></title>
- <link rel="stylesheet" type="text/css" href="/styles/main.css" />
+
<%include ../../partials/head%>
- <!-- aqui van los estilos externos (a ser borrados) -->
- <link rel="stylesheet" href="/styles/pure-min-0.5.0.css">
- <link rel="stylesheet" href="/styles/font-awesome.min.css">
- <link rel="stylesheet" href="/styles/pure-custom.css">
</head>
<body>
<header>
<%include ../../partials/header%>
</header>
- <div id="layout">
- <div id="menu">
- <div class="pure-menu pure-menu-open">
- <ul>
- <li class=" ">
- <a href="/web/index.html">Topology
- <i class="fa fa-home"></i></a>
- </li>
- <li class=" ">
- <a href="/web/stats.html">Statistics
- <i class="fa fa-bar-chart-o"></i></a>
- </li>
- <li class="menu-item-divided pure-menu-selected">
- <a href="/web/tap.html">Manage Tap
- <i class="fa fa-edit"></i></a>
- </li>
- <li class=" ">
- <a href="/web/loadbalancer.html">Load balancer
- <i class="fa fa-sitemap"></i></a>
- </li>
- </ul>
- </div>
- </div>
- <div id="main">
- <h2>Manage Tap</h2>
- <p>Following form allows configuring a stateless tap, i.e., once
- you create the tap, you cannot track or delete that specific
- tap. However, you can use the Set and Clear to achieve that effect.
- Performing a "Clear" operation without specifying any field
- values will remove all previously created Taps.
- For this edition of the tap, the source and sink need to be on
- the same switch.</p>
-
- <form class="pure-form pure-form-aligned">
- <fieldset>
- <div class="pure-control-group">
- <label>Switch DPID</label>
- <select id="switch" style="width:12em;" onchange="updatePorts()">
- </select>
- </div>
-
- <div class="pure-control-group">
- <label>Source port(s)</label>
- <select id="src-ports" style="width:12em;" multiple>
- </select>
- </div>
-
- <div class="pure-control-group">
- <label>Sink port(s)</label>
- <select id="sink-ports" style="width:12em;" multiple>
- </select>
- </div>
-
- <div class="pure-control-group">
- <label>MAC address</label>
- <select id="mac-class">
- <option>--Ignore--</option>
- <option>Source</option>
- <option>Destination</option>
- <option>Src or Dest</option>
- </select>
- <input id="mac-addr" type="text" placeholder="01:12:23:34:45:56">
- </div>
-
- <div class="pure-control-group">
- <label>IP address</label>
- <select id="ip-class">
- <option>--Ignore--</option>
- <option>Source</option>
- <option>Destination</option>
- <option>Src or Dest</option>
- </select>
- <input id="ip-addr" type="text" placeholder="12.23.34.45/24">
- </div>
-
- <div class="pure-control-group">
- <!--<div class="pure-u-1 pure-u-md-1-3">-->
- <label>Common traffic types</label>
- <select id="traffic-type">
- <option>--Ignore--</option>
- <option>HTTP</option>
- <option>HTTPS</option>
- <option>UDP</option>
- <option>DHCP</option>
- <option>ICMP</option>
- </select>
- </div>
- </fieldset>
- </form>
- <div class="pure-controls">
- <button href="#" class="pure-button pure-button-primary" onclick="setTap()">Set</button>
- <button href="#" class="pure-button pure-button-primary" onclick="clearTap()">Clear</button>
- </div>
- <div id="post-status">
- </div>
- </div><!-- main -->
+ <div id="main">
+ <h2>Manage Tap</h2>
+ <p>Aqui se pueden configurar los taps(puertos), para que puedan ser
+ desactivados a efectos de la red, ya que no pueden ser eliminados una vez que han
+ sido creados</p>
+
+ <form class="form">
+ <fieldset>
+ <div>
+ <label>Switch DPID</label>
+ <br>
+ <select id="switch" onchange="updatePorts()">
+ </select>
+ </div>
+
+ <div>
+ <label>Source port(s)</label>
+ <br>
+ <select id="src-ports" multiple>
+ </select>
+ </div>
+
+ <div>
+ <label>Sink port(s)</label>
+ <br>
+ <select id="sink-ports" multiple>
+ </select>
+ </div>
+
+ <div>
+ <label>MAC address</label>
+ <br>
+ <select id="mac-class">
+ <option>--Ignore--</option>
+ <option>Source</option>
+ <option>Destination</option>
+ <option>Src or Dest</option>
+ </select>
+ <input id="mac-addr" type="text" placeholder="12:34:56:78:9A:BC">
+ </div>
+
+ <div>
+ <label>IP address</label>
+ <br>
+ <select id="ip-class">
+ <option>--Ignore--</option>
+ <option>Source</option>
+ <option>Destination</option>
+ <option>Src or Dest</option>
+ </select>
+ <input id="ip-addr" type="text" placeholder="12.34.56.78/24">
+ </div>
+
+ <div>
+ <!--<div class="pure-u-1 pure-u-md-1-3">-->
+ <label>Common traffic types</label>
+ <br>
+ <select id="traffic-type">
+ <option>--Ignore--</option>
+ <option>HTTP</option>
+ <option>HTTPS</option>
+ <option>UDP</option>
+ <option>DHCP</option>
+ <option>ICMP</option>
+ </select>
+ </div>
+ </fieldset>
+ </form>
+
+
+ <div>
+ <button href="#" class="pure-button pure-button-primary" onclick="setTap()">Set</button>
+ <button href="#" class="pure-button pure-button-primary" onclick="clearTap()">Clear</button>
+ </div>
+ <div id="post-status">
+ </div>
+ </div><!-- main -->
</div>
<!--layout -->
- <div class="footer">
- <p class="legal-copyright">
- © 2014 SDN Hub. All rights reserved.
- </p>
- </div>
+
<script src="/js/jquery.min.js"></script>
<script src="/js/utils.js"></script>
+/* TO DO LIST */
+/* faltan las sombras
+faltan los textbox y selects
+ */
+
+
+
+
+
body {
background:
linear-gradient(238deg, rgba(70, 70, 70, 0.09) 0%, rgba(70, 70, 70, 0.09) 50%, rgba(214, 214, 214, 0.09) 50%, rgba(214, 214, 214, 0.09) 100%),
linear-gradient(90deg, rgb(10, 147, 39), rgb(235, 252, 123));\r
display: flex;\r
flex-direction: column;
+ font-family: helvetica;
+ padding-top: 10vh;
+}
+header{
+ position: absolute;
+ width:100%;
+ left:0;
+ top:0;
+}
+.navbar{
+background-color: #343a40;
+width: auto;
+position: relative;
+display: flex;
+flex-wrap: wrap;
+align-items: center;
+justify-content: space-between;
+padding: 0.5rem 1rem;
+box-sizing: border-box;
+margin: 0;
+top: 0;
+left: 0;
+flex-grow: 1;
+}
+.btn-outline-success{
+ padding: 0;
+ border-style: none;
+ cursor: pointer;
+ border: 1px solid;
+ color: #28A745;
+ border-color: #28A745;
+ display: inline-block;
+ font-weight: 400;
+ text-align: center;
+ vertical-align: middle;
+ user-select: none;
+ background-color: transparent;
+ padding: 0.375rem 0.75rem;
+ font-size: 1rem;
+ line-height: 1.5;
+ border-radius: 0.25rem;
+ transition: color .15s ease-in-out,background-color .15s ease-in-out;
+}
+.btn-outline-success:hover{
+ color: white;
+ background-color: #28A745;
}
-
.realtime {
/* width: 100vw;
height: auto;
.navbar{\r
width: auto;\r
}\r
+\r
+\r
+#main{\r
+ padding: 0em 10vw;\r
+}\r
+/* H1 to H6 */\r
+h1, h2, h3, h4, h5, h6, p, label, span{\r
+color: white;\r
+font-weight: bold;\r
+line-height: 1.5;\r
+}\r
+/* formularios */\r
+.form{\r
+ width: 100%;\r
+}\r
+fieldset{\r
+ width: 100%;\r
+ display: flex;\r
+ flex-flow: column wrap;\r
+ justify-content: flex-start;\r
+ align-items: stretch;\r
+ border: 0;\r
+}\r
+\r
+select{\r
+background-color: rgba(200,200,200,0.5);\r
+border: 0;\r
+border-bottom: 2px black solid;\r
+overflow: hidden;\r
+width: 15em;\r
+}\r
+/* some hacky shit for hidind the arrow */\r
+select {\r
+ /* for Firefox */\r
+ -moz-appearance: none;\r
+ /* for Chrome */\r
+ -webkit-appearance: none;\r
+}\r
+\r
+/* For IE10 */\r
+select::-ms-expand {\r
+ display: none;\r
+}\r
+\r
+input[type=text]{\r
+border-radius: 0;\r
+border: 0;\r
+}\r
projects / VSoRC / .git / commitdiff