added full project files
This commit is contained in:
89
static/css/base.css
Normal file
89
static/css/base.css
Normal file
@@ -0,0 +1,89 @@
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f5f5f5;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
height: 100vh;
|
||||
background-color: #ffffff;
|
||||
position: fixed;
|
||||
left: -250px;
|
||||
transition: left 0.3s ease;
|
||||
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
|
||||
padding-top: 20px;
|
||||
}
|
||||
.sidebar.open {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* Sidebar Navigation */
|
||||
.nav-menu {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
padding: 15px 20px;
|
||||
font-size: 16px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
.nav-link i {
|
||||
margin-right: 10px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.nav-link:hover, .nav-link.active {
|
||||
background-color: #e6f7ff;
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
/* Menu Button */
|
||||
.menu-icon {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Content Area */
|
||||
.content {
|
||||
margin-left: 0;
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
transition: margin-left 0.3s ease;
|
||||
}
|
||||
.content.shift {
|
||||
margin-left: 250px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.sidebar {
|
||||
width: 200px;
|
||||
left: -200px;
|
||||
}
|
||||
|
||||
.sidebar.open {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.content.shift {
|
||||
margin-left: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
226
static/css/index.css
Normal file
226
static/css/index.css
Normal file
@@ -0,0 +1,226 @@
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
height: 100%;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 20px;
|
||||
position: fixed;
|
||||
}
|
||||
.logo {
|
||||
width: 80px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.nav-menu {
|
||||
width: 100%;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.nav-item {
|
||||
width: 100%;
|
||||
}
|
||||
.nav-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
padding: 15px 20px;
|
||||
font-size: 16px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
.nav-link:hover,
|
||||
.nav-link.active {
|
||||
background-color: #e6f7ff;
|
||||
color: #007bff;
|
||||
}
|
||||
.nav-link i {
|
||||
margin-right: 10px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.user-section {
|
||||
margin-top: auto;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
.user-section img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.user-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.user-info span {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
|
||||
/* Main content area */
|
||||
.content {
|
||||
margin-left: 250px;
|
||||
padding: 20px;
|
||||
width: calc(100% - 250px);
|
||||
}
|
||||
|
||||
/* Menu Cards */
|
||||
.menu {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
.card {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
flex: 1 1 calc(30% - 20px);
|
||||
max-width: calc(30% - 20px);
|
||||
|
||||
}
|
||||
.card h2 {
|
||||
margin: 0 0 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
color: #fff;
|
||||
background-color: #007bff;
|
||||
border-radius: 4px;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
.btn:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
/* Company Info */
|
||||
.company-info {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
background-color: Whitesmoke;
|
||||
color: blue;
|
||||
margin-left: 250px;
|
||||
}
|
||||
|
||||
.company-name {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.app-name {
|
||||
font-weight: bold;
|
||||
app-name-shadow:0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
font-size: 24px;
|
||||
margin: 5px 0 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Responsive Design */
|
||||
@media screen and (max-width: 768px) {
|
||||
.sidebar {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: static;
|
||||
}
|
||||
.content {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.menu {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.card {
|
||||
flex: 1 1 100%;
|
||||
max-width: 100%;
|
||||
min-width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
.nav-link {
|
||||
font-size: 14px;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
.btn {
|
||||
font-size: 12px;
|
||||
padding: 8px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.sidebar {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: static;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.menu {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card {
|
||||
flex: 1 1 100%;
|
||||
max-width: 100%;
|
||||
min-width: 50%;
|
||||
}
|
||||
|
||||
.company-info {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
.nav-link {
|
||||
font-size: 14px;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-size: 12px;
|
||||
padding: 8px 15px;
|
||||
}
|
||||
|
||||
.user-section {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.user-section img {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
min-width: 90%;
|
||||
}
|
||||
}
|
||||
395
static/css/invoice.css
Normal file
395
static/css/invoice.css
Normal file
@@ -0,0 +1,395 @@
|
||||
/* General Styles */
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Form Styling */
|
||||
form {
|
||||
width:50%;
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
/* Responsive Form Layout */
|
||||
.row1,
|
||||
.row2,
|
||||
.row3 {
|
||||
display: grid;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.row2,
|
||||
.row3 {
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 6px;
|
||||
font-size: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Button Styling */
|
||||
.button {
|
||||
padding: 12px;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
/* Dynamic Hold Amount Fields */
|
||||
.hold-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.hold-amount-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
background-color: #f9f9f9;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.hold-amount-field select,
|
||||
.hold-amount-field input {
|
||||
flex: 1;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.hold-amount-field button {
|
||||
background-color: red;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
padding: 8px 10px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hold-amount-field button:hover {
|
||||
background-color: #c0392b;
|
||||
}
|
||||
|
||||
/* Success Alert Box */
|
||||
.success-alert {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: #4CAF50;
|
||||
color: #fff;
|
||||
padding: 15px 25px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.5s ease, visibility 0.5s ease;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.success-alert.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* Table Styles */
|
||||
.invoice-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 20px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.invoice-table th,
|
||||
.invoice-table td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.invoice-table th {
|
||||
background-color: #007bff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.invoice-table tr:nth-child(even) {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.invoice-table tr:hover {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* icon */
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.icon:hover {
|
||||
transform: scale(1.5);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.edit-icon:hover {
|
||||
filter: drop-shadow(0 0 5px #007bff); /* Blue glow for edit */
|
||||
}
|
||||
|
||||
.delete-icon:hover {
|
||||
filter: drop-shadow(0 0 5px #ff0000); /* Red glow for delete */
|
||||
}
|
||||
|
||||
|
||||
/* Center the buttons and apply consistent styling */
|
||||
.button-container {
|
||||
display: flex;
|
||||
justify-content: center; /* Center buttons horizontally */
|
||||
gap: 10px; /* Space between buttons */
|
||||
margin-top: 20px; /* Add some top margin */
|
||||
}
|
||||
|
||||
.action-button {
|
||||
background-color: #007BFF; /* Blue background */
|
||||
color: white; /* White text */
|
||||
padding: 15px 30px; /* Larger padding for bigger buttons */
|
||||
border: none; /* Remove border */
|
||||
border-radius: 5px; /* Rounded corners */
|
||||
cursor: pointer; /* Pointer cursor on hover */
|
||||
font-size: 18px; /* Larger font size */
|
||||
text-align: center; /* Center text */
|
||||
text-decoration: none; /* Remove underline */
|
||||
transition: background-color 0.3s ease; /* Smooth hover transition */
|
||||
}
|
||||
|
||||
.action-button:hover {
|
||||
background-color: #0056b3; /* Darker blue on hover */
|
||||
}
|
||||
|
||||
#addStateForm, #stateTable {
|
||||
display: none; /* Initially hide both the form and the table */
|
||||
}
|
||||
|
||||
/* Success Popup */
|
||||
.success-popup {
|
||||
display: none;
|
||||
color: green;
|
||||
font-size: 1.2em;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* Sorting buttons */
|
||||
.sortable .sort-buttons {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
|
||||
.sortable {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.sort-buttons a {
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.sort-buttons a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.back-button {
|
||||
display: inline-block;
|
||||
margin-top: 20px;
|
||||
padding: 8px 15px;
|
||||
background-color: #28a745;
|
||||
color: white;
|
||||
border-radius: 5px;
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
}
|
||||
.back-button:hover {
|
||||
background-color: #218838;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
span .sort-desc:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
span .sort-asc:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1024px) {
|
||||
form {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.row2,
|
||||
.row3 {
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
}
|
||||
|
||||
.invoice-table th,
|
||||
.invoice-table td {
|
||||
font-size: 12px;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.row1,
|
||||
.row2,
|
||||
.row3 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.hold-amount-field {
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.hold-amount-field select,
|
||||
.hold-amount-field input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.invoice-table {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
body {
|
||||
max-width: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
form {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.invoice-table th,
|
||||
.invoice-table td {
|
||||
font-size: 12px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
button {
|
||||
font-size: 16px;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
/* Additional Media Queries */
|
||||
|
||||
/* For tablets and medium devices */
|
||||
@media (max-width: 992px) {
|
||||
form {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
/* For smaller tablets and large phones */
|
||||
@media (max-width: 600px) {
|
||||
.button-container {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.success-alert {
|
||||
width: 90%;
|
||||
font-size: 14px;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* For very small phones */
|
||||
@media (max-width: 360px) {
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.sort-buttons a {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.invoice-table th,
|
||||
.invoice-table td {
|
||||
font-size: 10px;
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
313
static/css/invoice1.css
Normal file
313
static/css/invoice1.css
Normal file
@@ -0,0 +1,313 @@
|
||||
/* General Styling */
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 20px;
|
||||
background-color: #f9f9f9;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* Header Styling */
|
||||
h1, h2, h3 {
|
||||
color: #0056b3;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Table Styling */
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
table th, table td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
table th {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
table tr:nth-child(even) {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
table tr:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
/* Sort Dropdown */
|
||||
.sort-options {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background: white;
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
z-index: 100;
|
||||
width: 120px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sort-options button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sort-options button:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
/* Form Styling */
|
||||
form {
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
form label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
form input[type="text"],
|
||||
form input[type="number"],
|
||||
form input[type="date"],
|
||||
form input[type="email"],
|
||||
form textarea,
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin-bottom: 15px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
form textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
/* Button Styling */
|
||||
.button, form button {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.button:hover, form button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
/* Back Button */
|
||||
.back-button {
|
||||
background-color: red;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
border-radius: 5px;
|
||||
display: inline-block;
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background-color: darkred;
|
||||
}
|
||||
|
||||
/* Success Alert */
|
||||
.success-alert {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: #d4edda;
|
||||
color: #155724;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.success-popup i {
|
||||
color: green;
|
||||
font-size: 30px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/* Error Message */
|
||||
.error-message {
|
||||
color: red;
|
||||
font-size: 14px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/* Table Icons */
|
||||
td img {
|
||||
width: 20px; /* Adjust as needed */
|
||||
height: 20px; /* Adjust as needed */
|
||||
transition: transform 0.3s ease; /* Smooth transition for hover effect */
|
||||
}
|
||||
|
||||
td img:hover {
|
||||
transform: scale(1.2); /* Slight zoom effect on hover */
|
||||
}
|
||||
|
||||
/* Select Dropdown */
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 12px 15px;
|
||||
margin: 10px 0;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
/* Custom Dropdown Arrow */
|
||||
select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
select:focus {
|
||||
outline: none;
|
||||
border-color: #4CAF50;
|
||||
}
|
||||
|
||||
select option {
|
||||
padding: 12px 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
option[disabled] {
|
||||
color: #aaa;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Save Button */
|
||||
.save-button {
|
||||
background-color: green;
|
||||
color: white;
|
||||
padding: 15px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 20px auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.save-button:hover {
|
||||
background-color: darkgreen;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
form {
|
||||
max-width: 100%;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
table th, table td {
|
||||
padding: 6px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.button, form button {
|
||||
font-size: 14px;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
/* Additional Media Queries */
|
||||
|
||||
/* For tablets and medium-sized screens */
|
||||
@media (max-width: 992px) {
|
||||
form {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
table th, table td {
|
||||
font-size: 14px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.save-button, .back-button, .button, form button {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* For smaller tablets and large phones */
|
||||
@media (max-width: 600px) {
|
||||
body {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
table th, table td {
|
||||
font-size: 13px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.success-alert {
|
||||
width: 90%;
|
||||
font-size: 16px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.button, form button, .save-button, .back-button {
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
/* For very small phones */
|
||||
@media (max-width: 360px) {
|
||||
h1, h2, h3 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.save-button, .back-button {
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
table th, table td {
|
||||
font-size: 12px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
form input, form select, form textarea {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
181
static/css/report.css
Normal file
181
static/css/report.css
Normal file
@@ -0,0 +1,181 @@
|
||||
h2 {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Form Styling */
|
||||
.info {
|
||||
width: 60%;
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
/* Responsive Form Layout */
|
||||
.row1,
|
||||
.row2,
|
||||
.row3 {
|
||||
display: grid;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.row2,
|
||||
.row3 {
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 6px;
|
||||
font-size: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Table styling */
|
||||
.table-wrapper {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
table th, table td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
table th {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table tr:nth-child(even) {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
table tr:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
display: inline-block;
|
||||
padding: 10px 15px;
|
||||
background-color: #28a745;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.total-table {
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1024px) {
|
||||
.info {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.row2,
|
||||
.row3 {
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
}
|
||||
|
||||
.invoice-table th,
|
||||
.invoice-table td {
|
||||
font-size: 12px;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.row1,
|
||||
.row2,
|
||||
.row3 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
body {
|
||||
max-width: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
table th,
|
||||
table td {
|
||||
font-size: 10px;
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Ensure table responsiveness */
|
||||
@media (max-width: 600px) {
|
||||
.table-wrapper {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
min-width: 600px;
|
||||
}
|
||||
}
|
||||
/* Extra Small Devices (max-width: 360px) */
|
||||
@media (max-width: 360px) {
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.info {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
font-size: 14px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
font-size: 14px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
table th,
|
||||
table td {
|
||||
font-size: 9px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.total-table {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
212
static/css/show_excel.css
Normal file
212
static/css/show_excel.css
Normal file
@@ -0,0 +1,212 @@
|
||||
/* General Styles */
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 20px;
|
||||
padding: 20px;
|
||||
background-color: #f4f4f9;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* Headings */
|
||||
h1, h2 {
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
/* File Information Section */
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul li {
|
||||
background: #ecf0f1;
|
||||
margin: 5px 0;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* Error Messages */
|
||||
.errors {
|
||||
background-color: #ffdddd;
|
||||
border: 1px solid #ff4d4d;
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.errors h2 {
|
||||
color: #ff4d4d;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #d8000c;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Table Styles */
|
||||
.table-container {
|
||||
max-width: 100%;
|
||||
overflow-x: auto; /* Allows horizontal scrolling */
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid #ddd; /* Optional for better visibility */
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background-color: white;
|
||||
table-layout: auto; /* Let the columns adjust based on content */
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
text-align: left;
|
||||
word-wrap: break-word; /* Prevents text from overflowing */
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #3498db;
|
||||
color: white;
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
/* Set input width to 100px */
|
||||
input[type="text"] {
|
||||
width: 200px; /* Set a fixed width of 100px */
|
||||
padding: 8px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box; /* Ensures padding is included in width calculation */
|
||||
white-space: nowrap; /* Prevent line breaks */
|
||||
overflow: hidden; /* Prevents overflow */
|
||||
text-overflow: ellipsis; /* Shows ellipsis if the content is too long */
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
button {
|
||||
display: inline-block;
|
||||
background-color: #27ae60;
|
||||
color: white;
|
||||
padding: 10px 15px;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
transition: background 0.3s ease;
|
||||
font-size: 16px;
|
||||
width: 100%; /* Ensures button is centered */
|
||||
}
|
||||
|
||||
.back-button {
|
||||
display: inline-block;
|
||||
background-color: #27ae60;
|
||||
color: white;
|
||||
padding: 10px 15px;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
transition: background 0.3s ease;
|
||||
font-size: 16px;
|
||||
width: 10%; /* Ensures button is centered */
|
||||
}
|
||||
|
||||
/* Hover Effects */
|
||||
button:hover, .back-button:hover {
|
||||
background-color: #219150;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
background-color: #95a5a6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Back Button */
|
||||
.back-button {
|
||||
background-color: #e74c3c;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background-color: #c0392b;
|
||||
}
|
||||
|
||||
/* Center Save Data Button */
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.save-button {
|
||||
margin-top: 20px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.table-container {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
table-layout: auto; /* Let the table adjust to fit its content */
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
width: 100px; /* Fixed width of 100px */
|
||||
padding: 6px; /* Smaller padding on mobile */
|
||||
}
|
||||
|
||||
button, .back-button {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
body {
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
width: 80px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
th, td {
|
||||
font-size: 12px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.save-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
button {
|
||||
font-size: 14px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.errors {
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
448
static/css/style.css
Normal file
448
static/css/style.css
Normal file
@@ -0,0 +1,448 @@
|
||||
/* General styling */
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 20px;
|
||||
background-color: #f9f9f9;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* Header styling */
|
||||
h1 {
|
||||
color: back;
|
||||
text-align: center;
|
||||
}
|
||||
h2 {
|
||||
color: #0056b3;
|
||||
text-align: center;
|
||||
}
|
||||
h3 {
|
||||
color: #0056b3;
|
||||
}
|
||||
|
||||
/* Table styling */
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
table th, table td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
table th {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table tr:nth-child(even) {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
table tr:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Form styling */
|
||||
form {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
form label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
|
||||
form input[type="text"], form input[type="number"], form input[type="date"],form input[type="email"], form textarea {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin-bottom: 15px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
form textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
|
||||
form button {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
form button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
/* Style the <h1> elements to display inline */
|
||||
h1 {
|
||||
display: inline-block;
|
||||
margin-right: 10px; /* Spacing between buttons */
|
||||
}
|
||||
|
||||
/* Style the <a> tags to look like buttons */
|
||||
.button {
|
||||
text-decoration: none; /* Remove underline */
|
||||
padding: 10px 20px; /* Add padding for size */
|
||||
background-color: #4CAF50; /* Green background color */
|
||||
color: white; /* White text */
|
||||
font-size: 16px; /* Font size */
|
||||
border-radius: 5px; /* Rounded corners */
|
||||
border: none; /* Remove default border */
|
||||
cursor: pointer; /* Cursor style */
|
||||
transition: background-color 0.3s ease; /* Smooth transition for hover */
|
||||
}
|
||||
|
||||
/* Change background color on hover */
|
||||
.button:hover {
|
||||
background-color: #45a049;
|
||||
}
|
||||
|
||||
/* Style for the Back Button */
|
||||
.back-button {
|
||||
background-color: red;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
border-radius: 5px;
|
||||
display: inline-block;
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background-color: darkred;
|
||||
}
|
||||
|
||||
/* Styling for the select dropdown */
|
||||
select {
|
||||
width: 100%; /* Use full width for better responsiveness */
|
||||
padding: 12px 15px; /* Increased padding for better spacing */
|
||||
margin: 10px 0; /* Spacing above and below */
|
||||
border: 1px solid #ccc; /* Border color */
|
||||
border-radius: 5px; /* Rounded corners */
|
||||
font-size: 14px; /* Font size for text */
|
||||
background-color: #fff; /* White background */
|
||||
box-sizing: border-box; /* Ensures padding and border are included in width */
|
||||
appearance: none; /* Remove default dropdown arrow for custom styling */
|
||||
}
|
||||
|
||||
/* Custom dropdown arrow */
|
||||
select::-ms-expand {
|
||||
display: none; /* Remove the default arrow for IE/Edge */
|
||||
}
|
||||
|
||||
select:focus {
|
||||
outline: none; /* Remove outline when focused */
|
||||
border-color: #4CAF50; /* Change border color when focused */
|
||||
}
|
||||
|
||||
/* Option styling for the select */
|
||||
select option {
|
||||
padding: 12px 15px; /* Padding for each option */
|
||||
font-size: 14px; /* Font size */
|
||||
}
|
||||
|
||||
/* Style the placeholder (default) option */
|
||||
option[disabled] {
|
||||
color: #aaa; /* Light grey color for disabled option */
|
||||
font-style: italic; /* Italicize the disabled option */
|
||||
}
|
||||
|
||||
/* Label styling */
|
||||
label {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.save-button {
|
||||
background-color: Green;
|
||||
color: white;
|
||||
padding: 15px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
border-radius: 5px;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-item: center;
|
||||
margin: 20px;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.save-button:hover {
|
||||
background-color: darkGreen;
|
||||
}
|
||||
|
||||
|
||||
.success-popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: #d4edda;
|
||||
color: #155724;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.success-popup i {
|
||||
color: green;
|
||||
font-size: 30px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: red;
|
||||
font-size: 14px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.icon:hover {
|
||||
transform: scale(1.5);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.edit-icon:hover {
|
||||
filter: drop-shadow(0 0 5px #007bff); /* Blue glow for edit */
|
||||
}
|
||||
|
||||
.delete-icon:hover {
|
||||
filter: drop-shadow(0 0 5px #ff0000); /* Red glow for delete */
|
||||
}
|
||||
|
||||
/* Search Bar Container */
|
||||
.search-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Search Bar Input */
|
||||
#searchBar {
|
||||
padding: 8px;
|
||||
font-size: 14px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
width: 200px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
/* Search Bar Focus Effect */
|
||||
#searchBar:focus {
|
||||
border-color: #007bff;
|
||||
outline: none;
|
||||
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Center the buttons and apply consistent styling */
|
||||
.button-container {
|
||||
display: flex;
|
||||
justify-content: center; /* Center buttons horizontally */
|
||||
gap: 10px; /* Space between buttons */
|
||||
margin-top: 20px; /* Add some top margin */
|
||||
}
|
||||
|
||||
.action-button {
|
||||
background-color: #007BFF; /* Blue background */
|
||||
color: white; /* White text */
|
||||
padding: 15px 30px; /* Larger padding for bigger buttons */
|
||||
border: none; /* Remove border */
|
||||
border-radius: 5px; /* Rounded corners */
|
||||
cursor: pointer; /* Pointer cursor on hover */
|
||||
font-size: 18px; /* Larger font size */
|
||||
text-align: center; /* Center text */
|
||||
text-decoration: none; /* Remove underline */
|
||||
transition: background-color 0.3s ease; /* Smooth hover transition */
|
||||
}
|
||||
|
||||
.action-button:hover {
|
||||
background-color: #0056b3; /* Darker blue on hover */
|
||||
}
|
||||
|
||||
#addStateForm, #stateTable {
|
||||
display: none; /* Initially hide both the form and the table */
|
||||
}
|
||||
|
||||
/* Success Popup */
|
||||
.success-popup {
|
||||
display: none;
|
||||
color: green;
|
||||
font-size: 1.2em;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* Sorting buttons */
|
||||
.sortable .sort-buttons {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
|
||||
.sortable {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.sort-buttons a {
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.sort-buttons a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.back-button {
|
||||
display: inline-block;
|
||||
margin-top: 20px;
|
||||
padding: 8px 15px;
|
||||
background-color: #28a745;
|
||||
color: white;
|
||||
border-radius: 5px;
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
}
|
||||
.back-button:hover {
|
||||
background-color: #218838;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
span .sort-desc:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
span .sort-asc:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
.sortable select {
|
||||
background-color: #007BFF; /* Blue background */
|
||||
color: white; /* White text */
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 5px 10px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
appearance: none; /* Remove default browser styling */
|
||||
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-caret-down-fill' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658c-.566-.63-.106-1.658.753-1.658h9.592c.86 0 1.32 1.027.753 1.658L8.753 11.14a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 10px center;
|
||||
background-size: 12px;
|
||||
}
|
||||
|
||||
.sortable select:focus {
|
||||
outline: none;
|
||||
background-color: #0056b3; /* Darker blue on focus */
|
||||
}
|
||||
.download-btn {
|
||||
display: inline-block;
|
||||
padding: 10px 15px;
|
||||
background-color: #28a745;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
body {
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
table th, table td {
|
||||
font-size: 12px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
form {
|
||||
padding: 10px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
form input[type="text"],
|
||||
form input[type="number"],
|
||||
form input[type="date"],
|
||||
form input[type="email"],
|
||||
form textarea,
|
||||
select {
|
||||
padding: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
form button,
|
||||
.button,
|
||||
.back-button,
|
||||
.save-button,
|
||||
.action-button {
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#searchBar {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.sortable select {
|
||||
font-size: 14px;
|
||||
padding: 8px 10px;
|
||||
background-position: right 8px center;
|
||||
}
|
||||
}
|
||||
199
static/css/subcontractor_report.css
Normal file
199
static/css/subcontractor_report.css
Normal file
@@ -0,0 +1,199 @@
|
||||
/* Global box-sizing for predictable sizing */
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
/* Fluid font size between 20px and 24px */
|
||||
font-size: clamp(20px, 3vw, 24px);
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Form Styling */
|
||||
.info {
|
||||
width: 60%;
|
||||
max-width: 900px; /* optional max-width */
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
margin: 0 auto; /* center horizontally */
|
||||
}
|
||||
|
||||
/* Responsive Form Layout */
|
||||
.row1,
|
||||
.row2,
|
||||
.row3 {
|
||||
display: grid;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.row2,
|
||||
.row3 {
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 6px;
|
||||
/* Fluid font size between 14px and 16px */
|
||||
font-size: clamp(14px, 1.5vw, 16px);
|
||||
}
|
||||
|
||||
/* Table styling */
|
||||
.table-wrapper {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
table th,
|
||||
table td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
/* Fluid font size between 10px and 14px */
|
||||
font-size: clamp(10px, 1vw, 14px);
|
||||
}
|
||||
|
||||
table th {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table tr:nth-child(even) {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
table tr:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
display: inline-block;
|
||||
padding: 10px 15px;
|
||||
background-color: #28a745;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
margin-top: 15px;
|
||||
/* Fluid font size between 12px and 16px */
|
||||
font-size: clamp(12px, 1.5vw, 16px);
|
||||
}
|
||||
|
||||
.total-table {
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1024px) {
|
||||
.info {
|
||||
padding: 15px;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.row2,
|
||||
.row3 {
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
}
|
||||
|
||||
.invoice-table th,
|
||||
.invoice-table td {
|
||||
font-size: 12px;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.info {
|
||||
width: 90%;
|
||||
}
|
||||
.row1,
|
||||
.row2,
|
||||
.row3 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.table-wrapper {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
min-width: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
body {
|
||||
max-width: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
table th,
|
||||
table td {
|
||||
font-size: 10px;
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.info {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
font-size: 14px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
table th,
|
||||
table td {
|
||||
font-size: 8px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.total-table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
padding: 8px 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
111
static/css/upload_excel_file.css
Normal file
111
static/css/upload_excel_file.css
Normal file
@@ -0,0 +1,111 @@
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
background: #ffffff;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 20px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
form {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
display: block;
|
||||
margin: 0 auto 15px auto;
|
||||
font-size: 18px;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
border: 2px solid #007bff;
|
||||
border-radius: 5px;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
input[type="file"]:hover {
|
||||
border-color: #0056b3;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 15px 25px;
|
||||
font-size: 18px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #45a049;
|
||||
}
|
||||
|
||||
/* Style for the Back Button */
|
||||
.back-button {
|
||||
background-color: red;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
border-radius: 5px;
|
||||
display: inline-block;
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background-color: darkred;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.container {
|
||||
padding: 15px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
input[type="file"] {
|
||||
font-size: 16px;
|
||||
padding: 8px;
|
||||
}
|
||||
button, .back-button {
|
||||
font-size: 14px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 360px) {
|
||||
.container {
|
||||
width: 95%;
|
||||
padding: 10px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 18px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
input[type="file"] {
|
||||
font-size: 14px;
|
||||
padding: 6px;
|
||||
}
|
||||
button, .back-button {
|
||||
font-size: 12px;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
BIN
static/images/icons/bin_red_icon.png
Normal file
BIN
static/images/icons/bin_red_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
BIN
static/images/icons/pen_blue_icon.png
Normal file
BIN
static/images/icons/pen_blue_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
87
static/js/block.js
Normal file
87
static/js/block.js
Normal file
@@ -0,0 +1,87 @@
|
||||
window.onload = function () {
|
||||
document.getElementById('block_Name').focus();
|
||||
};
|
||||
|
||||
|
||||
$(document).ready(function () {
|
||||
$("#block_Name").on("input", function () {
|
||||
let blockName = $(this).val();
|
||||
let cleanedName = blockName.replace(/[^A-Za-z ]/g, "");
|
||||
$(this).val(cleanedName);
|
||||
});
|
||||
|
||||
$("#block_Name, #district_Id").on("input change", function () {
|
||||
let blockName = $("#block_Name").val().trim();
|
||||
let districtId = $("#district_Id").val();
|
||||
|
||||
if (blockName === "" || districtId === "") {
|
||||
$("#blockMessage").text("").css("color", "");
|
||||
$("#submitButton").prop("disabled", true);
|
||||
return;
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: "/check_block",
|
||||
type: "POST",
|
||||
contentType: "application/json",
|
||||
data: JSON.stringify({ block_Name: blockName, district_Id: districtId }),
|
||||
success: function (response) {
|
||||
if (response.status === "available") {
|
||||
$("#blockMessage").text(response.message).css("color", "green");
|
||||
$("#submitButton").prop("disabled", false);
|
||||
}
|
||||
},
|
||||
error: function (xhr) {
|
||||
if (xhr.status === 409) {
|
||||
$("#blockMessage").text("Block already exists!").css("color", "red");
|
||||
$("#submitButton").prop("disabled", true);
|
||||
} else if (xhr.status === 400) {
|
||||
$("#blockMessage").text("Invalid block name! Only letters are allowed.").css("color", "red");
|
||||
$("#submitButton").prop("disabled", true);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$("#blockForm").on("submit", function (event) {
|
||||
event.preventDefault();
|
||||
$.ajax({
|
||||
url: "/add_block",
|
||||
type: "POST",
|
||||
data: $(this).serialize(),
|
||||
success: function (response) {
|
||||
alert(response.message);
|
||||
location.reload();
|
||||
},
|
||||
error: function (xhr) {
|
||||
alert(xhr.responseJSON.message);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('#state_Id').change(function() {
|
||||
var stateId = $(this).val();
|
||||
if (stateId) {
|
||||
$.ajax({
|
||||
url: '/get_districts/' + stateId,
|
||||
type: 'GET',
|
||||
success: function(data) {
|
||||
var districtDropdown = $('#district_Id');
|
||||
districtDropdown.empty();
|
||||
districtDropdown.append('<option value="" disabled selected>Select District</option>');
|
||||
|
||||
data.districts.forEach(function(district) {
|
||||
districtDropdown.append('<option value="' + district.District_id + '">' + district.District_Name + '</option>');
|
||||
});
|
||||
|
||||
districtDropdown.prop('disabled', false);
|
||||
},
|
||||
error: function() {
|
||||
alert('Error fetching districts. Please try again.');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
$('#district_Id').prop('disabled', true);
|
||||
}
|
||||
});
|
||||
});
|
||||
62
static/js/district.js
Normal file
62
static/js/district.js
Normal file
@@ -0,0 +1,62 @@
|
||||
window.onload = function () {
|
||||
document.getElementById('district_Name').focus();
|
||||
};
|
||||
|
||||
|
||||
$(document).ready(function () {
|
||||
$("#district_Name").on("input", function () {
|
||||
let districtName = $(this).val();
|
||||
// Remove numbers and special characters automatically
|
||||
let cleanedName = districtName.replace(/[^A-Za-z ]/g, "");
|
||||
$(this).val(cleanedName);
|
||||
});
|
||||
|
||||
$("#district_Name, #state_Id").on("input change", function () {
|
||||
let districtName = $("#district_Name").val().trim();
|
||||
let stateId = $("#state_Id").val();
|
||||
|
||||
if (districtName === "" || stateId === "") {
|
||||
$("#districtMessage").text("").css("color", "");
|
||||
$("#submitButton").prop("disabled", true);
|
||||
return;
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: "/check_district",
|
||||
type: "POST",
|
||||
contentType: "application/json",
|
||||
data: JSON.stringify({ district_Name: districtName, state_Id: stateId }),
|
||||
success: function (response) {
|
||||
if (response.status === "available") {
|
||||
$("#districtMessage").text(response.message).css("color", "green");
|
||||
$("#submitButton").prop("disabled", false);
|
||||
}
|
||||
},
|
||||
error: function (xhr) {
|
||||
if (xhr.status === 409) {
|
||||
$("#districtMessage").text("District already exists!").css("color", "red");
|
||||
$("#submitButton").prop("disabled", true);
|
||||
} else if (xhr.status === 400) {
|
||||
$("#districtMessage").text("Invalid district name! Only letters are allowed.").css("color", "red");
|
||||
$("#submitButton").prop("disabled", true);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$("#districtForm").on("submit", function (event) {
|
||||
event.preventDefault();
|
||||
$.ajax({
|
||||
url: "/add_district",
|
||||
type: "POST",
|
||||
data: $(this).serialize(),
|
||||
success: function (response) {
|
||||
alert(response.message);
|
||||
location.reload();
|
||||
},
|
||||
error: function (xhr) {
|
||||
alert(xhr.responseJSON.message);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
18
static/js/edit_hold_type.js
Normal file
18
static/js/edit_hold_type.js
Normal file
@@ -0,0 +1,18 @@
|
||||
$("#updateHoldTypeForm").on("submit", function(event) {
|
||||
event.preventDefault();
|
||||
let holdTypeId = $("#hold_type_id").val();
|
||||
let newHoldType = $("#edit_hold_type").val().trim();
|
||||
let reg = /^[A-Za-z]/;
|
||||
|
||||
if (!reg.test(newHoldType)) {
|
||||
alert("Hold Type must start with a letter.");
|
||||
return;
|
||||
}
|
||||
|
||||
$.post(`/update_hold_type/${holdTypeId}`, { hold_type: newHoldType }, function(response) {
|
||||
alert(response.message);
|
||||
window.location.href = "/";
|
||||
}).fail(function(xhr) {
|
||||
alert(xhr.responseJSON.message);
|
||||
});
|
||||
});
|
||||
95
static/js/holdAmount.js
Normal file
95
static/js/holdAmount.js
Normal file
@@ -0,0 +1,95 @@
|
||||
$(document).ready(function () {
|
||||
// Create a module to manage hold amounts
|
||||
window.holdAmountModule = {
|
||||
holdCount: 0,
|
||||
holdTypes: [],
|
||||
|
||||
init: function() {
|
||||
this.loadHoldTypes();
|
||||
this.setupEventListeners();
|
||||
},
|
||||
|
||||
loadHoldTypes: function() {
|
||||
$.ajax({
|
||||
url: '/get_hold_types',
|
||||
method: 'GET',
|
||||
dataType: 'json',
|
||||
success: (data) => {
|
||||
this.holdTypes = data;
|
||||
$("#add_hold_amount").prop('disabled', false);
|
||||
},
|
||||
error: (err) => {
|
||||
console.error('Failed to load hold types', err);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
setupEventListeners: function() {
|
||||
$("#add_hold_amount").click(() => this.addHoldAmountField());
|
||||
$(document).on("click", ".remove-hold", (e) => this.removeHoldAmountField(e));
|
||||
$(document).on("change", ".hold-type-dropdown", () => this.refreshDropdowns());
|
||||
$(document).on("input", "input[name='hold_amount[]']", () => this.triggerHoldAmountChanged());
|
||||
},
|
||||
|
||||
addHoldAmountField: function() {
|
||||
this.holdCount++;
|
||||
$("#hold_amount_container").append(`
|
||||
<div class="hold-amount-field" id="hold_${this.holdCount}">
|
||||
<select name="hold_type[]" class="hold-type-dropdown" required>
|
||||
${this.generateOptions()}
|
||||
</select>
|
||||
<input type="number" step="0.01" name="hold_amount[]"
|
||||
class="hold-amount-input" placeholder="Hold Amount" required>
|
||||
<button type="button" class="remove-hold" data-id="hold_${this.holdCount}">X</button>
|
||||
</div>
|
||||
`);
|
||||
this.refreshDropdowns();
|
||||
this.triggerHoldAmountChanged();
|
||||
},
|
||||
|
||||
removeHoldAmountField: function(e) {
|
||||
const id = $(e.target).attr("data-id");
|
||||
$(`#${id}`).remove();
|
||||
this.refreshDropdowns();
|
||||
this.triggerHoldAmountChanged();
|
||||
},
|
||||
|
||||
generateOptions: function(selectedForThisDropdown = '') {
|
||||
const selectedValues = $("select[name='hold_type[]']").map(function() {
|
||||
return $(this).val();
|
||||
}).get();
|
||||
|
||||
let options = '<option value="">Select Hold Type</option>';
|
||||
this.holdTypes.forEach((type) => {
|
||||
if (!selectedValues.includes(type.hold_type) || type.hold_type === selectedForThisDropdown) {
|
||||
options += `<option value="${type.hold_type}">${type.hold_type}</option>`;
|
||||
}
|
||||
});
|
||||
return options;
|
||||
},
|
||||
|
||||
refreshDropdowns: function() {
|
||||
$("select[name='hold_type[]']").each(function() {
|
||||
const currentVal = $(this).val();
|
||||
$(this).html(window.holdAmountModule.generateOptions(currentVal));
|
||||
$(this).val(currentVal);
|
||||
});
|
||||
},
|
||||
|
||||
getTotalHoldAmount: function() {
|
||||
let total = 0;
|
||||
$("input[name='hold_amount[]']").each(function() {
|
||||
total += parseFloat($(this).val()) || 0;
|
||||
});
|
||||
return total;
|
||||
},
|
||||
|
||||
triggerHoldAmountChanged: function() {
|
||||
const event = new Event('holdAmountChanged');
|
||||
document.dispatchEvent(event);
|
||||
}
|
||||
};
|
||||
|
||||
// Initialize the module
|
||||
window.holdAmountModule.init();
|
||||
});
|
||||
39
static/js/hold_types.js
Normal file
39
static/js/hold_types.js
Normal file
@@ -0,0 +1,39 @@
|
||||
$(document).ready(function () {
|
||||
$("#hold_type").on("input", function () {
|
||||
let holdType = $(this).val().replace(/^\s+/, "");
|
||||
$(this).val(holdType);
|
||||
|
||||
let reg = /^[A-Za-z]/;
|
||||
|
||||
if (!reg.test(holdType)) {
|
||||
$("#holdTypeMessage").text("Hold Type must start with a letter.").css("color", "red");
|
||||
$("#addButton").prop("disabled", true);
|
||||
return;
|
||||
} else {
|
||||
$("#holdTypeMessage").text("").css("color", "");
|
||||
$("#addButton").prop("disabled", false);
|
||||
}
|
||||
});
|
||||
|
||||
$("#holdTypeForm").on("submit", function (event) {
|
||||
event.preventDefault();
|
||||
$.post("/add_hold_type", $(this).serialize(), function (response) {
|
||||
alert(response.message);
|
||||
location.reload();
|
||||
}).fail(function (xhr) {
|
||||
alert(xhr.responseJSON.message);
|
||||
});
|
||||
});
|
||||
|
||||
$(".delete-button").on("click", function () {
|
||||
let id = $(this).data("id");
|
||||
if (confirm("Are you sure?")) {
|
||||
$.post(`/delete_hold_type/${id}`, function (response) {
|
||||
alert(response.message);
|
||||
location.reload();
|
||||
}).fail(function (xhr) {
|
||||
alert(xhr.responseJSON.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
62
static/js/invoice.js
Normal file
62
static/js/invoice.js
Normal file
@@ -0,0 +1,62 @@
|
||||
// Subcontractor autocomplete functionality
|
||||
$(document).ready(function () {
|
||||
$("#subcontractor").keyup(function () {
|
||||
let query = $(this).val();
|
||||
if (query !== "") {
|
||||
$.ajax({
|
||||
url: "/search_subcontractor",
|
||||
method: "POST",
|
||||
data: { query: query },
|
||||
success: function (data) {
|
||||
$("#subcontractor_list").fadeIn().html(data);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
$("#subcontractor_list").fadeOut();
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on("click", "li", function () {
|
||||
$("#subcontractor").val($(this).text());
|
||||
$("#subcontractor_id").val($(this).attr("data-id"));
|
||||
$("#subcontractor_list").fadeOut();
|
||||
});
|
||||
});
|
||||
|
||||
// Success Alert: show alert and reload after 3 seconds
|
||||
function showSuccessAlert() {
|
||||
const alertBox = document.getElementById("invoiceSuccessAlert");
|
||||
alertBox.classList.add("show");
|
||||
setTimeout(() => {
|
||||
alertBox.classList.remove("show");
|
||||
// Reload page or redirect after alert hides
|
||||
window.location.href = '/add_invoice';
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// Submit form via AJAX
|
||||
$("#invoiceForm").on("submit", function (e) {
|
||||
e.preventDefault();
|
||||
let formData = $(this).serialize();
|
||||
$.ajax({
|
||||
url: '/add_invoice',
|
||||
method: 'POST',
|
||||
data: formData,
|
||||
success: function (response) {
|
||||
if(response.status === "success") {
|
||||
showSuccessAlert();
|
||||
} else {
|
||||
alert(response.message);
|
||||
}
|
||||
},
|
||||
error: function (xhr, status, error) {
|
||||
alert("Submission failed: " + error);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
window.onload = function () {
|
||||
document.getElementById('subcontractor').focus();
|
||||
};
|
||||
39
static/js/save_data_success.js
Normal file
39
static/js/save_data_success.js
Normal file
@@ -0,0 +1,39 @@
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const form = document.getElementById('saveForm');
|
||||
|
||||
form.addEventListener('submit', function (e) {
|
||||
e.preventDefault(); // Prevent normal form submission
|
||||
|
||||
const formData = new FormData(form);
|
||||
|
||||
fetch('/save_data', {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
}).then(response => response.json()).then(data => {
|
||||
if (data.success) {
|
||||
Swal.fire({
|
||||
icon: 'success',
|
||||
title: 'Success!',
|
||||
text: data.success,
|
||||
showConfirmButton: true,
|
||||
confirmButtonText: 'OK'
|
||||
}).then(() => {
|
||||
const redirectUrl = "{{ url_for('upload_excel_file') }}"; // Redirect after success pop
|
||||
});
|
||||
} else if (data.error) {
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Error!',
|
||||
text: data.error,
|
||||
});
|
||||
}
|
||||
}).catch(error => {
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Error!',
|
||||
text: 'An unexpected error occurred.',
|
||||
});
|
||||
console.error('Error:', error);
|
||||
});
|
||||
});
|
||||
});
|
||||
21
static/js/save_excel_file.js
Normal file
21
static/js/save_excel_file.js
Normal file
@@ -0,0 +1,21 @@
|
||||
$("#saveForm").on("submit", function (event) {
|
||||
event.preventDefault();
|
||||
$.ajax({
|
||||
url: "/save_data",
|
||||
type: "POST",
|
||||
data: $(this).serialize(),
|
||||
success: function (response) {
|
||||
if (response.success) {
|
||||
alert("Success: " + response.success); // Show success alert
|
||||
window.location.href = "/upload_excel_file"; // Redirect to the upload page
|
||||
}
|
||||
},
|
||||
error: function (xhr) {
|
||||
if (xhr.responseJSON && xhr.responseJSON.error) {
|
||||
alert("Error: " + xhr.responseJSON.error);
|
||||
} else {
|
||||
alert("An unexpected error occurred. Please try again.");
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
43
static/js/searchContractor.js
Normal file
43
static/js/searchContractor.js
Normal file
@@ -0,0 +1,43 @@
|
||||
$(document).ready(function () {
|
||||
function fetchResults() {
|
||||
let formData = $('#search-form').serialize();
|
||||
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: '/search_contractor',
|
||||
data: formData,
|
||||
success: function (data) {
|
||||
let tableBody = $('#result-table tbody');
|
||||
tableBody.empty();
|
||||
|
||||
if (data.length === 0) {
|
||||
tableBody.append('<tr><td colspan="6">No data found</td></tr>');
|
||||
} else {
|
||||
data.forEach(function (row) {
|
||||
tableBody.append(`
|
||||
<tr>
|
||||
<td><a href="/contractor_report/${row.Contractor_Id}" target="_blank">${row.Contractor_Name}</a></td>
|
||||
<td><a href="/pmc_report/${row.PMC_No}" target="_blank">${row.PMC_No}</a></td>
|
||||
<td>${row.State_Name}</td>
|
||||
<td>${row.District_Name}</td>
|
||||
<td>${row.Block_Name}</td>
|
||||
<td>${row.Village_Name}</td>
|
||||
</tr>
|
||||
`);
|
||||
});
|
||||
}
|
||||
},
|
||||
error: function (xhr) {
|
||||
alert(xhr.responseJSON.error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$('#search-form input').on('keyup change', function () {
|
||||
fetchResults();
|
||||
});
|
||||
});
|
||||
|
||||
window.onload = function () {
|
||||
document.getElementById('subcontractor_name').focus();
|
||||
};
|
||||
108
static/js/search_on_table.js
Normal file
108
static/js/search_on_table.js
Normal file
@@ -0,0 +1,108 @@
|
||||
|
||||
// Search on table using search inpute options
|
||||
function searchTable() {
|
||||
let input = document.getElementById("searchBar").value.toLowerCase();
|
||||
let rows = document.querySelectorAll("table tbody tr");
|
||||
|
||||
rows.forEach(row => {
|
||||
let blockName = row.cells[1].textContent.toLowerCase();
|
||||
let districtName = row.cells[2].textContent.toLowerCase();
|
||||
let villageName = row.cells[3].textContent.toLowerCase();
|
||||
|
||||
if (blockName.includes(input) || districtName.includes(input)|| villageName.includes(input)) {
|
||||
row.style.display = "";
|
||||
} else {
|
||||
row.style.display = "none";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// Common Sorting Script for Tables
|
||||
function sortTable(n, dir) {
|
||||
var table, rows, switching, i, x, y, shouldSwitch;
|
||||
table = document.getElementById("sortableTable"); // Ensure your table has this ID
|
||||
switching = true;
|
||||
|
||||
while (switching) {
|
||||
switching = false;
|
||||
rows = table.rows;
|
||||
|
||||
for (i = 1; i < (rows.length - 1); i++) {
|
||||
shouldSwitch = false;
|
||||
x = rows[i].getElementsByTagName("TD")[n];
|
||||
y = rows[i + 1].getElementsByTagName("TD")[n];
|
||||
|
||||
if (dir == "asc") {
|
||||
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
|
||||
shouldSwitch = true;
|
||||
break;
|
||||
}
|
||||
} else if (dir == "desc") {
|
||||
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
|
||||
shouldSwitch = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (shouldSwitch) {
|
||||
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
|
||||
switching = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Attach sorting functionality to all sortable tables
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
// Find all elements with the class "sortable-header"
|
||||
var sortableHeaders = document.querySelectorAll(".sortable-header");
|
||||
|
||||
sortableHeaders.forEach(function(header) {
|
||||
// Attach click event for ascending sort
|
||||
if (header.querySelector(".sort-asc")) {
|
||||
header.querySelector(".sort-asc").addEventListener("click", function() {
|
||||
var columnIndex = Array.from(header.parentNode.children).indexOf(header);
|
||||
sortTable(columnIndex, "asc");
|
||||
});
|
||||
}
|
||||
|
||||
// Attach click event for descending sort
|
||||
if (header.querySelector(".sort-desc")) {
|
||||
header.querySelector(".sort-desc").addEventListener("click", function() {
|
||||
var columnIndex = Array.from(header.parentNode.children).indexOf(header);
|
||||
sortTable(columnIndex, "desc");
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// ADD & Dispaly screen show
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const addButton = document.getElementById("addButton");
|
||||
const displayButton = document.getElementById("displayButton");
|
||||
const addForm = document.getElementById("addForm");
|
||||
const addTable = document.getElementById("addTable");
|
||||
|
||||
// Show "Add State" form by default
|
||||
addForm.style.display = "block";
|
||||
addButton.classList.add("active-button"); // Optional: Add styling for active button
|
||||
|
||||
addButton.addEventListener("click", function () {
|
||||
addForm.style.display = "block";
|
||||
addTable.style.display = "none";
|
||||
addButton.classList.add("active-button");
|
||||
displayButton.classList.remove("active-button");
|
||||
});
|
||||
|
||||
displayButton.addEventListener("click", function () {
|
||||
addForm.style.display = "none";
|
||||
addTable.style.display = "block";
|
||||
displayButton.classList.add("active-button");
|
||||
addButton.classList.remove("active-button");
|
||||
});
|
||||
});
|
||||
8
static/js/showSuccessAlert.js
Normal file
8
static/js/showSuccessAlert.js
Normal file
@@ -0,0 +1,8 @@
|
||||
function showSuccessAlert(event) {
|
||||
event.preventDefault(); // Prevent form submission
|
||||
document.getElementById("successPopup").style.display = "block";
|
||||
setTimeout(function() {
|
||||
document.getElementById("successPopup").style.display = "none";
|
||||
event.target.submit(); // Submit the form after showing the message
|
||||
}, 2000);
|
||||
}
|
||||
66
static/js/sorting.js
Normal file
66
static/js/sorting.js
Normal file
@@ -0,0 +1,66 @@
|
||||
$(document).ready(function () {
|
||||
function fetchResults(sortBy = '', sortOrder = '') {
|
||||
let formData = $('#search-form').serialize();
|
||||
formData += &sort_by=${sortBy}&sort_order=${sortOrder};
|
||||
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: '/search_contractor',
|
||||
data: formData,
|
||||
success: function (data) {
|
||||
let tableBody = $('#result-table tbody');
|
||||
tableBody.empty();
|
||||
|
||||
if (data.length === 0) {
|
||||
tableBody.append('<tr><td colspan="6">No data found</td></tr>');
|
||||
} else {
|
||||
data.forEach(function (row) {
|
||||
tableBody.append(`
|
||||
<tr>
|
||||
<td><a href="/contractor_report/${row.Contractor_Id}" target="_blank">${row.Contractor_Name}</a></td>
|
||||
<td><a href="/pmc_report/${row.PMC_No}" target="_blank">${row.PMC_No}</a></td>
|
||||
<td>${row.State_Name}</td>
|
||||
<td>${row.District_Name}</td>
|
||||
<td>${row.Block_Name}</td>
|
||||
<td>${row.Village_Name}</td>
|
||||
</tr>
|
||||
`);
|
||||
});
|
||||
}
|
||||
},
|
||||
error: function (xhr) {
|
||||
alert(xhr.responseJSON.error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$('#search-form input').on('keyup change', function () {
|
||||
fetchResults();
|
||||
});
|
||||
|
||||
function showSortOptions(thElement, column) {
|
||||
let sortMenu = $('#sort-options');
|
||||
let offset = $(thElement).position();
|
||||
let thHeight = $(thElement).outerHeight();
|
||||
|
||||
sortMenu.html(`
|
||||
<button onclick="fetchResults('${column}', 'ASC')">Ascending</button>
|
||||
<button onclick="fetchResults('${column}', 'DESC')">Descending</button>
|
||||
`);
|
||||
|
||||
sortMenu.css({
|
||||
display: 'block',
|
||||
top: offset.top + thHeight + 'px',
|
||||
left: offset.left + 'px'
|
||||
});
|
||||
}
|
||||
|
||||
$(document).click(function(event) {
|
||||
if (!$(event.target).closest('.sort-options, th').length) {
|
||||
$('#sort-options').hide();
|
||||
}
|
||||
});
|
||||
|
||||
window.fetchResults = fetchResults;
|
||||
window.showSortOptions = showSortOptions;
|
||||
});
|
||||
61
static/js/state.js
Normal file
61
static/js/state.js
Normal file
@@ -0,0 +1,61 @@
|
||||
window.onload = function () {
|
||||
document.getElementById('state_Name').focus();
|
||||
};
|
||||
|
||||
|
||||
$(document).ready(function () {
|
||||
$("#state_Name").on("input", function () {
|
||||
let stateName = $(this).val();
|
||||
// Remove numbers and special characters automatically
|
||||
let cleanedName = stateName.replace(/[^A-Za-z ]/g, "");
|
||||
$(this).val(cleanedName);
|
||||
});
|
||||
|
||||
$("#state_Name").on("input", function () {
|
||||
let stateName = $("#state_Name").val().trim();
|
||||
|
||||
if (stateName === "") {
|
||||
$("#stateMessage").text("").css("color", "");
|
||||
$("#submitButton").prop("disabled", true);
|
||||
return;
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: "/check_state",
|
||||
type: "POST",
|
||||
contentType: "application/json",
|
||||
data: JSON.stringify({ state_Name: stateName }),
|
||||
success: function (response) {
|
||||
if (response.status === "available") {
|
||||
$("#stateMessage").text(response.message).css("color", "green");
|
||||
$("#submitButton").prop("disabled", false);
|
||||
}
|
||||
},
|
||||
error: function (xhr) {
|
||||
if (xhr.status === 409) {
|
||||
$("#stateMessage").text("State already exists!").css("color", "red");
|
||||
$("#submitButton").prop("disabled", true);
|
||||
} else if (xhr.status === 400) {
|
||||
$("#stateMessage").text("Invalid state name! Only letters are allowed.").css("color", "red");
|
||||
$("#submitButton").prop("disabled", true);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$("#stateForm").on("submit", function (event) {
|
||||
event.preventDefault();
|
||||
$.ajax({
|
||||
url: "/add_state",
|
||||
type: "POST",
|
||||
data: $(this).serialize(),
|
||||
success: function (response) {
|
||||
alert(response.message);
|
||||
location.reload();
|
||||
},
|
||||
error: function (xhr) {
|
||||
alert(xhr.responseJSON.message);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
49
static/js/subcontractor.js
Normal file
49
static/js/subcontractor.js
Normal file
@@ -0,0 +1,49 @@
|
||||
function validateInput() {
|
||||
let isValid = true;
|
||||
|
||||
// Get form elements
|
||||
let contractorName = document.getElementById("Contractor_Name").value;
|
||||
let mobileNo = document.getElementById("Mobile_No").value;
|
||||
let panNo = document.getElementById("PAN_No").value;
|
||||
let email = document.getElementById("Email").value;
|
||||
let passwordField = document.getElementById("Contractor_password");
|
||||
let submitBtn = document.getElementById("submitBtn");
|
||||
|
||||
// Validation patterns
|
||||
let mobileRegex = /^[0-9]{10}$/;
|
||||
let panRegex = /^[A-Z0-9]{10}$/;
|
||||
let emailRegex = /^[a-z]+@[a-z]+\.[a-z]{2,6}$/;
|
||||
|
||||
// Validate Mobile No
|
||||
if (!mobileNo.match(mobileRegex)) {
|
||||
document.getElementById("mobileError").innerText = "Mobile No must be exactly 10 digits.";
|
||||
isValid = false;
|
||||
} else {
|
||||
document.getElementById("mobileError").innerText = "";
|
||||
}
|
||||
|
||||
// Validate PAN No
|
||||
if (!panNo.match(panRegex)) {
|
||||
document.getElementById("panError").innerText = "PAN No must be uppercase letters or digits (10 chars).";
|
||||
isValid = false;
|
||||
} else {
|
||||
document.getElementById("panError").innerText = "";
|
||||
}
|
||||
|
||||
// Validate Email
|
||||
if (!email.match(emailRegex)) {
|
||||
document.getElementById("emailError").innerText = "Email must be lowercase, contain '@' and '.'";
|
||||
isValid = false;
|
||||
} else {
|
||||
document.getElementById("emailError").innerText = "";
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Enable or disable the submit button
|
||||
submitBtn.disabled = !isValid;
|
||||
}
|
||||
|
||||
window.onload = function () {
|
||||
document.getElementById('Contractor_Name').focus();
|
||||
};
|
||||
12
static/js/validateFileInput.js
Normal file
12
static/js/validateFileInput.js
Normal file
@@ -0,0 +1,12 @@
|
||||
function validateFileInput() {
|
||||
const fileInput = document.querySelector('input[type="file"]');
|
||||
const filePath = fileInput.value;
|
||||
const allowedExtensions = /(\.xlsx|\.xls)$/i;
|
||||
|
||||
if (!allowedExtensions.exec(filePath)) {
|
||||
alert("Please upload a valid Excel file (.xlsx or .xls only).");
|
||||
fileInput.value = '';
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
102
static/js/village.js
Normal file
102
static/js/village.js
Normal file
@@ -0,0 +1,102 @@
|
||||
|
||||
window.onload = function () {
|
||||
document.getElementById('Village_Name').focus();
|
||||
};
|
||||
|
||||
$(document).ready(function () {
|
||||
$('#state_Id').change(function () {
|
||||
var stateId = $(this).val();
|
||||
if (stateId) {
|
||||
$.ajax({
|
||||
url: '/get_districts/' + stateId,
|
||||
type: 'GET',
|
||||
success: function (data) {
|
||||
var districtDropdown = $('#district_Id');
|
||||
districtDropdown.empty().append('<option value="" disabled selected>Select District</option>');
|
||||
data.districts.forEach(function (district) {
|
||||
districtDropdown.append('<option value="' + district.District_id + '">' + district.District_Name + '</option>');
|
||||
});
|
||||
districtDropdown.prop('disabled', false);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$('#district_Id').change(function () {
|
||||
var districtId = $(this).val();
|
||||
if (districtId) {
|
||||
$.ajax({
|
||||
url: '/get_blocks/' + districtId,
|
||||
type: 'GET',
|
||||
success: function (data) {
|
||||
var blockDropdown = $('#block_Id');
|
||||
blockDropdown.empty().append('<option value="" disabled selected>Select Block</option>');
|
||||
data.blocks.forEach(function (block) {
|
||||
blockDropdown.append('<option value="' + block.Block_Id + '">' + block.Block_Name + '</option>');
|
||||
});
|
||||
blockDropdown.prop('disabled', false);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$('#Village_Name').on('input', function () {
|
||||
var villageName = $(this).val();
|
||||
var validPattern = /^[A-Za-z ]*$/;
|
||||
|
||||
if (!validPattern.test(villageName)) {
|
||||
$('#villageMessage').text('Only letters and spaces are allowed!').css('color', 'red');
|
||||
$('#submitVillage').prop('disabled', true);
|
||||
} else {
|
||||
$('#villageMessage').text('');
|
||||
$('#submitVillage').prop('disabled', false);
|
||||
}
|
||||
});
|
||||
|
||||
$('#Village_Name, #block_Id').on('change keyup', function () {
|
||||
var blockId = $('#block_Id').val();
|
||||
var villageName = $('#Village_Name').val().trim();
|
||||
|
||||
if (blockId && villageName) {
|
||||
$.ajax({
|
||||
url: '/check_village',
|
||||
type: 'POST',
|
||||
data: { block_Id: blockId, Village_Name: villageName },
|
||||
success: function (response) {
|
||||
if (response.status === 'exists') {
|
||||
$('#villageMessage').text(response.message).css('color', 'red');
|
||||
$('#submitVillage').prop('disabled', true);
|
||||
} else {
|
||||
$('#villageMessage').text(response.message).css('color', 'green');
|
||||
$('#submitVillage').prop('disabled', false);
|
||||
}
|
||||
},
|
||||
error: function () {
|
||||
$('#villageMessage').text('Error checking village name').css('color', 'red');
|
||||
$('#submitVillage').prop('disabled', true);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$('#villageForm').submit(function (event) {
|
||||
event.preventDefault(); // Prevent default form submission
|
||||
|
||||
$.ajax({
|
||||
url: '/add_village',
|
||||
type: 'POST',
|
||||
data: $(this).serialize(),
|
||||
success: function (response) {
|
||||
if (response.status === 'success') {
|
||||
alert('Village added successfully!');
|
||||
location.reload(); // Refresh the page to show the updated list
|
||||
} else {
|
||||
alert('Error adding village. Please try again.');
|
||||
}
|
||||
},
|
||||
error: function () {
|
||||
alert('An error occurred. Please try again.');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user