adds component for updating user status

app/components/user-status.hbs

@@ -0,0 +1,24 @@
+<div class="heading">
+  {{#if (eq @status "active")}}
+    <h2 data-test-status>I am doing a task</h2>
+  {{/if}}
+  {{#if (eq @status "idle")}}
+    <h2 data-test-status>I am idle</h2>
+  {{/if}} 
+  {{#if (eq @status "ooo")}}
+    <h2 data-test-status>I am OOO</h2>
+  {{/if}} 
+</div>
+<div class="buttons">
+  {{#if (eq @status "active")}}
+    <button class="buttons__idle" type="button" {{on "click" (fn @onUpdateStatus 'idle')}}><span data-test-button-text>Change status to ‘Idle’</span></button>
+    <button class="buttons--small" type="button" {{on "click" (fn @onUpdateStatus 'ooo')}}><span>Mark yourself as OOO</span></button>
+  {{/if}}   
+  {{#if (eq @status "idle")}}
+    <button class="buttons__active" type="button" data-test-button {{on "click" (fn @onUpdateStatus 'active')}}><span data-test-button-text>Change status to ‘Doing a task’</span></button>
+    <button class="buttons--small" type="button" {{on "click" (fn @onUpdateStatus 'ooo')}}><span>Mark yourself as OOO</span></button>
+  {{/if}}
+  {{#if (eq @status "ooo")}}
+    <button class="buttons--small" type="button" {{on "click" (fn @onUpdateStatus 'active')}}><span>Mark yourself as Active again</span></button>
+  {{/if}}
+</div>

app/controllers/index.js

@@ -0,0 +1,29 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import ENV from 'website-my/config/environment';
+
+const BASE_URL = ENV.BASE_API_URL;
+
+export default class IndexController extends Controller {
+  @tracked status = this.model;
+
+  @action async updateStatus(status) {
+    this.status = status;
+    try {
+      const response = await fetch(`${BASE_URL}/users/self`, {
+        method: 'PATCH',
+        body: JSON.stringify({
+          status,
+        }),
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        credentials: 'include',
+      });
+      console.log(response);
+    } catch (error) {
+      console.error('Error : ', error);
+    }
+  }
+}

app/routes/index.js

@@ -0,0 +1,15 @@
+import Route from '@ember/routing/route';
+import ENV from 'website-my/config/environment';
+
+const API_BASE_URL = ENV.BASE_API_URL;
+
+export default class TasksRoute extends Route {
+  model = async () => {
+    const response = await fetch(`${API_BASE_URL}/users/self`, {
+      credentials: 'include',
+    });
+    const userData = await response.json();
+
+    return userData.status;
+  };
+}

app/styles/app.css

@@ -3,6 +3,7 @@
 @import "image-upload.css";
 @import "tasks.css";
 @import "sidebar.css";
+@import "index-buttons.css";
 
 body {
   font-family: "Roboto", sans-serif, serif;

app/styles/index-buttons.css

@@ -0,0 +1,44 @@
+.heading h2{
+  color: #0034a5;
+  margin-bottom: 40px;
+  margin-top: 50px;
+  font-size: 1.5rem;
+}
+
+.buttons {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.buttons__idle {
+  font-size: 1rem;
+  color: #e49504;
+  font-weight: 600;
+  border: 1px solid #e49504;
+  padding: 20px;
+  width: 18%;
+  margin-bottom: 40px;
+  border-radius: 10px;
+  background: #ffff;
+}
+
+.buttons__active {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #16a334;
+  border: 1px solid #16a334;
+  border-radius: 10px;
+  padding: 20px;
+  margin-bottom: 40px;
+  background: #ffff;
+}
+
+.buttons--small {
+  font-size: 0.6rem;
+  font-weight: 600;
+  color: #0034a5;
+  border: none;
+  background: #ffff;
+}

app/templates/index.hbs

@@ -1 +1,4 @@
-Index page works!
+<UserStatus
+@status={{this.status}}
+@onUpdateStatus={{this.updateStatus}}
+/>