Added better mobile navigation

Added ability to delete IP addresses
Added functions to set/read cookies; added ability to make the collapsed nav sticky across refreshes
2023-01-17 02:15:00 -05:00 · 2022-12-22 13:08:35 -05:00 · 2022-12-22 13:03:08 -05:00 · 2022-12-22 12:50:01 -05:00 · 2022-12-18 23:31:43 -05:00 · 2022-12-17 23:43:26 -05:00
19 changed files with 408 additions and 25 deletions
--- a/Gruntfile.js
+++ b/Gruntfile.js
@ -19,6 +19,21 @@ module.exports = function(grunt) {
      }
    },

+    coffee: {
+      options: {
+        sourceMap: true,
+        style: 'compressed'
+      },
+      files: {
+        expand: true,
+        flatten: true,
+        cwd: 'assets/coffee',
+        src: ['*.coffee'],
+        dest: 'public/js',
+        ext: '.js'
+      }
+    },
+
    watch: {
      css: {
        files: ['assets/styles/**/*.scss'],
@ -27,15 +42,24 @@ module.exports = function(grunt) {
          atBegin: true,
          spawn: false
        }
+      },
+      js: {
+        files: ['assets/coffee/*.coffee'],
+        tasks: ['coffee'],
+        options: {
+          atBegin: true,
+          spawn: false
+        }
      }
    }
  });

  // Load plugins.
-  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-sass');
+  grunt.loadNpmTasks('grunt-contrib-coffee');
+  grunt.loadNpmTasks('grunt-contrib-watch');

-  // CLI tasks.
-  grunt.registerTask('default', ['sass']);
+  // Default task(s).
+  grunt.registerTask('default', ['sass', 'coffee']);

 };
--- a/assets/coffee/gargoyle.coffee
+++ b/assets/coffee/gargoyle.coffee
@ -0,0 +1,43 @@
+$(document).ready( ->
+
+  $('#nav-toggle').on('click', toggleNav)
+  if getCookie('navCollapsed') == 'true'
+    $('body').addClass('collapsed')
+  $('#mobile-nav-toggle').on('click', toggleMobileNav)
+
+)
+
+toggleNav = () ->
+  bodyElem = $('body')
+  if bodyElem.hasClass('collapsed')
+    bodyElem.removeClass('collapsed')
+    setCookie('navCollapsed', 'false')
+  else
+    bodyElem.addClass('collapsed')
+    setCookie('navCollapsed', 'true')
+
+toggleMobileNav = () ->
+  navElem = $('#mobile-nav')
+  if navElem.hasClass('expanded')
+    navElem.removeClass('expanded')
+  else
+    navElem.addClass('expanded')
+
+getCookie = (cName) ->
+  name = cName + '='
+  cDecoded = decodeURIComponent(document.cookie)
+  #to be careful
+  cArr = cDecoded.split('; ')
+  res = undefined
+  cArr.forEach (val) ->
+    if val.indexOf(name) == 0
+      res = val.substring(name.length)
+    return
+  res
+
+setCookie = (cName, cValue, expDays = 30) ->
+  date = new Date
+  date.setTime date.getTime() + expDays * 24 * 60 * 60 * 1000
+  expires = 'expires=' + date.toUTCString()
+  document.cookie = cName + '=' + cValue + '; ' + expires + '; path=/'
+  return
--- a/assets/styles/kraken.scss
+++ b/assets/styles/kraken.scss
@ -6,6 +6,7 @@ $box-shadow-2: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
 body{
  background: lightgrey;
  padding-left: $nav-width;
+  transition: padding-left 230ms ease-in-out;
 }

 .card{
@ -15,6 +16,87 @@ body{
  box-shadow: $box-shadow-2;
 }

+@media screen and (max-width: 992px) {
+  body,
+  body.collapsed{
+    padding-left: 0 !important;
+  }
+  #main-nav{
+    display: none;
+  }
+  #mobile-nav{
+    display: block;
+  }
+}
+
+@media screen and (min-width: 993px) {
+  #mobile-nav{
+    display: none;
+  }
+}
+
+#mobile-nav{
+  width: calc(100% + 16px);
+  height: 55px;
+  margin-top: -8px;
+  margin-left: -8px;
+  margin-bottom: 15px;
+  background: #212121;
+  color: white;
+  font-size: 3rem;
+  box-shadow: $box-shadow-1;
+  overflow-y: hidden;
+  transition: height 230ms ease-in-out;
+
+  span{
+    display: inline-block;
+    width: 100%;
+    padding-top: 7px;
+  }
+
+  ul{
+    list-style: none;
+
+    li{
+      margin: 0;
+      border-bottom: 1px solid #999;
+
+      &:first-child{
+        border-top: 1px solid #999;
+      }
+
+      i{
+        display: none;
+        position: absolute;
+        right: 18px;
+        margin-top: 5px;
+        font-size: 3rem;
+      }
+    }
+
+    a{
+      display: block;
+      box-sizing: border-box;
+      width: 100%;
+      padding: 10px 15px;
+      color: limegreen;
+      font-size: 2.5rem;
+      text-decoration: none;
+      transition: all 230ms ease-in-out;
+
+      &:hover{
+        background: rgba(255, 255, 255, 0.1);
+      }
+    }
+  }
+}
+#mobile-nav.expanded{
+  height: 300px;
+  i{
+    display: inline;
+  }
+}
+
 #main-nav{
  position: fixed;
  top: 0;
@ -26,9 +108,21 @@ body{
  color: white;
  box-shadow: $box-shadow-1;
  box-sizing: border-box;
+  transition: left 230ms ease-in-out;

  h3{
-    text-align: center;
+    padding-left: 15px;
+    text-align: left;
+
+    i{
+      position: absolute;
+      right: 22px;
+      margin-top: 5px;
+      font-size: 3rem;
+      &:hover{
+        cursor: pointer;
+      }
+    }
  }

  ul{
@ -41,6 +135,13 @@ body{
      &:first-child{
        border-top: 1px solid #999;
      }
+
+      i{
+        position: absolute;
+        right: 18px;
+        margin-top: 5px;
+        font-size: 3rem;
+      }
    }

    a{
@ -60,6 +161,13 @@ body{
  }
 }

+body.collapsed{
+  padding-left: 64px;
+}
+body.collapsed #main-nav{
+  left: calc($nav-width * -1 + 64px);
+}
+
 #main-actions{
  width: 100%;
  max-width: 100%;
@ -103,3 +211,7 @@ body{
    font-style: italic;
  }
 }
+
+.u-text-centered{
+  text-align: center;
+}
--- a/db/migrations/0005_add_ip_table.rb
+++ b/db/migrations/0005_add_ip_table.rb
@ -0,0 +1,18 @@
+Sequel.migration do
+
+  up do
+    create_table(:ip_addresses) do
+      primary_key :id
+      String :address, null: false
+      String :dns_name
+      String :comment
+      DateTime :created_at, default: Sequel::CURRENT_TIMESTAMP
+      DateTime :updated_at, default: Sequel::CURRENT_TIMESTAMP
+    end
+  end
+
+  down do
+    drop_table(:ip_addresses)
+  end
+
+end
--- a/lib/models/ip_address.rb
+++ b/lib/models/ip_address.rb
@ -0,0 +1,5 @@
+class IpAddress < Sequel::Model
+
+
+
+end
--- a/lib/models/item.rb
+++ b/lib/models/item.rb
@ -2,6 +2,10 @@ class Item < Sequel::Model

  one_to_many :item_comments

+  def getLink()
+    return "/item/#{self.id}"
+  end
+
  def type_selected?(option)
    if self.type == option
      return 'selected'
--- a/lib/models/license.rb
+++ b/lib/models/license.rb
@ -2,4 +2,8 @@ class License < Sequel::Model

  one_to_many :license_comments

+  def getLink()
+    return "/license/#{self.id}"
+  end
+
 end
--- a/lib/routes.rb
+++ b/lib/routes.rb
@ -5,3 +5,5 @@ require_relative 'routes/item.rb'
 require_relative 'routes/license.rb'

 require_relative 'routes/search.rb'
+
+require_relative 'routes/ip_tracker.rb'
--- a/lib/routes/ip_tracker.rb
+++ b/lib/routes/ip_tracker.rb
@ -0,0 +1,38 @@
+require 'ipaddr'
+
+namespace '/ip-tracker' do
+
+  get '' do
+    ip_addresses = IpAddress.all()
+    ip_addresses.sort! { |a,b| IPAddr.new( a.address ) <=> IPAddr.new( b.address ) } 
+
+    erb :'ip/ip-tracker', :locals => {
+      :title => 'IP Tracker',
+      :ip_addresses => ip_addresses
+    }
+  end
+
+  get '/add' do
+    erb :'ip/add', :locals => {
+      :title => 'Add IP Address'
+    }
+  end
+
+  post '/add' do
+    ip = IpAddress.create(
+      address: params[:ip_address],
+      dns_name: params[:ip_dns],
+      comment: params[:ip_comment]
+    )
+
+    redirect '/ip-tracker'
+  end
+
+  get '/delete/:ip_id' do
+    ip = IpAddress.where(id: params[:ip_id]).first()
+    ip.delete()
+
+    redirect '/ip-tracker'
+  end
+
+end
--- a/lib/routes/search.rb
+++ b/lib/routes/search.rb
@ -4,10 +4,11 @@ namespace '/search' do
    items = Item.where(Sequel.ilike(:name, "%#{search_parameter}%")).all()
    licenses = License.where(Sequel.ilike(:name, "%#{search_parameter}%")).all()

+    results = items.concat(licenses)
+
    erb :'search/list', :locals => {
      :title => 'Search Results',
-      :items => items,
-      :licenses => licenses,
+      :results => results,
      :query => search_parameter
    }
  end
--- a/package-lock.json
+++ b/package-lock.json
@ -11,6 +11,7 @@
      "devDependencies": {
        "grunt": "^1.5.3",
        "grunt-cli": "^1.4.3",
+        "grunt-contrib-coffee": "^2.1.0",
        "grunt-contrib-sass": "^2.0.0",
        "grunt-contrib-watch": "^1.1.0",
        "sass": "^1.55.0"
@ -192,6 +193,19 @@
        "fsevents": "~2.3.2"
      }
    },
+    "node_modules/coffeescript": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/coffeescript/-/coffeescript-2.7.0.tgz",
+      "integrity": "sha512-hzWp6TUE2d/jCcN67LrW1eh5b/rSDKQK6oD6VMLlggYVUUFexgTH9z3dNYihzX4RMhze5FTUsUmOXViJKFQR/A==",
+      "dev": true,
+      "bin": {
+        "cake": "bin/cake",
+        "coffee": "bin/coffee"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/color-convert": {
      "version": "1.9.3",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@ -640,6 +654,24 @@
        "nopt": "bin/nopt.js"
      }
    },
+    "node_modules/grunt-contrib-coffee": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/grunt-contrib-coffee/-/grunt-contrib-coffee-2.1.0.tgz",
+      "integrity": "sha512-lgP+pPY3mHl+gqAU0T+7BcocBWu0FyeeJnAG/iIp2I0GPa5LvZJ7Wqga6QwKQtQCTs+1gPEa12nuap9Lj08lhw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "coffeescript": "^2.3.2",
+        "lodash": "^4.17.11",
+        "uri-path": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "peerDependencies": {
+        "grunt": ">=0.4.5"
+      }
+    },
    "node_modules/grunt-contrib-sass": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/grunt-contrib-sass/-/grunt-contrib-sass-2.0.0.tgz",
@ -1679,6 +1711,15 @@
      "integrity": "sha512-VE0SOVEHCk7Qc8ulkWw3ntAzXuqf7S2lvwQaDLRnUeIEaKNQJzV6BwmLKhOqT61aGhfUMrXeaBk+oDGCzvhcug==",
      "dev": true
    },
+    "node_modules/uri-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/uri-path/-/uri-path-1.0.0.tgz",
+      "integrity": "sha512-8pMuAn4KacYdGMkFaoQARicp4HSw24/DHOVKWqVRJ8LhhAwPPFpdGvdL9184JVmUwe7vz7Z9n6IqI6t5n2ELdg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
    "node_modules/util-deprecate": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@ -1881,6 +1922,12 @@
        "readdirp": "~3.6.0"
      }
    },
+    "coffeescript": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/coffeescript/-/coffeescript-2.7.0.tgz",
+      "integrity": "sha512-hzWp6TUE2d/jCcN67LrW1eh5b/rSDKQK6oD6VMLlggYVUUFexgTH9z3dNYihzX4RMhze5FTUsUmOXViJKFQR/A==",
+      "dev": true
+    },
    "color-convert": {
      "version": "1.9.3",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@ -2229,6 +2276,18 @@
        }
      }
    },
+    "grunt-contrib-coffee": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/grunt-contrib-coffee/-/grunt-contrib-coffee-2.1.0.tgz",
+      "integrity": "sha512-lgP+pPY3mHl+gqAU0T+7BcocBWu0FyeeJnAG/iIp2I0GPa5LvZJ7Wqga6QwKQtQCTs+1gPEa12nuap9Lj08lhw==",
+      "dev": true,
+      "requires": {
+        "chalk": "^2.4.2",
+        "coffeescript": "^2.3.2",
+        "lodash": "^4.17.11",
+        "uri-path": "^1.0.0"
+      }
+    },
    "grunt-contrib-sass": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/grunt-contrib-sass/-/grunt-contrib-sass-2.0.0.tgz",
@ -3013,6 +3072,12 @@
        }
      }
    },
+    "uri-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/uri-path/-/uri-path-1.0.0.tgz",
+      "integrity": "sha512-8pMuAn4KacYdGMkFaoQARicp4HSw24/DHOVKWqVRJ8LhhAwPPFpdGvdL9184JVmUwe7vz7Z9n6IqI6t5n2ELdg==",
+      "dev": true
+    },
    "util-deprecate": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
--- a/package.json
+++ b/package.json
@ -26,6 +26,7 @@
  "devDependencies": {
    "grunt": "^1.5.3",
    "grunt-cli": "^1.4.3",
+    "grunt-contrib-coffee": "^2.1.0",
    "grunt-contrib-sass": "^2.0.0",
    "grunt-contrib-watch": "^1.1.0",
    "sass": "^1.55.0"
--- a/raven.rb
+++ b/raven.rb
@ -26,6 +26,7 @@ require_relative 'lib/models/item.rb'
 require_relative 'lib/models/item_comment.rb'
 require_relative 'lib/models/license.rb'
 require_relative 'lib/models/license_comment.rb'
+require_relative 'lib/models/ip_address.rb'

 # Load helper functions
 require_relative 'lib/helpers.rb'
--- a/views/ip/add.erb
+++ b/views/ip/add.erb
@ -0,0 +1,32 @@
+<div class="row">
+  <div class="twelve columns">
+    <h1>Add new IP address</h1>
+  </div>
+</div>
+
+<div class="row">
+  <div class="twelve columns">
+    <form action="/ip-tracker/add" method="POST" class="u-full-width">
+      <div class="row">
+        <div class="six columns">
+          <label for="ip_address">IP address:</label>
+          <input class="u-full-width" type="text" placeholder="192.168.1.20" id="ip_address" name="ip_address">
+        </div>
+
+        <div class="six columns">
+          <label for="ip_dns">DNS name:</label>
+          <input class="u-full-width" type="text" placeholder="test.example.com" id="ip_dns" name="ip_dns">
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="twelve columns">
+          <label for="ip_comment">Comments:</label>
+          <input class="u-full-width" type="text" placeholder="My thoughts on this address..." id="ip_comment" name="ip_comment">
+        </div>
+      </div>
+
+      <input class="button-primary u-full-width" type="submit" value="Submit">
+    </form>
+  </div>
+</div>
--- a/views/ip/ip-tracker.erb
+++ b/views/ip/ip-tracker.erb
@ -0,0 +1,31 @@
+<div class="row">
+  <div class="twelve columns">
+    <% if ip_addresses.length > 0 %>
+      <p><a href="/ip-tracker/add">Add new address</a></p>
+      <table class="u-full-width">
+        <thead>
+          <tr>
+            <th>Address</th>
+            <th>DNS Name</th>
+            <th>Comments</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <% ip_addresses.each do |ip| %>
+            <tr>
+              <td><%= ip.address %></td>
+              <td><%= ip.dns_name %></td>
+              <td><%= ip.comment %></td>
+              <td>
+                <a href="/ip-tracker/delete/<%= ip.id %>"><i class="fa-solid fa-trash"></i></a>
+              </td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    <% else %>
+      <p>There are no IP addresses to show at this time. Trying <a href="/ip-tracker/add">adding some</a>.</p>
+    <% end %>
+  </div>
+</div>
--- a/views/layout.erb
+++ b/views/layout.erb
@ -8,10 +8,13 @@
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
  <link rel="stylesheet" href="/css/kraken.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
+  <script src="/js/gargoyle.js"></script>
 </head>
 <body>
  <!-- Main navigation -->
  <%= erb :'layout/navbar', :locals => locals %>
+  <!-- Mobile navigatin -->
+  <%= erb :'layout/mobile_navbar', :locals => locals %>

  <!-- Inventory search/actions bar -->
  <%= erb :'layout/actions', :locals => locals %>
--- a/views/layout/mobile_navbar.erb
+++ b/views/layout/mobile_navbar.erb
@ -0,0 +1,9 @@
+<nav id="mobile-nav">
+  <span class="u-text-centered"><i id="mobile-nav-toggle" class="fa-solid fa-bars"></i></span>
+  <ul>
+    <li><a href="/">Dashboard <i class="fa-solid fa-gauge"></i></a></li>
+    <li><a href="/item/list">Items <i class="fa-solid fa-desktop"></i></a></li>
+    <li><a href="/license/list">Licenses <i class="fa-solid fa-floppy-disk"></i></a></li>
+    <li><a href="/ip-tracker">IP Tracker <i class="fa-solid fa-network-wired"></i></a></li>
+  </ul>
+</nav>
--- a/views/layout/navbar.erb
+++ b/views/layout/navbar.erb
@ -1,8 +1,9 @@
 <nav id="main-nav">
-  <h3>Raven</h3>
+  <h3>Raven <i id="nav-toggle" class="fa-solid fa-bars"></i></h3>
  <ul>
-    <li><a href="/">Dashboard</a></li>
-    <li><a href="/item/list">Items</a></li>
-    <li><a href="/license/list">Licenses</a></li>
+    <li><a href="/">Dashboard <i class="fa-solid fa-gauge"></i></a></li>
+    <li><a href="/item/list">Items <i class="fa-solid fa-desktop"></i></a></li>
+    <li><a href="/license/list">Licenses <i class="fa-solid fa-floppy-disk"></i></a></li>
+    <li><a href="/ip-tracker">IP Tracker <i class="fa-solid fa-network-wired"></i></a></li>
  </ul>
 </nav>
--- a/views/search/list.erb
+++ b/views/search/list.erb
@ -1,25 +1,14 @@
 <div class="row">
  <div class="twelve columns">
-    <h4>Matching hardware:</h4>
-    <% if items.length > 0 %>
+    <h4>Matching inventory:</h4>
+    <% if results.length > 0 %>
      <ul class="u-full-width">
-        <% items.each do |r| %>
-          <li><a href="/item/<%= r.id %>"><%= r.name %></a></li>
+        <% results.each do |r| %>
+          <li><a href="<%= r.getLink() %>"><%= r.name %></a></li>
        <% end %>
      </ul>
    <% else %>
      <p>Sorry, nothing in your hardware inventory matches that search term.</p>
    <% end %>
-
-    <h4>Matching licenses:</h4>
-    <% if licenses.length > 0 %>
-      <ul class="u-full-width">
-        <% licenses.each do |r| %>
-          <li><a href="/item/<%= r.id %>"><%= r.name %></a></li>
-        <% end %>
-      </ul>
-    <% else %>
-      <p>Sorry, nothing in your license inventory matches that search term.</p>
-    <% end %>
  </div>
 </div>
Author	SHA1	Message	Date
Gregory Ballantine	2340dddd06	Added better mobile navigation	2023-01-17 02:15:00 -05:00
Gregory Ballantine	57c5fb30c6	Added ability to delete IP addresses	2022-12-22 13:08:35 -05:00
Gregory Ballantine	2b6a222bcf	Added functions to set/read cookies; added ability to make the collapsed nav sticky across refreshes	2022-12-22 13:03:08 -05:00
Gregory Ballantine	10345d5238	Added basic IP tracker functionality	2022-12-22 12:50:01 -05:00
Gregory Ballantine	97ced7d80e	Styled the navbar; allowed collapsing it to give the user more screen space	2022-12-18 23:31:43 -05:00
Gregory Ballantine	5139d8b492	Updated search page to consolidate results into one list	2022-12-17 23:43:26 -05:00