added modal overlay, not connected to backend yet

websrc/components/Overlays.tsx

@@ -1,12 +1,21 @@
-import React from "react";
+import React, {Component} from "react";
-import {Component} from "react";
 
-export class Modal extends Component<any, any> {
+export type ModalProps = {
+    show: boolean,
+    positionId: number,
+    toggleConfirmation: any
+}
+
+export class ClosePositionModal extends Component<ModalProps, any> {
     constructor(props) {
         super(props);
     }
 
     render() {
+        if (!this.props.show) {
+            return null
+        }
+
         return (
             <div className="fixed z-10 inset-0 overflow-y-auto">
                 <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
@@ -43,12 +52,11 @@ export class Modal extends Component<any, any> {
                                 </div>
                                 <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                                     <h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-headline">
-                                        Deactivate account
+                                        Close position
                                     </h3>
                                     <div className="mt-2">
                                         <p className="text-sm text-gray-500">
-                                            Are you sure you want to deactivate your account? All of your data will be
+                                            Are you sure you want to close the position? This action cannot be undone.
-                                            permanently removed. This action cannot be undone.
                                         </p>
                                     </div>
                                 </div>
@@ -56,11 +64,15 @@ export class Modal extends Component<any, any> {
                         </div>
                         <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                             <button type="button"
-                                    className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
+                                    className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
-                                Deactivate
+                                    onClick={event => {
+                                        console.log("Closing " + this.props.positionId)
+                                    }}>
+                                Close
                             </button>
                             <button type="button"
-                                    className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
+                                    className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+                                    onClick={() => this.props.toggleConfirmation()}>
                                 Cancel
                             </button>
                         </div>

websrc/components/Tables.tsx

@@ -1,9 +1,27 @@
 import React, {Component} from "react"
 import {PositionProp} from "../types";
+import {ClosePositionModal} from "./Overlays";
 
-export class PositionsTable extends Component<{ positions: Array<PositionProp> }> {
+type PositionsTableState = {
+    showConfirmation: boolean,
+    positionToClose: number
+}
+
+export class PositionsTable extends Component<{ positions: Array<PositionProp> }, PositionsTableState> {
     constructor(props) {
         super(props);
+        this.toggleConfirmation = this.toggleConfirmation.bind(this)
+    }
+
+    state = {
+        showConfirmation: false,
+        positionToClose: 0,
+    }
+
+    toggleConfirmation() {
+        this.setState((state) => ({
+            showConfirmation: !state.showConfirmation
+        }))
     }
 
     stateColor(state: string): string {
@@ -73,7 +91,13 @@ export class PositionsTable extends Component<{ positions: Array<PositionProp> }
                     <td className="px-6 py-1 whitespace-nowrap text-right text-sm font-medium">
                         <div className="p-2 md:w-40">
                             <div
-                                className="p-4 flex justify-center bg-red-200 rounded-lg shadow-xs cursor-pointer hover:bg-red-500 hover:text-red-100">
+                                className="p-4 flex justify-center bg-red-200 rounded-lg shadow-xs cursor-pointer hover:bg-red-500 hover:text-red-100"
+                                onClick={() => {
+                                    this.setState({
+                                        showConfirmation: true,
+                                        positionToClose: position.id
+                                    })
+                                }}>
                                 <span className="ml-2">Close</span>
                             </div>
                         </div>
@@ -86,6 +110,7 @@ export class PositionsTable extends Component<{ positions: Array<PositionProp> }
     render() {
         return (
             <div className="flex flex-col">
+                <ClosePositionModal positionId={this.state.positionToClose} toggleConfirmation={this.toggleConfirmation} show={this.state.showConfirmation}/>
                 <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
                     <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
                         <div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">