Label colors!

dhcp-hosts.dpto2

@@ -98,7 +98,7 @@ ff:ff:ff:ff:ff:fe,10.6.122.95
 00:23:54:8c:65:13,10.6.122.96,set:client0023548c6513
 ff:ff:ff:ff:ff:fe,10.6.122.97
 ff:ff:ff:ff:ff:fe,10.6.122.98
-# {"reserved-by": "Zelda"}
+# {"color": "purple", "reserved-by": "Zelda"}
 ff:ff:ff:ff:ff:fe,10.6.122.99
 ff:ff:ff:ff:ff:fe,10.6.122.100
 # {"reserved-by": "Andy"}

dhcp-opts.dpto2

@@ -1,2 +1,2 @@
-tag:client0023548c6513,option:router,10.6.122.96
 tag:client122442232445,option:router,10.6.122.2
+tag:client0023548c6513,option:router,10.6.122.96

main.py

@@ -231,7 +231,7 @@ def parse_dchp_host(line):
             tag = p[4:]
     return DhcpHostLine(macs, ip, tag)
 
-Ip = namedtuple("Ip","reserved_by dhcp_pool locked macs gw")
+Ip = namedtuple("Ip","reserved_by dhcp_pool locked macs gw color")
 
 def load_ips():
     ipmap = {}
@@ -241,14 +241,16 @@ def load_ips():
             dhcp_pool=True,
             locked=False,
             macs=[],
-            gw=None
+            gw=None,
+            color=None
         )
     ipmap[0] = ipmap[255] = Ip(
         reserved_by="",
         dhcp_pool=False,
         locked=False,
         macs=[],
-        gw=None
+        gw=None,
+        color=None
     )
     prefix = None
 
@@ -288,7 +290,8 @@ def load_ips():
                     dhcp_pool=False,
                     locked=meta.get("locked",False),
                     macs=r.macs,
-                    gw=gws.get(r.tag, None)
+                    gw=gws.get(r.tag, None),
+                    color = meta.get("color", None)
                 )
                 meta = {}
     ipmap["prefix"] = prefix
@@ -327,6 +330,8 @@ def write_dhcp_files(ipmap):
                     meta['reserved-by'] = ip.reserved_by
                 if ip.locked:
                     meta['locked'] = True
+                if ip.color:
+                    meta['color'] = ip.color
                 print("# " + json.dumps(meta), file=f)
             if len(ip.macs) == 0:
                 macs = impossible_mac
@@ -355,6 +360,7 @@ def write_dhcp_files(ipmap):
 @app.route("/ip/<int:last_byte>", methods=['GET', 'POST'])
 @login_required
 def ip(last_byte):
+    valid_colors = "black red gold green blue purple".split()
     if request.method == 'POST':
         # ImmutableMultiDict([('reserved-by', 'Andy'),
         #                     ('dhcp-client', 'mac'),
@@ -371,6 +377,8 @@ def ip(last_byte):
         macs = parse_macs(request.form.get('dhcp-client-mac', ''))
         gw = request.form.get('dhcp-gw','')[:15]
         gw = gw if ip_re.match(gw) else None
+        color = request.form.get('label-color', '')[:20]
+        color = color if color in valid_colors else None
 
         with exclusive_lock:
             ipmap = load_ips()
@@ -381,6 +389,7 @@ def ip(last_byte):
                     locked=False,
                     macs=macs,
                     gw=gw,
+                    color=color
                 )
                 write_dhcp_files(ipmap)
                 reload_dnsmasq()
@@ -392,6 +401,7 @@ def ip(last_byte):
         return render_template(
                 "ip.html",
                 addr=addr,
+                valid_colors=valid_colors,
                 meta=ipmap[last_byte],
         )
 

static/css/dpto2.css

@@ -24,7 +24,7 @@ div.ips-cell {
     display: inline-flex;
     flex-direction: column;
     justify-content: center;
-    background-color: #faf4fa;
+    background-color: #fffcff;
     width: 54px;
     height: 54px;
     margin: 0px;
@@ -64,10 +64,11 @@ green darkgreen
 */
 
 .c-black { color: #444; }
-.c-blue { color: darkblue; }
-.c-purple { color: purple; }
-.c-red { color: darkred; }
-.c-green { color: darkgreen; }
+.c-red { color: #ff4141; }
+.c-gold { color: #ffb400; }
+.c-blue { color: #3d7bc7; }
+.c-purple { color: #c55bba; }
+.c-green { color: #36ae36; }
 
 .color-sample {
     font-size: x-large;
@@ -80,6 +81,13 @@ green darkgreen
     border-bottom: 2px solid black;
 }
 
+[disabled] .color-sample {
+    color: lightgrey;
+}
+[disabled] .color-sample.selected {
+    border-bottom: 2px solid lightgrey;
+}
+
 span.ip {
     position: absolute;
     bottom: 2px;
@@ -103,7 +111,7 @@ div.ips-cell.dhcp-pool.hover {
     background-color: #acdccc;
 }
 div.ips-cell.hover {
-    background-color: #eae4ea;
+    background-color: #f6f0f6;
 }
 div.ips-cell.unusable {
     background-image: url(../img/unusable.png)

templates/ip.html

@@ -24,30 +24,36 @@
 
   <div class="form-group">
     <div class="col-xs-11">
-        <input type="checkbox" id="reserved" name="reserved"
+      <input type="checkbox" id="reserved" name="reserved"
             {% if meta.reserved_by -%}
                 checked="checked"
             {%- endif -%}>
         <label for="reserved">Etiqueta:</label>
            <div class="row">
-        <div class="col-xs-6"><input type="text" class="form-control"
+      <fieldset id="label-fieldset" disabled>
+     <div class="col-xs-6">
+      <input type="text" class="form-control"
                     id="reserved-by" name="reserved-by"
                  {% if meta.reserved_by -%}
                      value="{{ meta.reserved_by }}"
-                 {%- else -%}
-                     disabled
                  {%- endif -%}
                  />
-        </div>
-        <div class="col-xs-6">
-         <span class="color-sample c-black selected"><i class="fa fa-square"></i></span>
-         <span class="color-sample c-blue"><i class="fa fa-square"></i></span>
-         <span class="color-sample c-purple"><i class="fa fa-square"></i></span>
-         <span class="color-sample c-red"><i class="fa fa-square"></i></span>
-         <span class="color-sample c-green"><i class="fa fa-square"></i></span>
-        </div>
-          </div>
+     </div>
+     <div class="col-xs-6">
+      {% set meta_color = "black" %}
+      {% if meta.color %}{% set meta_color = meta.color %}{% endif %}
+
+      {% for color in valid_colors %}
+        <span class="color-sample c-{{ color }}
+        {%- if color == meta_color %} selected{% endif -%}"
+        {%- if color != 'black' %} data-color="{{ color }}"{% endif %}
+        ><i class="fa fa-square"></i></span>
+      {% endfor %}
+      <input type="hidden" id="label-color" name="label-color" value=""/>
+     </div>
     </div>
+   </fieldset>
+  </div>
  </div>
 
   <div class="form-group">
@@ -117,7 +123,7 @@
 <script>
     $(function() {
         $("#reserved").change(function() {
-            $("#reserved-by").prop("disabled", !$(this).prop("checked"));
+            $("#label-fieldset").prop("disabled", !$(this).prop("checked"));
         })
         $("#dhcp").change(function() {
             $("#dhcp-fieldset").prop("disabled", !$(this).prop("checked"));
@@ -125,6 +131,13 @@
         $("input[type=radio]").change(function() {
             $("#dhcp-specific-fieldset").prop("disabled", !$("#dhcp-client-specific").prop("checked"));
         })
+        $(".color-sample").click(function() {
+            if ($("#label-fieldset").prop("disabled"))
+                return;
+            $(".color-sample").removeClass("selected");
+            $(this).addClass("selected");
+            $("#label-color").val($(this).data().color);
+        });
         $("input").change()
     });
 </script>

templates/ips.html

@@ -35,7 +35,10 @@
           {%- if ipmap[ip].dhcp_pool %} dhcp-pool{% endif -%}
           ">
           <div style="display: inline-block; max-height: 52px;">
-              <div class="name c-black">
+              <div class="name
+                          {%- if ipmap[ip].color %} c-{{ ipmap[ip].color }}
+                          {%- else %} c-black
+                          {%- endif %}">
                 {% if ipmap[ip].dhcp_pool %}
                     DHCP
                 {% else %}