1 files changed, 126 insertions, 0 deletions
diff --git a/web/src/sidebar.tsx b/web/src/sidebar.tsx
new file mode 100644
index 0000000..a1b3ad7
--- /dev/null
+++ b/web/src/sidebar.tsx
@@ -0,0 +1,126 @@
+import $ from 'jquery';
+import * as JSX from './jsx';
+
+var interval = null;
+
+function cacheWeather( result: any ) {
+  const timestamp = new Date().getTime();
+
+  localStorage.setItem( "weather", JSON.stringify( result ) );
+  localStorage.setItem( "weather_timestamp", timestamp.toString() );
+}
+
+function getWeatherCache() {
+  const timestamp = localStorage.getItem( "weather_timestamp" );
+  if( !timestamp )
+    return null;
+
+  if( parseInt( timestamp ) + 60 * 60 * 1000 < new Date().getTime() ) {
+    localStorage.removeItem( "weather" );
+    localStorage.removeItem( "weather_timestamp" );
+    return null;
+  }
+
+  try {
+    const res = JSON.parse( localStorage.getItem( "weather" ) );
+    return res;
+  } catch( e ) {
+    console.log( e );
+    return null;
+  }
+}
+
+async function updateWeather() {
+  let weather = getWeatherCache();
+  if( !weather ) {
+    weather = await fetch(
+      "https://api.open-meteo.com/v1/forecast?latitude=35.0647937&longitude=137.1784597&current=temperature_2m,wind_speed_10m,relative_humidity_2m"
+    )
+
+    weather = await weather.json();
+    cacheWeather( weather );
+  }
+
+  $( "#temp" ).text( weather.current.temperature_2m );
+  $( "#wind" ).text( weather.current.wind_speed_10m );
+  $( "#humi" ).text( weather.current.relative_humidity_2m );
+
+  setTimeout( updateWeather, 60 * 60 * 1000 );
+}
+
+function Weather() {
+  setTimeout( updateWeather );
+  const weather = getWeatherCache();
+  if( weather && weather.current ) {
+    const temp = weather.current.temperature_2m;
+    const wind = weather.current.wind_speed_10m;
+    const humi = weather.current.relative_humidity_2m;
+    return <div id="weather">
+      <div class="sidebar-row"><h4>weather in </h4> <h4>愛知県、日本:</h4></div>
+      <div class="sidebar-row"><h4>temperature:</h4><h4><span id="temp">{temp.toString()} </span>°C</h4></div>
+      <div class="sidebar-row"><h4>wind speed:</h4><h4><span id="wind">{wind.toString()}</span>km/h</h4></div>
+      <div class="sidebar-row"><h4>humidity:</h4><h4><span id="humi">{humi.toString()}</span>%</h4></div>
+    </div>
+  }
+
+  return <div id="weather">
+    <div class="sidebar-row"><h4>weather in </h4> <h4>愛知県、日本:</h4></div>
+    <div class="sidebar-row"><h4>temperature:</h4><h4><span id="temp">--</span>°C</h4></div>
+    <div class="sidebar-row"><h4>wind speed:</h4><h4><span id="wind">--</span>km/h</h4></div>
+    <div class="sidebar-row"><h4>humidity:</h4><h4><span id="humi">--</span>%</h4></div>
+  </div>
+}
+
+export function Sidebar() {
+  if( interval == null ) {
+    interval = setInterval( () => {
+      $( "#time" ).text( new Date().toLocaleTimeString() );
+      $( "#date" ).text( new Date().toLocaleDateString() );
+    }, 1000 );
+  }
+
+  return <div id="sidebar">
+    <div><h3>information</h3></div>
+    <hr/>
+    <div class="sidebar-row"><h4>current time: </h4><h4><span id="time">{new Date().toLocaleTimeString()}</span></h4></div>
+    <div class="sidebar-row"><h4>today: </h4><h4><span id="date">{new Date().toLocaleDateString()}</span></h4></div>
+    <Weather />
+    <div style="margin-top: 15px"><h3>links</h3></div>
+    <hr/>
+    <div class="sidebar-row">
+      <h4>
+        <a class="nogradient" style="margin-bottom: 0" href="#" onclick={ () => JSX.navigate( "/" ) }>
+          homepage
+        </a>
+      </h4>
+    </div>
+    <div class="sidebar-row" style="margin-top: -18px">
+      <h4>
+        <a class="nogradient" href="#" onclick={ () => JSX.navigate( "/pkg" ) }>
+          slackware packages
+        </a>
+      </h4>
+    </div>
+    <div class="sidebar-row" style="margin-top: -18px">
+      <h4>
+        <a class="nogradient" href="#" onclick={ () => JSX.navigate( "/blog" ) }>
+          blog entries
+        </a>
+      </h4>
+    </div>
+    <div class="sidebar-row" style="margin-top: -18px">
+      <h4>
+        <a class="nogradient" href="https://steamcommunity.com/groups/networkheaven">
+          steam
+        </a>
+      </h4>
+    </div>
+    <div class="sidebar-row" style="margin-top: -18px">
+      <h4>
+        <a class="nogradient" href="https://git.networkheaven.net">
+          git
+        </a>
+      </h4>
+    </div>
+  </div>
+}