Patrick
/
acaresydney_ts
Bevaka 1
Stjärnmärk 0
Förgrening 0
Kod Ärenden 0 Pull-förfrågningar 0 Släpp 0 Wiki Aktiviteter
Bläddra i källkod

has date picker field for boundary dates

master
patrick 6 år sedan
förälder
ca1972f5cc
incheckning
f3361ab0f6
5 ändrade filer med 491 tillägg och 183 borttagningar
Delad Vy
Diff Options
Show Stats Download Patch File Download Diff File
  1. +213
    -168
      css/bts_timesheet.css
  2. +195
    -0
      html/timesheet.html
  3. +71
    -13
      js/bts_timesheet.js
  4. +6
    -1
      js/feedback_card.js
  5. +6
    -1
      ts.php

+ 213
- 168
css/bts_timesheet.css Visa fil

@@ -4,16 +4,18 @@ body {
overflow: hidden;
}

.bts_hidden{
z-index: -1;
.bts_hidden {
z-index: -1;
}

.blink_me {
animation: blinker 0.3s linear infinite;
animation: blinker 0.3s linear infinite;
}

@keyframes blinker {
50% { opacity: 0; }
@keyframes blinker {
50% {
opacity: 0;
}
}

.titlebar_gradient {
@@ -25,12 +27,11 @@ body {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 ); /* IE6-9 */
}


.sheettitle h1:hover{
text-decoration: underline;
font-weight: bolder;
cursor: pointer;
animation: blinker 1s linear infinite;
.sheettitle h1:hover {
text-decoration: underline;
font-weight: bolder;
cursor: pointer;
animation: blinker 1s linear infinite;
}

.timesheets {
@@ -79,13 +80,12 @@ body {
}

.timesheets .workspace img {
display: block;
margin-top: 140px;
margin-left:auto;
margin-right:auto;
display: block;
margin-top: 140px;
margin-left: auto;
margin-right: auto;
}


.timesheets .statusbar {
position: relative;
height: 40px;
@@ -131,7 +131,8 @@ body {
height: calc(100vh - 80px);
background-color: dimgrey;
overflow: hidden;
text-align: center;
text-align: center;

/* scroll-behavior: smooth; */
}

@@ -245,7 +246,8 @@ div.peopleitem label:hover :checked + .card {
}

.statusbar .wifi i,
.statusbar .xero i {
.statusbar .xero i,
.statusbar .csv i {
font-size: 20px;
color: red;
position: absolute;
@@ -257,7 +259,7 @@ div.peopleitem label:hover :checked + .card {
width: 40px;
height: 100%;
margin-left: 0px;
margin-right: 100px;
margin-right: 5px;
display: inline-block;
background-color: white;
box-shadow: inset 0px 0px 2px black;
@@ -267,8 +269,23 @@ div.peopleitem label:hover :checked + .card {
box-shadow: 0px 0px 10px white;
}

.statusbar .csv {
width: 40px;
height: 100%;
margin-left: 0px;
margin-right: 5px;
display: inline-block;
background-color: white;
box-shadow: inset 0px 0px 2px black;
border-radius: 100px;
background-image: url(http://acaresydney.com.au/wp-content/uploads/2019/08/csv.png);
background-size: 40px;
box-shadow: 0px 0px 10px white;
}

.statusbar .xero:hover,
.statusbar .wifi:hover {
.statusbar .wifi:hover,
.statusbar .csv:hover {
box-shadow: 0px 0px 3px black;
}

@@ -293,12 +310,13 @@ div.peopleitem label:hover :checked + .card {
display: inline-block;
position: absolute;
right: 220px;
}

.statusbar #woh:hover {
cursor: pointer;
animation: blinker 0.3s linear infinite;
cursor: pointer;
animation: blinker 0.3s linear infinite;
}

.workinghours label {
transform: unset;
left: 0;
@@ -356,8 +374,8 @@ div.prevweek {
div.prevweek span:hover,
div.nextweek span:hover {
box-shadow: 1px 1px 10px black;
border-radius: 20px;
color: black;
border-radius: 20px;
color: black;
}

div.nextweek {
@@ -383,19 +401,29 @@ div.weekly div {

div.weekly div.weekname {
position: relative;
width: 130px;
width: 170px;
top: -5px;
border: 2px solid grey;
border-radius: 10px;
text-align: center;
color: white;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b5bdc8+0,828c95+36,28343b+100;Grey+Black+3D */
background: rgb(181,189,200); /* Old browsers */
background: -moz-linear-gradient(top, rgba(181,189,200,1) 0%, rgba(130,140,149,1) 36%, rgba(40,52,59,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */
color: white;

/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b5bdc8+0,828c95+36,28343b+100;Grey+Black+3D */
background: rgb(181,189,200); /* Old browsers */
background: -moz-linear-gradient(top, rgba(181,189,200,1) 0%, rgba(130,140,149,1) 36%, rgba(40,52,59,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */
}

div.weekly div.weekname input{
width: 80px;
height: 20px;
border:0px;
background-color:transparent;
color: white;
padding-left:4px;
padding-right:4px;
}

div.weekly div.weekname.prev {
@@ -411,10 +439,9 @@ div.weekly div.weekname.next {
}

div.weekly >div.weekname:hover,
div.weekly div[name='copyschedule']:hover
{
cursor: pointer;
box-shadow: 0px 0px 10px #2c87f0;
div.weekly div[name='copyschedule']:hover {
cursor: pointer;
box-shadow: 0px 0px 10px #2c87f0;
}

div.weekly div.copyprogress {
@@ -425,34 +452,41 @@ div.weekly div.copyprogress {
top: 0px;
border-radius: 2px;
box-shadow: inset 1px 1px 2px black;
text-align:center;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fefcea+0,f1da36+100;Gold+3D */
background: rgb(254,252,234); /* Old browsers */
background: -moz-linear-gradient(top, rgba(254,252,234,1) 0%, rgba(241,218,54,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 ); /* IE6-9 */
text-align: center;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fefcea+0,f1da36+100;Gold+3D */
background: rgb(254,252,234); /* Old browsers */
background: -moz-linear-gradient(top, rgba(254,252,234,1) 0%, rgba(241,218,54,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 ); /* IE6-9 */
}

div.copyprogress div[name='copyschedule'] {
position: relative;
top: -5px;
width: 100px;
width: 150px;
height: 25px;
padding: 0px;
border-radius: 10px;
margin: auto;
z-index: 1;
color: white;

margin:auto;
z-index:1;
color: white;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b5bdc8+0,828c95+36,28343b+100;Grey+Black+3D */
background: rgb(181,189,200); /* Old browsers */
background: -moz-linear-gradient(top, rgba(181,189,200,1) 0%, rgba(130,140,149,1) 36%, rgba(40,52,59,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b5bdc8+0,828c95+36,28343b+100;Grey+Black+3D */
background: rgb(181,189,200); /* Old browsers */
background: -moz-linear-gradient(top, rgba(181,189,200,1) 0%, rgba(130,140,149,1) 36%, rgba(40,52,59,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */
}

#gotoweek {
width: 50%;
background-color: transparent;
border: 0px;
color: white;
font-weight: 900;
}

div.weekdays {
@@ -475,29 +509,32 @@ div.week2 {
padding-left: 10px;
padding-right: 10px;
}

div.week1:hover,
div.week2:Hover {
border-radius: 20px;
box-shadow: 0px 0px 2px #2c87f0 inset;
cursor: pointer;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ebf1f6+0,abd3ee+50,89c3eb+51,d5ebfb+100;Blue+Gloss+%234 */
background: rgb(235,241,246); /* Old browsers */
background: -moz-linear-gradient(top, rgba(235,241,246,1) 0%, rgba(171,211,238,1) 50%, rgba(137,195,235,1) 51%, rgba(213,235,251,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=0 ); /* IE6-9 */
border-radius: 20px;
box-shadow: 0px 0px 2px #2c87f0 inset;
cursor: pointer;

/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ebf1f6+0,abd3ee+50,89c3eb+51,d5ebfb+100;Blue+Gloss+%234 */
background: rgb(235,241,246); /* Old browsers */
background: -moz-linear-gradient(top, rgba(235,241,246,1) 0%, rgba(171,211,238,1) 50%, rgba(137,195,235,1) 51%, rgba(213,235,251,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=0 ); /* IE6-9 */
}

div.week1.filtered,
div.week2.filtered{
border-radius: 20px;
/* background:white; */
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ebf1f6+0,abd3ee+50,89c3eb+51,d5ebfb+100;Blue+Gloss+%234 */
background: rgb(235,241,246); /* Old browsers */
background: -moz-linear-gradient(top, rgba(235,241,246,1) 0%, rgba(171,211,238,1) 50%, rgba(137,195,235,1) 51%, rgba(213,235,251,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=0 ); /* IE6-9 */
div.week2.filtered {
border-radius: 20px;

/* background:white; */
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ebf1f6+0,abd3ee+50,89c3eb+51,d5ebfb+100;Blue+Gloss+%234 */
background: rgb(235,241,246); /* Old browsers */
background: -moz-linear-gradient(top, rgba(235,241,246,1) 0%, rgba(171,211,238,1) 50%, rgba(137,195,235,1) 51%, rgba(213,235,251,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=0 ); /* IE6-9 */
}

div.week1:after,
@@ -525,40 +562,43 @@ div.week2 > div {
height: 40px;
margin-top: 5px;
font-weight: bolder;
border-radius: 10px;
border-radius: 10px;
}

div.week1 div:hover,
div.week2 div:hover
{
cursor:pointer;
box-shadow: 0px 0px 10px red;
div.week2 div:hover {
cursor: pointer;
box-shadow: 0px 0px 10px red;
}

div.week1 > div {
box-shadow: 0px 0px 10px white inset;
}
.week1color{
color: black;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ebe9f9+0,d8d0ef+50,cec7ec+51,c1bfea+100;Purple+3D+%231 */
background: #ebe9f9; /* Old browsers */
background: -moz-linear-gradient(top, #ebe9f9 0%, #d8d0ef 50%, #cec7ec 51%, #c1bfea 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ebe9f9 0%,#d8d0ef 50%,#cec7ec 51%,#c1bfea 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ebe9f9 0%,#d8d0ef 50%,#cec7ec 51%,#c1bfea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebe9f9', endColorstr='#c1bfea',GradientType=0 ); /* IE6-9 */

.week1color {
color: black;

/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ebe9f9+0,d8d0ef+50,cec7ec+51,c1bfea+100;Purple+3D+%231 */
background: #ebe9f9; /* Old browsers */
background: -moz-linear-gradient(top, #ebe9f9 0%, #d8d0ef 50%, #cec7ec 51%, #c1bfea 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ebe9f9 0%,#d8d0ef 50%,#cec7ec 51%,#c1bfea 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ebe9f9 0%,#d8d0ef 50%,#cec7ec 51%,#c1bfea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebe9f9', endColorstr='#c1bfea',GradientType=0 ); /* IE6-9 */
}

div.week2 > div {
box-shadow: 0px 0px 10px white inset;
}
.week2color{
color:white;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#627d4d+0,1f3b08+100;Olive+3D */
background: #627d4d; /* Old browsers */
background: -moz-linear-gradient(top, #627d4d 0%, #1f3b08 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #627d4d 0%,#1f3b08 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #627d4d 0%,#1f3b08 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#627d4d', endColorstr='#1f3b08',GradientType=0 ); /* IE6-9 */

.week2color {
color: white;

/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#627d4d+0,1f3b08+100;Olive+3D */
background: #627d4d; /* Old browsers */
background: -moz-linear-gradient(top, #627d4d 0%, #1f3b08 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #627d4d 0%,#1f3b08 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #627d4d 0%,#1f3b08 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#627d4d', endColorstr='#1f3b08',GradientType=0 ); /* IE6-9 */
}

div.assignment > div {
@@ -624,11 +664,11 @@ div.blueTable {
width: 100%;
text-align: left;
border-collapse: collapse;
border:0px;
border: 0px;
}

div.blueTable.emptyrecord{
background-color: #eeeeee;
div.blueTable.emptyrecord {
background-color: #eeeeee;
}

.divTable.blueTable .divTableCell,
@@ -703,31 +743,30 @@ div.blueTable.emptyrecord{
/* DivTable.com */
.divTable {
display: table;
margin: 3px 0px 3px 0px;
margin: 3px 0px 3px 0px;
}

.divTable.highlight{
box-shadow: 1px 1px 10px green;
.divTable.highlight {
box-shadow: 1px 1px 10px green;
}

.divTable.invalidjob.highlight{
box-shadow: 1px 1px 10px #f50202;
.divTable.invalidjob.highlight {
box-shadow: 1px 1px 10px #f50202;
}

.divTable.highlight.newcopy{
box-shadow: 1px 1px 10px orange;
border:5px orange solid;
.divTable.highlight.newcopy {
box-shadow: 1px 1px 10px orange;
border: 5px orange solid;
}


.divTableRow {
display: table-row;
}

.divTableRow.errmsg{
background-color:white;
font-weight:bolder;
color:red;
.divTableRow.errmsg {
background-color: white;
font-weight: bolder;
color: red;
}

.divTableHeading {
@@ -778,120 +817,126 @@ div.btos {
}

div.bstart,
div.bfinish{
width:11%;
div.bfinish {
width: 11%;
}

div.brate{
width: 10%;
max-width: 20px;
}
.divTable div > select{
width: 100%;
height: 100%;
div.brate {
width: 10%;
max-width: 20px;
}

.divTable div > select {
width: 100%;
height: 100%;
}

div.bdelete,
div.bsave,
div.bconfirmed {
text-align:center;
text-align: center;
width: 5%;
}

div.brating{
div.brating {
text-align: center;
cursor: pointer;
cursor: pointer;
}


.brating {
unicode-bidi: bidi-override;
direction: rtl;
unicode-bidi: bidi-override;
direction: rtl;
}

div.workspace .brating > span:hover:before,
div.workspace .brating > span:hover ~ span:before {
content: "\2605";
position: absolute;
content: "\2605";
position: absolute;
}

div.bsave span.ticon-copy{
div.bsave span.ticon-copy {
display: none;
}
div.bsave span.ticon-save{

div.bsave span.ticon-save {
display: inline-block;
border: 3px solid lightgrey;
border: 3px solid lightgrey;
padding: 5px;
border-radius: 5px;
color: black;
cursor: pointer;
color: black;
cursor: pointer;
}
div.bsave.saved span.ticon-save{

div.bsave.saved span.ticon-save {
display: none;
}

div.bsave.saved span.ticon-copy{
div.bsave.saved span.ticon-copy {
display: inline-block;
border: 3px solid orange;
padding: 5px;
border-radius: 20px;
color: orange;
color: orange;
}
div.bdelete span.ticon-trash{

div.bdelete span.ticon-trash {
display: inline-block;
border: 3px solid lightgrey;
padding: 5px;
border-radius: 5px;
color: red;
cursor: pointer;
color: red;
cursor: pointer;
}

div.workspace div > span:hover{
box-shadow:0px 0px 10px black;
div.workspace div > span:hover {
box-shadow: 0px 0px 10px black;
}

div.divTableHeading div > span:hover{
cursor: pointer;
animation: blinker 0.3s linear infinite;
div.divTableHeading div > span:hover {
cursor: pointer;
animation: blinker 0.3s linear infinite;
}

/* short code for the table */
div.btos select,
div.bstart input,
div.bfinish input{
width: 100%;
height: 98%;
div.bfinish input {
width: 100%;
height: 98%;
}

div.divTable.validjob{
border: 0px solid white;
div.divTable.validjob {
border: 0px solid white;
}

div.divTable.invalidjob{
border-left: 2px solid red;
border-right: 2px solid red;
div.divTable.invalidjob {
border-left: 2px solid red;
border-right: 2px solid red;
}

div.divTable .invalid{
background-color:yellow;
div.divTable .invalid {
background-color: yellow;
}
/* end of div table */

/* end of div table */
/* pop up message box */
.bts_message .ult_modal-body{
height:50vh;
overflow:scroll;
.bts_message .ult_modal-body {
height: 50vh;
overflow: scroll;
}
.bts_message .ult_modal-body .sent{
color: green;

.bts_message .ult_modal-body .sent {
color: green;
}
.bts_message .ult_modal-body .nojob{
color: dimgrey;

.bts_message .ult_modal-body .nojob {
color: dimgrey;
}
.bts_message .ult_modal-body .error{
color : red;

.bts_message .ult_modal-body .error {
color: red;
}
.bts_message .ult_modal-body .span{
font-weight:900;

.bts_message .ult_modal-body .span {
font-weight: 900;
}

+ 195
- 0
html/timesheet.html Visa fil

@@ -0,0 +1,195 @@
<div class='peoplebar left'>
<div class='b_search titlebar_gradient'>
<span class="ticon ticon-search"></span>
<input type="text" placeholder="staff">
<span class="ticon ticon-times-circle-o"></span>
</div>
<button class='peoplelist' name='up'>
<span class="ticon ticon-angle-double-up"></span>
</button>
<div class="stafflist userlist">
<img>
</div>
<button class='peoplelist' name='down'>
<span class="ticon ticon-angle-double-down"></span>
</button>
</div>
<div class='peoplebar right'>
<div class='b_search titlebar_gradient'>
<span class="ticon ticon-search"></span>
<input type="text" placeholder="client">
<span class="ticon ticon-times-circle-o"></span>
</div>
<button class='peoplelist' name='up'>
<span class="ticon ticon-angle-double-up"></span>
</button>
<div class="clientlist userlist">
<img>
</div>
<button class='peoplelist' name='down'>
<span class="ticon ticon-angle-double-down"></span>
</button>
</div>
<div class='timesheets'>
<div class='sheettitle titlebar_gradient'>
<h1>Web Office - Today:<span name='today'> Today </span> </h1>
</div>
<div class='sheetsheader'>
<div class='weekly'>
<div class='weekname prev'>
<input id='week1b' type=text class='boundary_datepicker' value="2019-07-01" placeholder="2019-07-01">Week
<span name='week1'>10</span>
<i class="ticon ticon-caret-right"></i>
</div>
<div class='copyprogress'>
<div name='copyschedule'>
Add a Job
<span class='ticon ticon-plus'></span>
</div>
</div>
<div class='weekname next'>
<i class="ticon ticon-caret-left"></i>
Week
<span name='week2'>11</span>
<input id='week2b' type=text class='boundary_datepicker' value="2019-07-01" placeholder="2019-07-01">
</div>
<div class="weekdays">
<div class='week1'>
<div class='week1color'>
<span name='w1n1'>Mon</span>
<br>
<span class="weekday" name='w1d1'>12</span>
</div>
<div class='week1color'>
<span name='w1n2'>Tue</span>
<br>
<span class="weekday" name='w1d2'>12</span>
</div>
<div class='week1color'>
<span name='w1n3'>Wed</span>
<br>
<span class="weekday" name='w1d3'>12</span>
</div>
<div class='week1color'>
<span name='w1n4'>Thu</span>
<br>
<span class="weekday" name='w1d4'>12</span>
</div>
<div class='week1color'>
<span name='w1n5'>Fri</span>
<br>
<span class="weekday" name='w1d5'>12</span>
</div>
<div class='week1color'>
<span name='w1n6'>Sat</span>
<br>
<span class="weekday" name='w1d6'>12</span>
</div>
<div class='week1color'>
<span name='w1n7'>Sun</span>
<br>
<span class="weekday" name='w1d7'>12</span>
</div>
</div>
<div class='week2'>
<div class='week2color'>
<span name='w2n1'>Mon</span>
<br>
<span class="weekday" name='w2d1'>12</span>
</div>
<div class='week2color'>
<span name='w2n2'>Tue</span>
<br>
<span class="weekday" name='w2d2'>12</span>
</div>
<div class='week2color'>
<span name='w2n3'>Wed</span>
<br>
<span class="weekday" name='w2d3'>12</span>
</div>
<div class='week2color'>
<span name='w2n4'>Thu</span>
<br>
<span class="weekday" name='w2d4'>12</span>
</div>
<div class='week2color'>
<span name='w2n5'>Fri</span>
<br>
<span class="weekday" name='w2d5'>12</span>
</div>
<div class='week2color'>
<span name='w2n6'>Sat</span>
<br>
<span class="weekday" name='w2d6'>12</span>
</div>
<div class='week2color'>
<span name='w2n7'>Sun</span>
<br>
<span class="weekday" name='w2d7'>12</span>
</div>
</div>
</div>
</div>
<div class='prevweek left'>
<span class="ticon ticon-arrow-circle-left"></span>
</div>
<div class='nextweek right'>
<span class="ticon ticon-arrow-circle-right"></span>
</div>
<div class="sheettableheader">
<div class="divTable blueTable">
<div class="divTableHeading">
<div class="divTableRow">
<div class="divTableHead btos">Type of Service</div>
<div class="divTableHead bstart">Start</div>
<div class="divTableHead bfinish">Finish</div>
<div class="divTableHead brate">Hourly Rate</div>
<div class="divTableHead bstaff">Staff</div>
<div class="divTableHead bclient">Client</div>
<div class="divTableHead bconfirmed">Ack</div>
<div class="divTableHead brating">
<span class="ticon ticon-star"></span>
<span class="ticon ticon-star"></span>
<span class="ticon ticon-star"></span>
<span class="ticon ticon-star"></span>
<span class="ticon ticon-star"></span>
</div>
<div class="divTableHead bdelete">
<span class="ticon ticon-plus"></span>
</div>
<div class="divTableHead bsave">
<span class="ticon ticon-save"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='workspace'>
<img src="#">
</div>
<div class='statusbar titlebar_gradient'>
<div class='xero'>
<i class="ticon ticon-times"></i>
</div>
<div class='wifi'>
<i class="ticon ticon-times"></i>
</div>
<div class='csv'>
<i class="ticon ticon-times"></i>
</div>
<div class='wages'>
$
<div name='number'>
3214
</div>
</div>
<div class='workinghours'>
<label for='woh'> Total Hours</label>
<input id="woh" type="text" value="1553.5" readonly>
</div>
<button name='confirmschedule'>
Confirm Schedule
</button>
</div>
</div>

+ 71
- 13
js/bts_timesheet.js Visa fil

@@ -213,6 +213,13 @@
else
$('div.wifi i').hide();
}
function csv(t){
if (t)
$('div.csv i').show();
else
$('div.csv i').hide();
}

function init_user_search(){
$('div.b_search input').keyup(debounce(function(e){
@@ -858,31 +865,45 @@
function init_weekdays(){
var curr = new Date; // get current date
// First day is the day of the month - the day of the week
init_weekdays_by_anchor(curr, true);
return;
}

function init_weekdays_by_anchor(anchor, is_week1){
var curr = new Date(anchor); // get the date;
if (!is_week1){ //it is week2, shift for 7 days;
curr.setDate(curr.getDate() -7); //curr will be changed;
}

var first = curr.getDate() - curr.getDay() + 1; //+1 we want Mon as first
var last = first + 6; // last day is the first day + 6

//var firstday = new Date(curr.setDate(first)); //Mon
//var lastday = new Date(curr.setDate(last)); //Sun
if (curr.getDay() == 0 ){// it's Sunday;
last = curr.getDate();
first = last - 6;
}
var pos = 1; //first lot
for (var i=first; i<=last; i++)
{
var now = new Date;
var now = new Date(curr);
var d1 = new Date(now.setDate(i));
now = new Date;
now = new Date(curr);
var d2 = new Date(now.setDate(i+7));
set_day_number(1,pos, d1); //week 1
set_day_number(2,pos, d2); //week 2
pos +=1;
}
}

function set_day_number(week, index, date){
var selector = 'span[name="w'+week+'d'+index+'"]';
$(selector).html(date.getDate());
$(selector).data({date:date});
console.log('set w%d-d%d %o', week,index,date);
//console.log('set w%d-d%d %o', week,index,date);
}
function set_today(){
@@ -905,6 +926,16 @@
var num = date.get_week_number();
$('div.weekly span[name="week1"]').html(num);
$('div.weekly span[name="week2"]').html(num+1);
set_week_boundry();
}
function set_week_boundry()
{
var date = $('span[name="w1d1"]').data().date;
$('#week1b').attr('value', format_date(date));
var date = $('span[name="w2d7"]').data().date;
$('#week2b').attr('value', format_date(date));
}
function number_of_unsaved_job(){
@@ -928,7 +959,7 @@
$(e).data({data:newdate});
});
set_week_number();
load_timesheet();
debounced_load_timesheet();
});
$('div.nextweek.right').click(function(){
if (number_of_unsaved_job() > 0){
@@ -943,9 +974,19 @@
$(e).data({data:newdate});
});
set_week_number();
load_timesheet();
debounced_load_timesheet();
});
$('div.weekly div.weekname.prev >input ').click(function(e){
e.stopPropagation();
});
$('div.weekly div.weekname.prev >input ').change(function(e){
var date = $('#week1b').attr('value');
init_weekdays_by_anchor(date, true);
set_week_number();
debounced_load_timesheet();
});
$('div.weekly div.weekname.prev').click(function(){
if (!confirm ('copy entire week to next week? '))
return;
@@ -970,11 +1011,25 @@
show_jobs(job_els);
debounced_calculate();
});

$('div.weekly div.weekname.next > input').click(function(e){
e.stopPropagation();
});
$('div.weekly div.weekname.next').click(function(){
alert('you can only copy from past to future (left to right)');
$('div.weekly div.weekname.next >input ').change(function(e){
e.stopPropagation();
var date = $('#week2b').attr('value');
init_weekdays_by_anchor(date, false);
set_week_number();
debounced_load_timesheet();
});
$('div.weekly div.weekname.next').click(function(e){
$(e).find('input').trigger('click');
});

$('div.week1 > div').click(function(e){
e.stopPropagation();
if ($('div.bstart input.blink_me').length == 0){
@@ -1066,7 +1121,7 @@
$('div.bstart input').removeClass('blink_me');
}
$('div.sheettitle h1').click(function(){
$('div.sheettitle h1 span').click(function(){
reset_title_to_today();
load_timesheet();
});
@@ -1077,6 +1132,7 @@
set_week_number();
}

var debounced_load_timesheet = debounce(load_timesheet,1000);
function load_timesheet()
{
@@ -1340,6 +1396,7 @@
list_clients();
xero(false);
wifi(false);
csv(false);
init_user_search();
//ajax_earning_rate();
reset_title_to_today();
@@ -1411,7 +1468,8 @@
// }
init_ts();

// $( "#week1b" ).datepicker("option", "dateFormat", "yy-mm-dd");
// $( "#week2b" ).datepicker("option", "dateFormat", "yy-mm-dd");
/*________________________________________________________________________*/
});

+ 6
- 1
js/feedback_card.js Visa fil

@@ -160,9 +160,14 @@
function get_this_week_start(){
var curr = new Date; // get current date
// First day is the day of the month - the day of the week
var first = curr.getDate() - curr.getDay() + 1; //+1 we want Mon as first
var last = first + 6; // last day is the first day + 6
// First day is the day of the month - the day of the week
if(curr.getDay()==0)//sunday
{
last = curr.getDate();
first = last - 6;
}

var firstday = new Date(curr.setDate(first)); //Mon
firstday.setHours(0,0,0);

+ 6
- 1
ts.php Visa fil

@@ -47,6 +47,8 @@ class AcareOffice{
add_shortcode( 'bts_type_of_service', array($this, 'bts_type_of_service'));
add_shortcode( 'bts_staff_job_summary', array($this, 'bts_staff_job_summary'));
add_shortcode( 'bts_feedback_card', array($this, 'bts_feedback_card'));
add_shortcode( 'bb_timesheet_canvas', array($this, 'bb_timesheet_canvas'));
//user profile page
add_shortcode( 'bts_user_name', array($this,'bts_user_name'));
@@ -553,7 +555,10 @@ class AcareOffice{
{
return $this->template('bts_feedback_card', 'feedback_card.html');
}
public function bb_timesheet_canvas($attr)
{
return file_get_contents(plugin_dir_path(__FILE__) . "/html/timesheet.html");
}
//generate template based on html file
private function template($id, $file)
{

Write Förhandsgranska
Laddar…
Avbryt
Spara