Changeset 355


Ignore:
Timestamp:
Nov 4, 2017, 4:04:41 PM (6 years ago)
Author:
g7moreau
Message:
  • All rework. Put everything on just one web page !
Location:
trunk
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • trunk/push-web

    r351 r355  
    11#!/bin/bash
    22#
    3 # 2007/10/23 gabriel
    4 # 2010/11/03 gabriel
    5 # 2011/03/30 gabriel - make it generic
     3# 2007/10/23 Gabriel Moreau
     4# 2010/11/03 Gabriel Moreau
     5# 2011/03/30 Gabriel Moreau - make it generic
     6# 2017/11/04 Gabriel Moreau - all reworks - use tab
    67
    78export PATH=/bin:/sbin:/usr/bin:/usr/sbin
    … …  
    6768 history.go(0);
    6869 }
     70 
     71function selectTab(event, tabName) {
     72 var i;
     73 var x = document.getElementsByClassName("selectableTabContent");
     74 var tablinks = document.getElementsByClassName("selectableTabButton");
     75 for (i = 0; i < x.length; i++) {
     76  x[i].style.display = "none";
     77  }
     78 for (i = 0; i < x.length; i++) {
     79  tablinks[i].id = "";
     80  }
     81 document.getElementById(tabName).style.display = "block";
     82 event.currentTarget.id = "selected";
     83 }
    6984 </script>
    7085</head>
    … …  
    7893<div id="navbar">
    7994 <ul>
    80   <li id="selected"><a href="index.html">IP detected</a></li>
    81   <li><a href="ip-free.html">IP available</a></li>
    82   <li><a href="bad-vlan-id.html">VLAN mismatch</a></li>
     95  <li class="selectableTabButton" onclick="selectTab(event, 'IP_detected')" id="selected">IP detected</li>
     96  <li class="selectableTabButton" onclick="selectTab(event, 'IP_available')">IP available</li>
     97  <li class="selectableTabButton" onclick="selectTab(event, 'VLAN_mismatch')">VLAN mismatch</li>
     98  <li class="selectableTabButton" onclick="selectTab(event, 'MAP')">MAP (png)</li>
     99  <li class="selectableTabButton" onclick="selectTab(event, 'RAW_data')">RAW data</li>
    83100 </ul>
    84101</div>
    85102
    86103<div id="content">
    87 <p>
    88 The main raw results of Klask are accessible directly, via wget or curl for example, for a specific treatment:
    89 <a href="hostname-db.txt">Computers DB</a>,
    90 <a href="switch-db.txt">Switches DB</a>,
    91 <a href="ipfree-db.txt">IP available</a>,
    92 <a href="badvlan-db.txt">VLAN mismatch</a>,
    93 <a href="switch-map.txt">Map dot source</a>.
    94 </p>
     104
     105 <div id="IP_detected" class="selectableTabContent">
     106  <p>
     107  List all IP that have been detected on the local network.
     108  </p>
    95109END
    96110
    … …  
    98112
    99113cat <<END >> ${TMP}/index.html
    100 </div>
    101 <p class="copyright">
    102 Klask (version $(klask version | grep ^Version | cut -f 2 -d ' ')) - $(klask version | grep ^Copyright | cut -f 1 -d '<')
    103 </p>
    104 </body>
    105 </html>
     114 </div>
     115
     116 <div id="IP_available" class="selectableTabContent" style="display:none">
     117  <p>
     118  List all IP free (never use or not used since two years).
     119  Theses IP are available for affecting them to the new computer.
     120  </p>
    106121END
    107122
     123klask ip-free --format html >> ${TMP}/index.html
    108124
    109 cat <<END > ${TMP}/ip-free.html
    110 <!DOCTYPE html>
    111 <html lang="en">
    112 <head>
    113  <link rel="stylesheet" type="text/css" href="style-klask.css" />
    114  <meta http-equiv="refresh" content="1800">
    115  <title>Klask mapping net-tools</title>
    116  <script src="sorttable-klask.js"></script>
    117 </head>
    118 <body>
    119 <h1>
    120 <b><a href="http://servforge.legi.grenoble-inp.fr/projects/klask" class="circle">Klask</a></b>
    121 Tool for <a href="switch-map.png">mapping</a> (<a href="switch-map.png">png</a>|<a href="switch-map.svg">svg</a>)
    122 the local network [${LOCALTIME}] - site ${SITE_NAME}
    123 </h1>
     125cat <<END >> ${TMP}/index.html
     126 </div>
    124127
    125 <div id="navbar">
    126  <ul>
    127   <li><a href="index.html">IP detected</a></li>
    128   <li id="selected"><a href="ip-free.html">IP available</a></li>
    129   <li><a href="bad-vlan-id.html">VLAN mismatch</a></li>
    130  </ul>
     128 <div id="VLAN_mismatch" class="selectableTabContent" style="display:none">
     129  <p>
     130  List all computers connected on switches where the VLAN is misconfigured.
     131  Return the port and the VLAN to be configured on switches.
     132  </p>
     133END
     134
     135klask bad-vlan-id --format html >> ${TMP}/index.html
     136
     137cat <<END >> ${TMP}/index.html
     138 </div>
     139
     140 <div id="MAP" class="selectableTabContent" style="display:none">
     141   <p>
     142   Direct link to map format <a href="switch-map.png">png</a> or <a href="switch-map.svg">svg</a>.
     143   </p>
     144   <img class="map" src="switch-map.png">
     145 </div>
     146
     147 <div id="RAW_data" class="selectableTabContent" style="display:none">
     148  <p>
     149   The main raw results of Klask are accessible directly, via <tt>wget</tt> or <tt>curl</tt> for example, for a specific treatment:
     150   <ul>
     151    <li><a href="hostname-db.txt">Computers DB</a> (command <tt>klask exportdb --format txt</tt>),</li>
     152    <li><a href="switch-db.txt">Switches DB</a> (command <tt>klask exportsw --format txt</tt>),</li>
     153    <li><a href="ipfree-db.txt">IP available</a> (command <tt>klask ip-free --format txt</tt>),</li>
     154    <li><a href="badvlan-db.txt">VLAN mismatch</a> (command <tt>klask bad-vlan-id --format txt</tt>),</li>
     155    <li>Map format: <a href="switch-map.txt">dot source</a>, <a href="switch-map.png">png</a>, <a href="switch-map.svg">svg</a>.</li>
     156   </ul>
     157  </p>
     158 </div>
    131159</div>
    132160
    133 <div id="content">
    134 <p>
    135 The main raw results of Klask are accessible directly, via wget or curl for example, for a specific treatment:
    136 <a href="hostname-db.txt">Computers DB</a>,
    137 <a href="switch-db.txt">Switches DB</a>,
    138 <a href="ipfree-db.txt">IP available</a>,
    139 <a href="bad-vlan-id-db.txt">VLAN mismatch</a>,
    140 <a href="switch-map.txt">Map dot source</a>.
    141 </p>
    142 END
    143 
    144 klask ip-free --format html >> ${TMP}/ip-free.html
    145 
    146 cat <<END >> ${TMP}/ip-free.html
    147 </div>
    148 <p class="copyright">
    149 Klask (version $(klask version | grep ^Version | cut -f 2 -d ' ')) - $(klask version | grep ^Copyright | cut -f 1 -d '<')
    150 </p>
    151 </body>
    152 </html>
    153 END
    154 
    155 
    156 cat <<END > ${TMP}/bad-vlan-id.html
    157 <!DOCTYPE html>
    158 <html lang="en">
    159 <head>
    160  <link rel="stylesheet" type="text/css" href="style-klask.css" />
    161  <meta http-equiv="refresh" content="1800">
    162  <title>Klask mapping net-tools</title>
    163  <script src="sorttable-klask.js"></script>
    164 </head>
    165 <body>
    166 <h1>
    167 <b><a href="http://servforge.legi.grenoble-inp.fr/projects/klask" class="circle">Klask</a></b>
    168 Tool for <a href="switch-map.png">mapping</a> (<a href="switch-map.png">png</a>|<a href="switch-map.svg">svg</a>)
    169 the local network [${LOCALTIME}] - site ${SITE_NAME}
    170 </h1>
    171 
    172 <div id="navbar">
    173  <ul>
    174   <li><a href="index.html">IP detected</a></li>
    175   <li><a href="ip-free.html">IP available</a></li>
    176   <li id="selected"><a href="bad-vlan-id.html">VLAN mismatch</a></li>
    177  </ul>
    178 </div>
    179 
    180 <div id="content">
    181 <p>
    182 The main raw results of Klask are accessible directly, via wget or curl for example, for a specific treatment:
    183 <a href="hostname-db.txt">Computers DB</a>,
    184 <a href="switch-db.txt">Switches DB</a>,
    185 <a href="ipfree-db.txt">IP available</a>,
    186 <a href="bad-vlan-id-db.txt">VLAN mismatch</a>,
    187 <a href="switch-map.txt">Map dot source</a>.
    188 </p>
    189 END
    190 
    191 klask bad-vlan-id --format html >> ${TMP}/bad-vlan-id.html
    192 
    193 cat <<END >> ${TMP}/bad-vlan-id.html
    194 </div>
    195161<p class="copyright">
    196162Klask (version $(klask version | grep ^Version | cut -f 2 -d ' ')) - $(klask version | grep ^Copyright | cut -f 1 -d '<')
    … …  
    207173      /usr/share/klask/style-klask.css \
    208174      ${TMP}/index.html \
    209       ${TMP}/ip-free.html \
    210       ${TMP}/bad-vlan-id.html \
    211175      ${TMP}/*-db.txt \
    212176      ${TMP}/switch-map.txt \
    … …  
    220184      /usr/share/klask/style-klask.css \
    221185      ${TMP}/index.html \
    222       ${TMP}/ip-free.html \
    223       ${TMP}/bad-vlan-id.html \
    224186      ${TMP}/*-db.txt \
    225187      ${TMP}/switch-map.txt \

  • trunk/style-klask.css

    r354 r355  
    113113   }
    114114
     115img.map {
     116   height          : 100%;
     117   width           : 100%;
     118   object-fit      : contain;
     119   padding-top     : 3ex;
     120   padding-bottom  : 2ex;
     121   }
     122
    115123#navbar ul {
    116124   list-style      : none;
    … …  
    120128
    121129#navbar li {
    122    float           : left;
    123    margin          : 0;
     130   background      : #333;
    124131   border          : 1px solid #BBB;
    125132   border-bottom-width     : 0;
    126133   border-top-left-radius  : 1.5ex;
    127134   border-top-right-radius : 1.5ex;
    128    background      : #333;
     135   color           : #FFF;
     136   display         : block;
     137   float           : left;
     138   font-family     : Verdana;
     139   font-size       : 110%;
     140   margin          : 0;
     141   padding         : 0.8ex 2.5ex;
     142   text-align      : center;
     143   text-decoration : none;
     144   width           : 20ex;
    129145   }
    130146
    … …  
    133149   }
    134150
    135 #navbar a {
    136    text-decoration : none;
    137    font-family     : Verdana;
    138    font-size       : 110%;
    139    display         : block;
    140    padding         : 0.8ex 2.5ex;
    141    color           : #FFF;
    142    width           : 20ex;
    143    text-align      : center;
    144    border-top-left-radius  : 1.5ex;
    145    border-top-right-radius : 1.5ex;
    146    }
    147 
    148151#navbar #selected {
    149152   border-color    : #333;
    150    background      : white;
    151    }
    152 
    153 #navbar #selected a {
    154153   position        : relative;
    155154   top             : 1px;
Note: See TracChangeset for help on using the changeset viewer.