#103 WIP

jcolson · Mar 11, 2021 · 5a467d7 · 5a467d7
1 parent d5d238a
commit 5a467d7
Show file tree

Hide file tree

Showing 5 changed files with 157 additions and 20 deletions.
diff --git a/http_root/css/site.css b/http_root/css/site.css
@@ -1,9 +1,71 @@
+*,
+*:before,
+*:after {
+    box-sizing: border-box;
+}
+
+input[type=text] {
+    width: 100%;
+    resize: vertical;
+    padding: 10px;
+    margin: 10px 0;
+    border: 0;
+    box-shadow: 0 0 15px 4px rgba(0, 0, 0, 0.06);
+    border-radius: 10px;
+}
+
+input[type=date] {
+    width: 100%;
+    resize: vertical;
+    padding: 10px;
+    margin: 10px 0;
+    border: 0;
+    box-shadow: 0 0 15px 4px rgba(0, 0, 0, 0.06);
+    border-radius: 10px;
+}
+
+input[type=time] {
+    width: 100%;
+    resize: vertical;
+    padding: 10px;
+    margin: 10px 0;
+    border: 0;
+    box-shadow: 0 0 15px 4px rgba(0, 0, 0, 0.06);
+    border-radius: 10px;
+}
+
+input[type=textarea] {
+    width: 100%;
+    resize: vertical;
+    padding: 15px;
+    border-radius: 15px;
+    border: 0;
+    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.06);
+    height: 150px;
+}
+
+input[type=submit] {
+    /* remove default behavior */
+    appearance: none;
+    -webkit-appearance: none;
+
+    /* usual styles */
+    padding: 10px;
+    border: none;
+    background-color: #3F51B5;
+    color: #fff;
+    font-weight: 600;
+    border-radius: 5px;
+    width: 100%;
+
+}
+
 .header {
     text-align: center;
     font-family: Arial, Helvetica, sans-serif;
     font-size: x-large;
     font-weight: bold;
-    height: 130px;
+    height: 150px;
     width: 100%;
     padding-left: 1px;
     padding-top: 1px;
@@ -16,7 +78,7 @@
     font-family: Arial, Helvetica, sans-serif;
     font-size: medium;
     font-weight: bold;
-    height: 70px;
+    height: 80px;
     width: 100%;
     padding-left: 1px;
     padding-top: 1px;
@@ -30,15 +92,21 @@
 }
 
 #timezones-name {
-    background-image: url('/images/searchicon.png'); /* Add a search icon to input */
-    background-position: 10px 12px; /* Position the search icon */
-    background-repeat: no-repeat; /* Do not repeat the icon image */
+    background-image: url('/images/searchicon.png');
+    /* Add a search icon to input */
+    background-position: 10px 12px;
+    /* Position the search icon */
+    background-repeat: no-repeat;
+    /* Do not repeat the icon image */
     /* width: 100%; Full-width */
     /* font-size: 16px; Increase font-size */
-    padding: 12px 20px 12px 40px; /* Add some padding */
-    border: 1px solid #ddd; /* Add a grey border */
-    margin-bottom: 12px; /* Add some space below the input */
-  }
+    padding: 12px 20px 12px 40px;
+    /* Add some padding */
+    border: 1px solid #ddd;
+    /* Add a grey border */
+    margin-bottom: 12px;
+    /* Add some space below the input */
+}
 
 .header-text {
     font-size: small;
@@ -50,30 +118,49 @@
 }
 
 .thebody {
+    /* text-align: center; */
+    font-family: Arial, Helvetica, sans-serif;
+    padding: 10px;
+    /* font-size: medium;
+    font-weight: bold;
+    height: 70px;
+    width: 100%;
+    padding-left: 1px;
+    padding-top: 1px;
+    padding-bottom: 15px; */
+    background-color: #4CAF50;
+}
+
+.tzbody {
     overflow-y: scroll;
     font-family: Arial, Helvetica, sans-serif;
     border-collapse: collapse;
     width: 250px;
     top: 270px;
-    left:0px;
-    right:0px;
-    bottom:0px;
-    position:absolute;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    position: absolute;
     text-align: center;
     margin-left: auto;
     margin-right: auto;
 }
 
-.thebody td, .thebody th {
+.tzbody td,
+.tzbody th {
     border: 1px solid #ddd;
     padding: 8px;
 }
 
-.thebody tr:nth-child(even){background-color: #f2f2f2;}
+.tzbody tr:nth-child(even) {
+    background-color: #f2f2f2;
+}
 
-.thebody tr:hover {background-color: #ddd;}
+.tzbody tr:hover {
+    background-color: #ddd;
+}
 
-.thebody th {
+.tzbody th {
     padding-top: 12px;
     padding-bottom: 12px;
     background-color: #4CAF50;

diff --git a/http_views/events.pug b/http_views/events.pug
@@ -0,0 +1,25 @@
+//- index.pug
+extends layout.pug
+
+block content
+    h1 Welcome to D&amp;D Vault Bot
+    .thebody
+        form(action=`${Config.httpServerURL}/events/set`, method="POST")
+            p
+                | Title:
+                input(type='text' name='title', placeholder='Title', value=`${event?event.title:''}`)
+                | DM/GM:
+                input(type='text' name='dm', placeholder='DM/GM', value=`${event?event.dm:''}`)
+                | Duration (in hours):
+                input(type='text' name='duration_hours', placeholder='Duration (in hours)', value=`${event?event.duration_hours:''}`)
+                | Start (Date):
+                input(type='date' name='date', value=`${event?event.date_time:''}`)
+                | Start (Time):
+                input(type='time' name='time', value=`${event?event.date_time:''}`)
+                | Number of Players:
+                input(type='text' name='number_player_slots', placeholder='Number of Players', value=`${event?event.number_player_slots:''}`)
+                | Campaign:
+                input(type='text' name='campaign', placeholder='Campaign', value=`${event?event.campaign:''}`)
+                | Description:
+                input(type='textarea' name='description', placeholder='Description', value=`${event?event.description:''}`)
+            input(type='submit' value='Submit')
diff --git a/http_views/includes/menu.pug b/http_views/includes/menu.pug
@@ -9,4 +9,6 @@
     a(href= '/timezones') Timezones
     if discordMe
         |&nbsp;|&nbsp;
-        a(href= '/calendar?userID='+discordMe.id) Calendar ICS
+        a(href= '/events') Events
+        |&nbsp;|&nbsp;
+        a(href= '/calendar?userID='+discordMe.id) Calendar ICS
diff --git a/http_views/timezones.pug b/http_views/timezones.pug
@@ -3,7 +3,7 @@ extends layout.pug
 
 block content
     .top
-        input(name="name" id="timezones-name")
+        input(name='name' id='timezones-name' type='text')
         .header-text
             .
                 Click a row below to set your timezone.
@@ -26,7 +26,7 @@ block content
                 document.getElementById('timezones-info').innerHTML='Your timezone has been set to &quot;'+timezone+'&quot;';
             }
         }
-    .thebody
+    .tzbody
         table(id="timezones")
             tr: th Timezone List
             -

diff --git a/index.js b/index.js
@@ -58,6 +58,7 @@ const ROUTE_POSTOAUTH = "/postoauth";
 const ROUTE_CALENDAR = "/calendar";
 const ROUTE_TIMEZONES = "/timezones";
 const ROUTE_TIMEZONESSET = "/timezones/set";
+const ROUTE_EVENTS = "/events";
 
 let app = express();
 
@@ -171,6 +172,28 @@ let server = app
             response.end(error.message);
         }
     })
+    .get(ROUTE_EVENTS, function (request, response) {
+        try {
+            console.log('serving ' + ROUTE_EVENTS);
+            if (!request.session.discordMe) {
+                request.query.destination = ROUTE_EVENTS;
+                response.redirect(url.format({
+                    pathname: grant.config.discord.prefix + "/discord",
+                    query: request.query,
+                }));
+            } else {
+                let requestUrl = new URL(request.url, `${request.protocol}://${request.headers.host}`);
+                // console.log(request.session.discordMe);
+                // let responseData = events.handleEventsRequest(requestUrl);
+                response.render('events', { title: 'Events', Config: Config, guildConfig: request.session.guildConfig, discordMe: request.session.discordMe })
+            }
+        } catch (error) {
+            console.error(error.message);
+            response.setHeader('Content-Type', 'text/html');
+            response.status(500);
+            response.end(error.message);
+        }
+    })
     .get(ROUTE_CALENDAR, async (request, response) => {
         try {
             console.log('serving ' + ROUTE_CALENDAR);