Skip to content

Commit

Permalink
Merge pull request #48 from Incredible-Technologies/link-frontend-to-…
Browse files Browse the repository at this point in the history 
…backend

Final demo preparation
  • Loading branch information
@Takudzwamz
Takudzwamz authored Nov 28, 2023
2 parents 8ff4f05 + ea2a842 commit 772a65e
Show file tree
Hide file tree
Showing 12 changed files with 599 additions and 64 deletions.
130 changes: 100 additions & 30 deletions client/src/app/components/medical-card/medical-card.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,37 +14,75 @@ <h1>Электронная медицинская карта</h1>
</div>
</div>

<!-- Patient Personal Information -->
<div class="personal-info med-card ">
<h2><i class="fas fa-user-circle"></i> Личная информация</h2>
<div class="info-content">
<div class="info-item">
<label><i class="fas fa-id-card"></i> Имя</label>
<span>Иван Иванов</span>
</div>
<div class="info-item">
<label><i class="fas fa-birthday-cake"></i> Дата рождения</label>
<span>01.01.1990</span>
</div>
<div class="info-item">
<label><i class="fas fa-venus-mars"></i> Пол</label>
<span>Мужской</span>
</div>
<div class="info-item">
<label><i class="fas fa-map-marker-alt"></i> Адрес</label>
<span>Москва, ул. Ленина, д. 10</span>
</div>
<div class="info-item">
<label><i class="fas fa-phone"></i> Телефон</label>
<span>+7 900 123 4567</span>
</div>
<div class="info-item">
<label><i class="fas fa-envelope"></i> Элект почта</label>
<span>[email protected]</span>
</div>
<!-- Patient Personal Information -->
<div class="personal-info med-card">
<h2><i class="fas fa-user-circle fa-2x" style="color: #007BFF;"></i> Личная информация</h2>
<button class="edit-button" (click)="toggleEdit()"><i class="fas fa-edit"></i></button>

<div *ngIf="!isEditing; else editProfileForm" class="info-content">
<div class="info-item">
<label><i class="fas fa-id-card"></i> Имя</label>
<span>{{ profileData?.firstName }} {{ profileData?.middleName }} {{ profileData?.lastName }}</span>
</div>
<div class="info-item">
<label><i class="fas fa-birthday-cake"></i> Дата рождения</label>
<span>{{ profileData?.dateOfBirth }}</span>
</div>
<div class="info-item">
<label><i class="fas fa-venus-mars"></i> Пол</label>
<span>{{ profileData?.gender }}</span>
</div>
<div class="info-item">
<label><i class="fas fa-map-marker-alt"></i> Адрес</label>
<span>{{ profileData?.address }}</span>
</div>
<div class="info-item">
<label><i class="fas fa-phone"></i> Телефон</label>
<span>{{ profileData?.phoneNumber }}</span>
</div>
</div>

<ng-template #editProfileForm>
<form [formGroup]="profileForm" (ngSubmit)="saveProfile()" class="profile-edit-form">
<div class="form-group">
<label>Имя</label>
<input type="text" formControlName="firstName" placeholder="Имя">
</div>
<div class="form-group">
<label>Отчество</label>
<input type="text" formControlName="middleName" placeholder="Отчество">
</div>
<div class="form-group">
<label>Фамилия</label>
<input type="text" formControlName="lastName" placeholder="Фамилия">
</div>
<div class="form-group">
<label>Дата рождения</label>
<input type="text" formControlName="dateOfBirth" placeholder="Дата рождения dd/MM/yyyy">
</div>
<div class="form-group">
<label>Пол</label>
<select formControlName="gender">
<option value="Мужской">Мужской</option>
<option value="Женский">Женский</option>
<!-- Add more options if needed -->
</select>
</div>
<div class="form-group">
<label>Адрес</label>
<input type="text" formControlName="address" placeholder="Адрес">
</div>
<div class="form-group">
<label>Телефон</label>
<input type="text" formControlName="phoneNumber" placeholder="Телефон">
</div>
<button type="submit" class="save-button">Сохранить</button>
</form>
</ng-template>
</div>





<!-- Medical History -->
Expand Down Expand Up @@ -126,11 +164,10 @@ <h2>Медицинская история</h2>
</div>


<!-- Diagnostics -->

<div class="diagnostics med-diagnostics-card">
<h2>Диагностика</h2>
<div class="diagnostics-content">
<!-- Sample Diagnostics Data -->
<div class="diagnostics-item">
<i class="fas fa-stethoscope"></i>
<div class="diagnostics-details">
Expand Down Expand Up @@ -215,6 +252,39 @@ <h2>Диагностика</h2>
</div>


<!-- <div class="med-diagnostics-card">
<h2>Результаты анализов</h2>
<div class="diagnostics-content">
<div *ngFor="let card of resultCards" class="diagnostics-item">
<button class="edit-button" (click)="toggleEditResultCard(card)">
<i class="fas fa-edit"></i>
</button>
<i class="fas fa-file-medical-alt"></i>
<div class="diagnostics-details">
<strong>{{ card.dateOfShouldReady | date: 'yyyy' }}</strong>
<p>{{ card.name }}</p>
<span>{{ card.description }}</span>
</div>
</div>
</div>
<div *ngIf="isEditingResultCard" class="result-card-edit-form">
<form [formGroup]="resultCardForm" (ngSubmit)="saveResultCard()">
<div class="form-group">
<label for="cardName">Name:</label>
<input type="text" formControlName="cardName" class="form-control" id="cardName">
</div>
<div class="form-group">
<label for="cardDescription">Description:</label>
<textarea formControlName="cardDescription" class="form-control" id="cardDescription"></textarea>
</div>
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-secondary" (click)="isEditingResultCard = false">Cancel</button>
</form>
</div>
</div>
-->


<!-- Treatments -->
<div class="treatments med-treatments-card">
<h2>Лечение и Рецепты</h2>
Expand Down
215 changes: 189 additions & 26 deletions client/src/app/components/medical-card/medical-card.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,41 +57,88 @@
margin-bottom: 20px;
display: flex;
flex-direction: column;
align-items: flex-start; // Aligns the heading to the left/start
i {
color: $dark-button-bg; // Blue color for the icons
align-items: flex-start;
position: relative; // For absolute positioning of the edit button

h2 {
display: flex;
align-items: center;
gap: 10px;
}
}

h2 {
display: flex;
align-items: center;
gap: 10px; // Space between the icon and the text
i{
color: #007BFF;
}

.info-content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
margin-top: 20px;
}

.info-item {
flex-basis: 48%;
margin: 10px 0;
display: flex;
justify-content: space-between;
align-items: center;
}

.edit-button {
background: none;
border: none;
cursor: pointer;
position: absolute;
top: 20px;
right: 20px;
color: $dark-button-bg;
}

label {
font-weight: bold;
display: flex;
align-items: center;
gap: 5px;
}
}

.info-content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
// Add styles for your form here
.profile-edit-form {
width: 100%;
margin-top: 20px; // Space between the heading and the content
}

.info-item {
flex-basis: 48%; // Two items per row
margin: 10px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-group {
margin-bottom: 15px;

label {
font-weight: bold;
display: flex;
align-items: center;
gap: 5px; // Space between the icon and the label text
label {
display: block;
margin-bottom: 5px;
}

input, select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
}

.save-button {
padding: 10px 20px;
background-color: $dark-button-bg;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;

&:hover {
background-color: darken($dark-button-bg, 10%);
}
}
}


.med-history-card {
padding: 20px;
border-radius: 10px;
Expand Down Expand Up @@ -229,6 +276,122 @@ label {
}
}

.med-diagnostics-card {
padding: 20px;
border-radius: 10px;
margin-bottom: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
background-color: transparent;
border: 1px solid $dark-button-bg;
position: relative;
z-index: 1; // to ensure it pops up above other content

.result-card-edit-form {
margin-top: 20px;
padding: 20px;
background-color: #f8f9fa;
border: 1px solid #ddd;
border-radius: 5px;

// Styles for the form and its elements
.form-group {
margin-bottom: 15px;

label {
display: block;
margin-bottom: 5px;
}

input[type="text"],
input[type="date"],
textarea {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}

textarea {
resize: vertical; // Allows vertical resizing of textarea
}
}

.btn {
margin-right: 10px;
}
}

.diagnostics-content {
h2 {
text-align: left; // Aligning the heading to the left/start
}

.diagnostics-content {
max-height: 300px;
overflow-y: auto;
padding-left: 40px; // Added padding to accommodate the icons

.diagnostics-item {
display: flex;
align-items: center;
margin-bottom: 10px;
position: relative;
z-index: 1;

i {
color: $dark-button-bg;
margin-right: 10px;
background-color: #fff;
border-radius: 50%;
padding: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
position: relative;
z-index: 2;
}

.diagnostics-details {
display: flex;
flex-direction: column;

strong {
font-weight: bold;
}

p {
margin-top: 5px;
}

span {
font-size: 0.9em;
color: gray;
}
}
}
}

.edit-button {
position: absolute;
top: 5px;
left: 5px;
background: transparent;
border: none;
cursor: pointer;

i {
color: #007bff; // Blue color for the edit icon
}

&:hover {
i {
color: darken(#007bff, 10%); // Slightly darker color on hover
}
}
}
}
}



.med-treatments-card {
padding: 20px;
border-radius: 10px;
Expand Down
Loading

0 comments on commit 772a65e

Please sign in to comment.