index.html

<!DOCTYPE html> 
<html lang="en" class = "h-full bg-gray-50">
  <head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

    <link rel="shortcut icon" href="favicon.svg" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin=""/>
    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
    <link rel="stylesheet" href="tailwind-dist.css">        
  </head> 


  <body class="h-full">

    <div x-data="{ tab: 'map', mobileMenuOpen: false, showLogin: true,}">

      <div x-show = "!showLogin" class="">

        <nav class="bg-white border-b border-gray-200">
          <div class="max-w-7xl mx-auto px-4 lg:px-6 lg:px-8">
            <div class="hidden lg:flex justify-between h-16">
              <div class="flex">
                <div class="hidden lg:-my-px lg:ml-6 lg:flex lg:space-x-8">
                  <!-- Current: "border-blue-500 text-gray-900", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
                  <a href="#" :class="{ 'active border-blue-500 text-gray-900': tab === 'map', 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700': tab !== 'map' }" x-on:click.prevent="tab = 'map'" class="border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium" aria-current="page"> Map </a>
                  <a href="#" :class="{ 'active border-blue-500 text-gray-900': tab === 'temperature_chart', 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700': tab !== 'temperature_chart' }" x-on:click.prevent="tab = 'temperature_chart'" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> Temperture Chart </a>
                  <a href="#" :class="{ 'active border-blue-500 text-gray-900': tab === 'location_chart', 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700': tab !== 'location_chart' }" x-on:click.prevent="tab = 'location_chart'" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> Location Chart </a>                
                  <a href="#" :class="{ 'active border-blue-500 text-gray-900': tab === 'debug', 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700': tab !== 'debug' }" x-on:click.prevent="tab = 'debug'" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> Debug </a>
                  <a href="#" :class="{ 'active border-blue-500 text-gray-900': tab === 'settings', 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700': tab !== 'settings' }" x-on:click.prevent="tab = 'settings'" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> Settings </a>
                </div>
              </div>
              <div class="hidden lg:ml-6 lg:flex lg:items-center">


                <!-- Profile dropdown -->
                <div x-data="{ isOpen: false }" @click.outside="isOpen = false" class="ml-3 relative">
                  <div>
                    <button type="button" @click="isOpen = !isOpen" class="max-w-xs bg-white flex items-center text-sm rounded-full" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
                      <span class="sr-only">Open user menu</span>
                      <i class="login_icon fa-solid fa-2x fa-user-pilot text-red-500"></i>
                    </button>
                  </div>

                  <div 
                    x-show="isOpen"
                    x-transition:enter="transition ease-out duration-200"
                    x-transition:enter-start="transform opacity-0 scale-95"
                    x-transition:enter-end="transform opacity-100 scale-100"
                    x-transition:leave="transition ease-in duration-75"
                    x-transition:leave-start="transform opacity-100 scale-100"
                    x-transition:leave-end="transform opacity-0 scale-95"
                    class="z-20 origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">

                    <a href="#"  @click.prevent="showLogin = true, mqtt_logout()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem" tabindex="-1" id="user-menu-item-2"> Log out </a>

                  </div>
                </div>
              </div>


            </div>
          </div>


          <div class="-mr-2 flex items-center lg:hidden absolute z-20 top-4 right-8">
            <!-- Mobile menu button -->
            <button type="button" @click="mobileMenuOpen = !mobileMenuOpen" class="bg-white inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100" aria-controls="mobile-menu" aria-expanded="false">
              <span class="sr-only">Open main menu</span>
                <!-- Heroicon name: outline/menu -->
  <!--             <svg  :class="{ 'hidden' : mobileMenuOpen , 'block' : !mobileMenuOpen}" class="h-6 w-6 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
              </svg> -->
              <i :class="{ 'hidden' : mobileMenuOpen , 'block' : !mobileMenuOpen}" class="login_icon fa-solid fa-2x fa-user-pilot text-red-500"></i>
                <!-- Heroicon name: outline/x -->
              <svg  :class="{ 'block' : mobileMenuOpen , 'hidden' : !mobileMenuOpen}" class="h-6 w-6 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>


          <!-- Mobile menu, show/hide based on mobileMenuOpen state. -->
          <div :class="{ 'hidden' : !mobileMenuOpen}" class="lg:hidden" id="mobile-menu">
            <div class="pt-2 pb-3 space-y-1">
              <!-- Current: "bg-blue-50 border-blue-500 text-blue-700", Default: "border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800" -->

              <a href="#" :class="{ 'active bg-blue-50 border-blue-500 text-blue-700': tab === 'map', 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800': tab !== 'map' }" x-on:click.prevent="tab = 'map', mobileMenuOpen= false" class="block pl-3 pr-4 py-2 border-l-4 text-base font-medium" aria-current="page"> Map </a>
              <a href="#" :class="{ 'active bg-blue-50 border-blue-500 text-blue-700': tab === 'temperature_chart', 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800': tab !== 'temperature_chart' }" x-on:click.prevent="tab = 'temperature_chart', mobileMenuOpen= false" class="block pl-3 pr-4 py-2 border-l-4 text-base font-medium"> Temperature Chart </a>
              <a href="#" :class="{ 'active bg-blue-50 border-blue-500 text-blue-700': tab === 'location_chart', 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800': tab !== 'location_chart' }" x-on:click.prevent="tab = 'location_chart', mobileMenuOpen= false" class="block pl-3 pr-4 py-2 border-l-4 text-base font-medium"> Location Chart </a>            
              <a href="#" :class="{ 'active bg-blue-50 border-blue-500 text-blue-700': tab === 'debug', 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800': tab !== 'debug' }" x-on:click.prevent="tab = 'debug', mobileMenuOpen= false" class="block pl-3 pr-4 py-2 border-l-4 text-base font-medium"> Debug </a>
              <a href="#" :class="{ 'active bg-blue-50 border-blue-500 text-blue-700': tab === 'settings', 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800': tab !== 'settings' }" x-on:click.prevent="tab = 'settings', mobileMenuOpen= false" class="block pl-3 pr-4 py-2 border-l-4 text-base font-medium"> Settings </a>
            </div>
            <div class="pt-1 pb-3 border-t border-gray-200">

              <div class="mt-3 space-y-1">
                <a href="#" @click.prevent="showLogin = true, mqtt_logout()" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100"> Log out </a>
              </div>
            </div>
          </div>
        </nav>


        <div class="py-0">
          <header>
          </header>

            <div class="mx-auto lg:px-0 lg:px-8 h-screen lg:h-[55rem] w-full lg:max-w-7xl">

              <div class="px-4 py-1 lg:px-0 h-full">

                <div x-show="tab === 'map'" class="lg:border-4 lg:border-gray-200 lg:rounded-lg h-full">

                  <!-- <div class="absolute z-20 inset-x-0 top-20 h-16 flex items-center justify-center"> -->
                  <div :class="{ 'hidden' : mobileMenuOpen}" class="absolute inset-x-0 top-4 lg:top-20 h-16 flex items-center justify-center">
                    <div class = "text-3xl flex flex-row bg-white gap-y-4 gap-x-10 px-8 pt-3 pb-1 rounded-md z-20">


                      <div class = "flex flex-col">
                        <h3 class="text-xs mb-2 uppercase"> Voltage</h3>
                        <span class="text-2xl"id="battery_voltage"> </span>
                      </div>

                      <div  class = "flex flex-col">
                        <h3 class="text-xs mb-2 uppercase"> Temp</h3>
                        <span class="text-2xl"id="controller_temp"></span>
                      </div>

                      <div  class = "flex flex-col">
                        <h3 class="text-xs mb-2 uppercase"> RPM</h3>
                        <span class="text-2xl"id="rpm"></span>
                      </div>

                      <div class = "flex flex-col">
                        <h3 class="text-xs mb-2 uppercase"> Trip</h3>
                        <span class="text-2xl"id="current_trip"> </span>
                      </div>

                      <div class = "flex flex-col">
                        <h3 class="text-xs mb-2 uppercase"> Speed</h3>
                        <span class="text-2xl"id="gps_speed"> </span>
                      </div>  

                    </div>
                  </div>      

                  <div id="map" class="h-full z-10"> </div>

         
                </div>


                 <div x-show="tab === 'temperature_chart'" class="h-full">
                  <!-- <h3></h3> -->
                  <div class = "pt-5 h-full">
                    <canvas id="temperatureChart"></canvas>
                  </div>

                </div>


                 <div x-show="tab === 'location_chart'" class="h-full">
                  <!-- <h3></h3> -->
                  <div class = "pt-5 h-full">
                    <canvas id="locationChart"></canvas>
                    <div id="location"></div>    
                  </div> 

                </div>


                 <div x-show="tab === 'debug'" class="h-full">
                  <div class = "pt-5 h-full">
                    <p class = "text-2xl font-bold mb-4" >Message Logs</p>
                    <p id = "debug_logs"></p>  
                  </div> 
                </div>


                 <div x-show="tab === 'settings'" class="h-full">
                  <h3>Settings</h3>
                  <h4>Plot location of this person</h4>
                  <select id="locationUser" onchange="locationUserChanged()">
                    <option value="">[My Location]</option>
                  </select>
                    <p>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus
                      facilisis tristique. Lorem ipsum dolor sit amet, consectetur adipiscing
                      elit. 
                    </p>  
                </div>                            


              </div>


            </div>

        </div>
      </div>


      <div x-show="showLogin" class="min-h-full flex flex-col justify-center py-2 lg:py-12  sm:px-6 lg:px-8">

        <div class="mt-8 sm:mx-auto sm:w-full lg:max-w-lg">
          <div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
            <form class="space-y-6" action="#" method="POST">
              <div>
                <label for="user" class="block text-sm font-medium text-gray-700"> User </label>
                <div class="mt-1">
                  <input id="username" name="user" type="user" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                </div>
              </div>

              <div>
                <label for="password" class="block text-sm font-medium text-gray-700"> Password </label>
                <div class="mt-1">
                  <input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                </div>
              </div>

                <button type="submit" @click.prevent="showLogin = mqtt_login()" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Sign in</button>
              </div>
            </form>


          </div>
        </div>
      </div>

    </div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>
    <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://kit.fontawesome.com/fdd9f11db9.js" crossorigin="anonymous"></script>
    <script src="dashboard.js"></script>

  </body>

</html>