feature/show_event_day_view (#248)

* feature/show_event_day_view

Author: ADI-projects30

app/static/dayview.css

@@ -106,4 +106,27 @@ html {
   background-color: var(--borders-variant);
   border-radius: 50px;
   box-shadow: 1px 1px 2px #999;
+}
+
+.event-btn {
+    font-size: 0.625rem;
+    text-align: center;
+    color: #fff;
+    background-color:#30465D;
+    border-radius: 0.938rem;
+    border: 0.063rem solid #30465D;
+}
+
+.add-event-icon {
+    display: inline-block;
+}
+
+.plus_image {
+    width: 3rem;
+    height: 3rem;
+}
+
+.pb-1 {
+    width: 1.2rem;
+    height: 1.2rem;
 }

app/static/eventdisplay.js

@@ -0,0 +1,24 @@
+function scrollTo(element) {
+    window.scroll({
+      behavior: 'smooth',
+      left: 0,
+      top: element.offsetTop
+    });
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    const chosen_button = document.getElementsByClassName('event-btn');
+    for (let i = 0; i < chosen_button.length; i++) {
+        chosen_button[i].addEventListener("click", function(e) {
+        let clickedElem = e.target.id
+            fetch('/event/edit')
+            .then(function(response) {
+                return response.text();
+            })
+            .then(function(body) {
+                document.querySelector('#here').innerHTML = body;
+                scrollTo(document.getElementById("here"));
+            });
+        });
+    }
+});

app/static/images/icons/plus.svg

@@ -53,12 +53,18 @@
 
                 {% for event, attr in events %}
                     <div class="d-flex flex-row justify-content-around align-items-end action-continer" style="grid-row: {{attr.grid_position}};">
-                        <a href="/edit/{{event.id}}" title="Edit event" class="action-icon"><img class="pb-1" src="{{ url_for('static', path='/images/icons/pencil.svg')}}" width="15em" height="15em"></a>
-                        <a href="/delete/{{event.id}}" title="Delete event" class="action-icon"><img class="pb-1" src="{{ url_for('static', path='/images/icons/trash-can.svg')}}" width="15em" height="15em"></a>
+                        <a href="/edit/{{event.id}}" title="Edit event" class="action-icon"><img class="pb-1" src="{{ url_for('static', path='/images/icons/pencil.svg')}}"></a>
+                        <a href="/delete/{{event.id}}" title="Delete event" class="action-icon"><img class="pb-1" src="{{ url_for('static', path='/images/icons/trash-can.svg')}}"></a>
+                        <a href="/event/{{event.id}}" title="See full event" class="action-icon"><img class="pb-1" src="{{ url_for('static', path='/images/icons/view.svg')}}"></a>
                     </div>
                 {% endfor %}
             </div>
         </div>
+        <div>
+            <button class="event-btn" title="Add Event" class="add-event-icon"><img class="plus_image" src="{{ url_for('static', path='/images/icons/plus.svg')}}"></a>
+        </div>
+        <div id="here">Have a nice day</div>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
+       <script type="text/javascript" src="{{ url_for('static', path='/eventdisplay.js') }}"></script>
     </body>
 </html>