diff --git a/flatrent/src/components/InputForm/InputAreaForm.tsx b/flatrent/src/components/InputForm/InputAreaForm.tsx
index bdcf85e..a59e2ec 100644
--- a/flatrent/src/components/InputForm/InputAreaForm.tsx
+++ b/flatrent/src/components/InputForm/InputAreaForm.tsx
@@ -1,5 +1,6 @@
import React, { ChangeEvent, Component } from "react";
import Styles from "./InputForm.module.css";
+import { joined } from "../../utilities/Utilities";
interface InputAreaFormProps {
className?: string;
diff --git a/flatrent/src/components/InputForm/InputForm.module.css b/flatrent/src/components/InputForm/InputForm.module.css
index bc1697b..7aa508c 100644
--- a/flatrent/src/components/InputForm/InputForm.module.css
+++ b/flatrent/src/components/InputForm/InputForm.module.css
@@ -3,7 +3,7 @@
display: flex;
flex-direction: column;
text-align: left;
- flex: 1;
+ /* flex: 1; */
min-width: 0;
position: relative;
margin-top: 8px;
diff --git a/flatrent/src/index.css b/flatrent/src/index.css
index bb07b3b..e6beef6 100644
--- a/flatrent/src/index.css
+++ b/flatrent/src/index.css
@@ -1,8 +1,38 @@
html {
overflow-y: scroll;
+}
+
+/* Date Picker Custom Styles */
+
+.DateRangePicker *, .SingleDatePicker *, .DayPickerRangeController * {
box-sizing: border-box;
}
+.DateInput_input__focused {
+ border-bottom: 2px solid var(--main-accent-alt-color);
+}
+
+.CalendarDay__selected, .CalendarDay__selected:active, .CalendarDay__selected:hover {
+ background: var(--main-accent-alt-color);
+ border: 1px double var(--main-accent-alt-muted-color);
+}
+
+.CalendarDay__selected_span {
+ background: var(--main-accent-alt-muted-color);
+ border: 1px double var(--main-accent-alt-muted-color);
+}
+
+.CalendarDay__selected_span:active, .CalendarDay__selected_span:hover {
+ background: var(--main-accent-alt-color);
+ border: 1px double var(--main-accent-alt-muted-color);
+}
+
+.CalendarDay__hovered_span, .CalendarDay__hovered_span:hover {
+ background: var(--main-accent-alt-muted-color);
+ border: 1px double var(--main-accent-alt-muted-color);
+ color: white;
+}
+
body {
margin: 0;
padding: 0;
diff --git a/flatrent/src/index.tsx b/flatrent/src/index.tsx
index a61241a..9266708 100644
--- a/flatrent/src/index.tsx
+++ b/flatrent/src/index.tsx
@@ -2,8 +2,21 @@ import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./index.css";
-import "./variables.css";
import * as serviceWorker from "./serviceWorker";
+import "./variables.css";
+import Moment from "moment";
+
+// // tslint:disable-next-line: no-submodule-imports
+// import DefaultTheme from "react-dates/lib/theme/DefaultTheme";
+// // tslint:disable-next-line: no-submodule-imports
+// import aphroditeInterface from "react-with-styles-interface-aphrodite";
+// // tslint:disable-next-line: no-submodule-imports
+// import ThemedStyleSheet from "react-with-styles/lib/ThemedStyleSheet";
+
+// ThemedStyleSheet.registerInterface(aphroditeInterface);
+// ThemedStyleSheet.registerTheme(DefaultTheme);
+
+Moment.locale("lt");
ReactDOM.render(
, document.getElementById("root"));
diff --git a/flatrent/src/scenes/FlatCreate/FlatCreate.module.css b/flatrent/src/scenes/FlatCreate/FlatCreate.module.css
index f9da4ad..a492678 100644
--- a/flatrent/src/scenes/FlatCreate/FlatCreate.module.css
+++ b/flatrent/src/scenes/FlatCreate/FlatCreate.module.css
@@ -41,7 +41,7 @@
margin-top: 24px;
}
-.input, .requirementsArea, .descriptionArea {
+.input, .requirementsArea, .descriptionArea, .button {
margin-left: 4px;
margin-right: 4px;
}
diff --git a/flatrent/src/scenes/FlatCreate/FlatCreate.tsx b/flatrent/src/scenes/FlatCreate/FlatCreate.tsx
index 39f4f7d..ad5f29f 100644
--- a/flatrent/src/scenes/FlatCreate/FlatCreate.tsx
+++ b/flatrent/src/scenes/FlatCreate/FlatCreate.tsx
@@ -271,10 +271,10 @@ class CreateFlat extends Component
{
/>
-
diff --git a/flatrent/src/scenes/FlatDetails/FlatDetails.module.css b/flatrent/src/scenes/FlatDetails/FlatDetails.module.css
index e6dbd86..d372705 100644
--- a/flatrent/src/scenes/FlatDetails/FlatDetails.module.css
+++ b/flatrent/src/scenes/FlatDetails/FlatDetails.module.css
@@ -169,19 +169,30 @@
display: flex;
flex-direction: column;
justify-content: center;
- align-content: center;
}
.modal {
pointer-events: all;
- width: 350px;
+ width: var(--main-width);
+ max-width: var(--main-max-width);
height: 500px;
background: white;
align-self: center;
- justify-self: center;
}
.editLink {
color: var(--text-color);
font-family: var(--title-font-family);
}
+
+.datepickerWrapper {
+ display: block;
+ margin-top: 20px;
+ margin-bottom: 20px;
+}
+
+.infoInPicker {
+ width: 100%;
+ text-align: center;
+ padding: 0px 4px 12px 4px;
+}
diff --git a/flatrent/src/scenes/FlatDetails/FlatDetails.tsx b/flatrent/src/scenes/FlatDetails/FlatDetails.tsx
index 858efc2..5a1289b 100644
--- a/flatrent/src/scenes/FlatDetails/FlatDetails.tsx
+++ b/flatrent/src/scenes/FlatDetails/FlatDetails.tsx
@@ -14,6 +14,7 @@ import RentModal from "./RentModal";
import FlexColumn from "../../components/FlexColumn";
import { flatEditUrl } from "../../utilities/Utilities";
import UserService from "../../services/UserService";
+import { StaticContext } from "react-router";
interface IFlatDetailsState {
loading: boolean;
@@ -33,11 +34,14 @@ class FlatDetails extends Component, IFlatDe
public render() {
const { flat } = this.state;
- const editNode = flat !== undefined && UserService.canEdit(flat.owner.id) ? (
- Redaguoti
- ) : (
- <>
- );
+ const editNode =
+ flat !== undefined && UserService.canEdit(flat.owner.id) ? (
+
+ Redaguoti
+
+ ) : (
+ <>
+ );
return (
<>
@@ -47,7 +51,7 @@ class FlatDetails extends Component, IFlatDe
/>
- {editNode}
+ {editNode}
@@ -59,16 +63,28 @@ class FlatDetails extends Component, IFlatDe
-
+ {this.getRentRoute()}
);
}
+ private getRentRoute = () => {
+ return this.state.flat !== undefined ? (
+
+ ) : (
+ <>
+ );
+ };
+
+ private getRentModal = (props: RouteComponentProps) => (
+ this.state.flat !== undefined ? : <>
+ );
+
private fetchFlat = (id: string) => {
FlatService.getFlat(id)
.then(this.handleResult)
.catch(this.handleFail);
- }
+ };
private handleResult = (result: IFlatDetailsResponse) => {
if (result.errors !== undefined) {
@@ -77,7 +93,7 @@ class FlatDetails extends Component, IFlatDe
} else if (result.flat !== undefined) {
this.setState({ flat: result.flat, loading: false });
}
- }
+ };
private handleFail() {
toast.error("Įvyko nežinoma klaida.");
diff --git a/flatrent/src/scenes/FlatDetails/RentModal.module.css b/flatrent/src/scenes/FlatDetails/RentModal.module.css
new file mode 100644
index 0000000..819f71e
--- /dev/null
+++ b/flatrent/src/scenes/FlatDetails/RentModal.module.css
@@ -0,0 +1,72 @@
+
+.modalWrapper {
+ width: 100vw;
+ height: 100vh;
+ display: flex;
+ overflow-y: auto;
+}
+
+.modal {
+ pointer-events: all;
+ width: var(--main-width);
+ max-width: var(--main-max-width);
+ height: fit-content;
+ max-height: calc(100% - 40px);
+ overflow-y: auto;
+ background: white;
+ align-self: center;
+ padding: 20px;
+ border-radius: 4px;
+ margin: auto;
+}
+
+.editLink {
+ color: var(--text-color);
+ font-family: var(--title-font-family);
+}
+
+.datepickerWrapper {
+ display: block;
+ margin-top: 8px;
+ margin-bottom: 8px;
+}
+
+.infoInPicker {
+ width: 100%;
+ text-align: center;
+ padding: 0px 4px 12px 4px;
+}
+
+.inputArea {
+ height: 10em;
+}
+
+.dropzone {
+ margin-top: 12px;
+ margin-bottom: 12px;
+}
+
+.button {
+}
+
+.title {
+ font-family: var(--title-font-family);
+ font-size: 1.4em;
+ margin-bottom: 16px;
+}
+
+.subTitle {
+ font-family: var(--title-font-family);
+ font-weight: 500;
+ text-align: left;
+ margin-bottom: 8px;
+}
+
+.subText {
+ text-align: left;
+ margin-bottom: 16px;
+}
+
+.subRow {
+ justify-content: space-between;
+}
diff --git a/flatrent/src/scenes/FlatDetails/RentModal.tsx b/flatrent/src/scenes/FlatDetails/RentModal.tsx
index 3514579..944ece2 100644
--- a/flatrent/src/scenes/FlatDetails/RentModal.tsx
+++ b/flatrent/src/scenes/FlatDetails/RentModal.tsx
@@ -1,22 +1,31 @@
import React, { Component } from "react";
import { RouteComponentProps, withRouter } from "react-router-dom";
import { toast } from "react-toastify";
+import Dimmer from "../../components/Dimmer";
import FlexRow from "../../components/FlexRow";
import FlatService, { IFlatDetails, IFlatDetailsResponse } from "../../services/FlatService";
-import Styles from "./FlatDetails.module.css";
-import Dimmer from "../../components/Dimmer";
import { flatUrl, stopPropogation } from "../../utilities/Utilities";
+import Styles from "./RentModal.module.css";
-import {DateRangePicker} from "react-dates";
+import Moment from "moment";
+import "moment/locale/lt";
import "react-dates/initialize";
import "react-dates/lib/css/_datepicker.css";
+import {DateRangePicker, FocusedInputShape, SingleDatePicker, DateRangePickerPhrases} from "react-dates";
import FlexColumn from "../../components/FlexColumn";
+import Button from "../../components/Button";
+import FlexDropzone from "../../components/FlexDropzone";
+import { InputAreaForm } from "../../components/InputForm";
+// import moment = require("moment");
+Moment.locale("lt");
interface IRentModalState {
loading: boolean;
- flat?: IFlatDetails;
errors: { [key: string]: string[] };
values: { [key: string]: string; from: string; to: string; comments: string };
+ startDate: Moment.Moment | null;
+ endDate: Moment.Moment | null;
+ focusedInput: FocusedInputShape | null;
}
const getOffsetDate = (years: number, months: number, days: number): string => {
@@ -42,45 +51,130 @@ const getOffsetDate = (years: number, months: number, days: number): string => {
return `${yyyy}-${mmStr}-${ddStr}`;
};
-class RentModal extends Component, IRentModalState> {
- constructor(props: RouteComponentProps<{ id: string }>) {
+export interface IRentModalProps {
+ flat: IFlatDetails;
+}
+
+class RentModal extends Component & IRentModalProps, IRentModalState> {
+ constructor(props: RouteComponentProps<{ id: string }> & IRentModalProps) {
super(props);
+ console.log("construct", props);
this.state = {
loading: true,
- flat: undefined,
errors: {},
values: { from: getOffsetDate(0, 0, 0), to: getOffsetDate(0, 1, 7), comments: "" },
+ startDate: null,
+ endDate: null,
+ focusedInput: null,
};
}
public render() {
- const { flat } = this.state;
+ const { flat } = this.props;
return (
- console.log(startDate, endDate)} // PropTypes.func.isRequired,
- focusedInput={"startDate"} // PropTypes.oneOf([START_DATE, END_DATE]) or null,
- onFocusChange={focusedInput => console.log(focusedInput)} // PropTypes.func.isRequired,
+
+ Buto nuoma
+
+
+
+ Pageidavimai nuomininkui:
+
+
+ {flat.tenantRequirements}
+
+
+
+
+
+ Kaina mėnesiui:
+
+
+ {flat.price} Eur
+
+
+
+
+
+
+
+
+
+ Nuomos trukmė:
+
+
+ {this.getDaysSelected()} d.
+
+
+
+ {}} title="Papildoma informacija" />
+ {}}
+ text={"Pridėti papildomus failus nurodytus pageidavimuose, bei patvirtinančius Jūsų nuomos sutarties prašymą."}
/>
+
);
}
+ private isDayBlocked = (day: Moment.Moment): boolean => {
+ if (this.state.focusedInput === "startDate") {
+ return day.isBefore(Moment().add(14, 'days'));
+ }
+ if (this.state.focusedInput === "endDate" && this.state.startDate !== null) {
+ // console.log(day.diff(this.state.startDate, "month", true));
+ return day.isBefore(this.state.startDate); // || day.diff(this.state.startDate, "month", true).toString().indexOf(".") !== -1;
+ }
+ return false;
+ }
+
+ private getDaysSelected = () =>
+ this.state.startDate === null || this.state.endDate === null
+ ? "0"
+ : this.state.endDate.diff(this.state.startDate, "day");
+
+ private getInfo = () =>
+ <>
+ Nuoma gali prasidėti už 14 d.
+ Trumpiausias nuomos laikotarpis: {this.props.flat.minimumRentDays} d.
+ ;
+
+ private updateDates = ({startDate, endDate}: {startDate: Moment.Moment | null, endDate: Moment.Moment | null}) =>
+ this.setState({ startDate, endDate });
+
+ private updateFocusedInput = (focusedInput: FocusedInputShape | null) =>
+ this.setState({ focusedInput });
+
private handleFail() {
toast.error("Įvyko nežinoma klaida.");
}
private exitModal = (evt: React.MouseEvent) => {
- this.props.history.push(flatUrl(this.props.match.params.id));
+ this.props.history.push(flatUrl(this.props.flat.id));
}
}
diff --git a/flatrent/src/scenes/Flats/FlatBox.tsx b/flatrent/src/scenes/Flats/FlatBox.tsx
index 99e4570..0bd3c76 100644
--- a/flatrent/src/scenes/Flats/FlatBox.tsx
+++ b/flatrent/src/scenes/Flats/FlatBox.tsx
@@ -1,13 +1,12 @@
import React from "react";
+import ContentLoader from "react-content-loader";
+import { Link } from "react-router-dom";
import FlexColumn from "../../components/FlexColumn";
+import SmartImg from "../../components/SmartImg";
import { getImageUrl } from "../../services/ApiUtilities";
-import { getAddressString, IFlatListItem } from "../../services/FlatService";
-import { roomOrRooms, flatUrl, joined } from "../../utilities/Utilities";
+import { IFlatListItem } from "../../services/FlatService";
+import { flatUrl, roomOrRooms } from "../../utilities/Utilities";
import Styles from "./FlatBox.module.css";
-import SmartImg from "../../components/SmartImg";
-import { withRouter, Link } from "react-router-dom";
-import { RouterProps, RouteComponentProps } from "react-router";
-import ContentLoader from "react-content-loader";
interface IFlatItemProps {
flat: IFlatListItem;
diff --git a/flatrent/src/scenes/Flats/FlatCreateBox.module.css b/flatrent/src/scenes/Flats/FlatCreateBox.module.css
deleted file mode 100644
index fb1cf14..0000000
--- a/flatrent/src/scenes/Flats/FlatCreateBox.module.css
+++ /dev/null
@@ -1,12 +0,0 @@
-.card {
- align-items: center;
- display: flex;
- flex-direction: row;
- font-size: 1.2em;
- justify-content: space-between;
-}
-
-.button {
- display: inline-flex;
- margin-left: 12px;
-}
diff --git a/flatrent/src/scenes/Flats/FlatCreateBox.tsx b/flatrent/src/scenes/Flats/FlatCreateBox.tsx
deleted file mode 100644
index 2534254..0000000
--- a/flatrent/src/scenes/Flats/FlatCreateBox.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from "react";
-import { RouteComponentProps, withRouter } from "react-router-dom";
-import Button from "../../components/Button";
-import Card from "../../components/Card";
-import UserService, { Policies } from "../../services/UserService";
-import Styles from "./FlatCreateBox.module.css";
-
-const FlatCreateBox = (props: RouteComponentProps) => {
- const routeTo = () => props.history.push("/flats/create");
-
- return (
-
- Sukurti naują butą
-
-
- );
-};
-
-export default withRouter(FlatCreateBox);
diff --git a/flatrent/src/scenes/Flats/FlatItem.module.css b/flatrent/src/scenes/Flats/FlatItem.module.css
deleted file mode 100644
index a6f2977..0000000
--- a/flatrent/src/scenes/Flats/FlatItem.module.css
+++ /dev/null
@@ -1,69 +0,0 @@
-.flat {
- font-size: 20px;
- display: flex;
- flex-direction: row;
- align-items: center;
- margin: 5px;
- padding-top: 0 !important;
- padding-bottom: 0 !important;
- max-width: 640px;
- width: 100%;
-}
-
-.content {
- padding: 20px;
- display: flex;
- flex-direction: row;
-}
-
-.text {
- text-align: left;
- display: flex;
- flex-direction: column;
- margin: 0 10px;
-}
-
-.title {
- font-size: 1.2em;
-}
-
-.address {
- font-size: 0.9em;
-}
-
-.openButton {
- font-size: 1em;
- padding: 8px 14px;
- align-self: center;
- margin: 0 0 0 12px;
- color: var(--main-accent-alt-color);
- background-color: var(--main-bg-color);
- /* border: 2px solid var(--main-accent-alt-color); */
- transition: all 0.3s;
-
- border-radius: 0;
- border: 2px solid rgba(var(--main-accent-alt-color-rgb), 0.6);
-}
-
-.openButton:hover {
- background-color: rgba(var(--main-accent-alt-color-rgb), 0.1);
- box-shadow: none;
-}
-
-.image {
- max-height: 150px;
- object-fit: contain;
- /* display: flex; */
- /* flex-basis: auto;
- flex-grow: 1;
- flex-shrink: 1; */
-}
-
-.image img {
- /* height: auto; */
- max-height: 150px;
- height: 100%;
- width: auto;
- object-fit: contain;
- /* width: 100%; */
-}
diff --git a/flatrent/src/scenes/Flats/FlatItem.tsx b/flatrent/src/scenes/Flats/FlatItem.tsx
deleted file mode 100644
index 4dc746a..0000000
--- a/flatrent/src/scenes/Flats/FlatItem.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from "react";
-import Button from "../../components/Button";
-import Card from "../../components/Card";
-import { getAddressString, IFlatListItem } from "../../services/FlatService";
-import Styles from "./FlatItem.module.css";
-import { ApiHostname } from "../../services/Settings";
-
-interface IFlatItemProps {
- flat: IFlatListItem;
- onClick: (id: string) => void;
-}
-
-const FlatItem = ({ flat, onClick }: IFlatItemProps) => {
- const func = () => onClick(flat.id);
- return (
-
-
-
-
-
- {flat.name}
- {/* {getAddressString(flat.address)} */}
-
-
-
-