Jadugars · kronaemmanuel · Jan 24, 2021 · Jan 25, 2021 · Mar 1, 2021 · Mar 1, 2021
diff --git a/components/Avatar.js b/components/Avatar.js
@@ -3,13 +3,13 @@ import { faCog } from "@fortawesome/free-solid-svg-icons";
 
 function Avatar() {
   return (
-    <div class="relative w-10 h-10">
+    <div className="relative w-10 h-10">
       <img
-        class="inline-block object-center h-10 w-10 rounded-full transform transition duration-200 ease-in-out hover:scale-110"
+        className="inline-block object-center h-10 w-10 rounded-full transform transition duration-200 ease-in-out hover:scale-110"
         src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
         alt=""
       />
-      <div class="absolute bottom-0 right-0 h-2 w-2 my-2 mr-1">
+      <div className="absolute bottom-0 right-0 h-2 w-2 my-2 mr-1">
         <FontAwesomeIcon
           icon={faCog}
           className="text-white text-lg border-green-800 border-2 rounded-lg bg-green-800"

diff --git a/components/TimePicker.js b/components/TimePicker.js
@@ -0,0 +1,34 @@
+import "date-fns";
+import React from "react";
+import DateFnsUtils from "@date-io/date-fns";
+import {
+  MuiPickersUtilsProvider,
+  KeyboardTimePicker,
+  KeyboardDatePicker,
+} from "@material-ui/pickers";
+
+export default function TimePicker() {
+  // The first commit of Material-UI
+  const [selectedDate, setSelectedDate] = React.useState(
+    new Date("2014-08-18T21:11:54")
+  );
+
+  const handleDateChange = (date) => {
+    setSelectedDate(date);
+  };
+
+  return (
+    <MuiPickersUtilsProvider utils={DateFnsUtils}>
+      <KeyboardTimePicker
+        margin="normal"
+        id="time-picker"
+        label="Time picker"
+        value={selectedDate}
+        onChange={handleDateChange}
+        KeyboardButtonProps={{
+          "aria-label": "change time",
+        }}
+      />
+    </MuiPickersUtilsProvider>
+  );
+}
diff --git a/components/calendar.js b/components/calendar.js
@@ -25,9 +25,12 @@ function TasksDay(props) {
         <p className="pl-1 text-xs text-gray-500">{dayDescription}</p>
       </div>
       <ul className="max-w-lg pt-2">
-        {props.events.map((event) => {
+        {props.events.map((event, i) => {
           return (
-            <li className="flex justify-between items-center py-2">
+            <li
+              className="flex justify-between items-center py-2"
+              key={`task${i}`}
+            >
               <label className="flex items-center">
                 <input
                   type="checkbox"
@@ -36,8 +39,12 @@ function TasksDay(props) {
                 <span className="ml-2 text-gray-700">{event.title}</span>
               </label>
               <div className="flex items-baseline">
-                {event.tags.map((tag) => {
-                  return <p className="pl-2 text-sm text-gray-500">{tag}</p>;
+                {event.tags.map((tag, i) => {
+                  return (
+                    <p className="pl-2 text-sm text-gray-500" key={`tag${i}`}>
+                      {tag}
+                    </p>
+                  );
                 })}
                 <div className="ml-2 h-3 w-3 rounded-full bg-gray-300"></div>
               </div>
@@ -112,8 +119,14 @@ function Calendar() {
 
   return (
     <div className="p-6 space-y-8">
-      {eventDays.map((eventDay) => {
-        return <TasksDay day={eventDay.day} events={eventDay.events} />;
+      {eventDays.map((eventDay, i) => {
+        return (
+          <TasksDay
+            day={eventDay.day}
+            events={eventDay.events}
+            key={`taskDay${i}`}
+          />
+        );
       })}
     </div>
   );

diff --git a/components/userInput.js b/components/userInput.js
@@ -0,0 +1,155 @@
+import React, { useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faTimes, faPlusCircle } from "@fortawesome/free-solid-svg-icons";
+import DatePicker from "react-datepicker";
+import axios from "axios";
+
+import "react-datepicker/dist/react-datepicker.css";
+
+function UserInput() {
+  const [text, setText] = useState("");
+  const [dialogIsOpen, setDialogIsOpen] = useState(false);
+  const [startDate, setStartDate] = useState(new Date());
+  const [endDate, setEndDate] = useState(new Date());
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    axios({
+      method: "post",
+      url: "http://localhost:5000/send",
+      headers: { "content-type": "application/json" },
+      data: {
+        text: text,
+      },
+    })
+      .then((result) => {
+        console.log(result.data);
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  };
+
+  return (
+    <div className="mx-auto mt-4">
+      <div
+        onClick={(e) => setDialogIsOpen(true)}
+        className="mx-auto max-w-lg text-gray-400 mt-1 px-4 py-3 flex justify-between w-full shadow-md sm:text-sm border-gray-300 rounded-md"
+      >
+        <p>Start typing to add a new todo</p>
+        <FontAwesomeIcon icon={faPlusCircle} />
+      </div>
+      {dialogIsOpen && (
+        <div className="absolute inset-0 flex justify-center items-center">
+          <div className="bg-white rounded-md z-10 shadow-lg p-4 min-w-1/2">
+            <form className="space-y-3">
+              <div className="flex items-center space-x-2">
+                <div className="flex-grow">
+                  <label
+                    htmlFor="first_name"
+                    className="sr-only block text-sm font-medium text-gray-700"
+                  >
+                    Todo Item:
+                  </label>
+                  <input
+                    type="text"
+                    className="mt-1 px-2 py-3 focus:ring-green-500 border border-gray-300 shadow-sm rounded-lg focus:border-green-500 block w-full sm:text-sm"
+                    placeholder="Start typing to add a new todo"
+                    value={text}
+                    onChange={(e) => setText(e.target.value)}
+                    required
+                  />
+                </div>
+                <button onClick={(e) => setDialogIsOpen(false)}>
+                  <span className="sr-only">Close</span>
+                  <FontAwesomeIcon icon={faTimes} />
+                </button>
+              </div>
+              <div className="flex items-center">
+                <p>in</p>
+                <div className="ml-2">
+                  <label
+                    htmlFor="country"
+                    className="sr-only block text-sm font-medium text-gray-700"
+                  >
+                    Select Timetable:
+                  </label>
+                  <select
+                    id="country"
+                    name="country"
+                    autoComplete="country"
+                    className="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-lg shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm"
+                  >
+                    <option>Personal Timetable</option>
+                    <option>2018-A</option>
+                    <option>AKS</option>
+                  </select>
+                </div>
+              </div>
+              <div className="flex items-center space-x-2">
+                <p>on</p>
+                <div>
+                  <label className="sr-only" htmlFor="startDate">
+                    Date:
+                  </label>
+                  <DatePicker
+                    name="startDate"
+                    selected={startDate}
+                    onChange={(date) => setStartDate(date)}
+                    className="mt-1 px-3 py-2 border border-gray-300 rounded-lg shadow-sm "
+                  />
+                </div>
+              </div>
+              <div className="flex items-center space-x-2">
+                <p>from</p>
+                <div>
+                  <label className="sr-only" htmlFor="startTime">
+                    Start Time:
+                  </label>
+                  <input
+                    type="time"
+                    id="startTime"
+                    className="mt-1 px-3 py-2 border border-gray-300 rounded-lg shadow-sm"
+                  />
+                </div>
+                <p>to</p>
+                <div>
+                  <label className="sr-only" htmlFor="endTime">
+                    End Time:
+                  </label>
+                  <input
+                    type="time"
+                    id="endTime"
+                    className="mt-1 px-3 py-2 border border-gray-300 rounded-lg shadow-sm"
+                  />
+                </div>
+              </div>
+              <div>
+                <textarea
+                  id="description"
+                  name="description"
+                  rows="3"
+                  className="mt-1 px-3 py-2 border border-gray-300 rounded-lg shadow-sm w-full"
+                  placeholder="[email protected]"
+                ></textarea>
+              </div>
+              <button
+                type="submit"
+                className="rounded-md float-right px-3 py-2 mt-1 bg-green-500 text-white font-semibold"
+                onClick={(e) => handleSubmit(e)}
+              >
+                Create Task
+              </button>
+            </form>
+          </div>
+          <div
+            className="absolute inset-0 bg-gray-100 bg-opacity-75 transition-opacity"
+            aria-hidden="true"
+          ></div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default UserInput;
diff --git a/package.json b/package.json
@@ -13,11 +13,13 @@
     "@fortawesome/free-solid-svg-icons": "^5.15.1",
     "@fortawesome/react-fontawesome": "^0.1.13",
     "autoprefixer": "^9",
+    "axios": "^0.21.1",
     "dayjs": "^1.10.3",
     "firebase": "^8.0.2",
     "formik": "^2.2.5",
     "next": "10.0.2",
     "react": "17.0.1",
+    "react-datepicker": "^3.4.1",
     "react-dom": "17.0.1",
     "tailwindcss": "^2.0.1-compat",
     "yup": "^0.30.0"

diff --git a/pages/calendar.js b/pages/calendar.js
@@ -1,11 +1,21 @@
 import Layout from "../components/layout.js";
 import Calendar from "../components/calendar.js";
 
+import { useState } from "react";
+import UserInput from "../components/userInput.js";
+
+
 function calendarPage() {
   return (
-    <Layout>
-      <Calendar/>
-    </Layout>
+    <div className="flex ">
+      <div>
+        <Navbar subPage={subPage} setSubPage={setSubPage} />
+      </div>
+      <div className="flex-grow relative">
+        <UserInput />
+        <Calendar />
+      </div>
+    </div>
   );
 }
 

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -9,6 +9,13 @@ module.exports = {
       colors: {
         "accent-1": "#333",
       },
+      minWidth: {
+        0: "0",
+        "1/4": "25%",
+        "1/2": "50%",
+        "3/4": "75%",
+        full: "100%",
+      },
     },
   },
   variants: {