Event schedule
This commit is contained in:
Magnus Åhall
parent
d186489f28
commit
3b8c6432b6
7 changed files with 210 additions and 64 deletions
|
|
@ -526,7 +526,7 @@ header .menu {
|
|||
grid-area: 1 / 1 / 2 / 2;
|
||||
}
|
||||
/* ============================================================= */
|
||||
#file-section {
|
||||
#schedule-section {
|
||||
grid-area: files;
|
||||
justify-self: center;
|
||||
width: calc(100% - 32px);
|
||||
|
|
@ -536,6 +536,23 @@ header .menu {
|
|||
border-radius: 8px;
|
||||
margin-top: 32px;
|
||||
margin-bottom: 32px;
|
||||
color: #000;
|
||||
}
|
||||
#schedule-section .header {
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
#file-section {
|
||||
grid-area: schedule;
|
||||
justify-self: center;
|
||||
width: calc(100% - 32px);
|
||||
max-width: 900px;
|
||||
padding: 32px;
|
||||
background: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
margin-top: 32px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
#file-section .header {
|
||||
font-weight: bold;
|
||||
|
|
@ -634,9 +651,9 @@ header .menu {
|
|||
}
|
||||
.layout-tree {
|
||||
display: grid;
|
||||
grid-template-areas: "header header" "tree crumbs" "tree child-nodes" "tree name" "tree content" "tree checklist" "tree files" "tree blank";
|
||||
grid-template-areas: "header header" "tree crumbs" "tree child-nodes" "tree name" "tree content" "tree checklist" "tree schedule" "tree files" "tree blank";
|
||||
grid-template-columns: min-content 1fr;
|
||||
grid-template-rows: min-content /* header */ min-content /* crumbs */ min-content /* child-nodes */ min-content /* name */ min-content /* content */ min-content /* checklist */ min-content /* files */ 1fr;
|
||||
grid-template-rows: min-content /* header */ min-content /* crumbs */ min-content /* child-nodes */ min-content /* name */ min-content /* content */ min-content /* checklist */ min-content /* schedule */ min-content /* files */ 1fr;
|
||||
/* blank */
|
||||
color: #fff;
|
||||
min-height: 100%;
|
||||
|
|
@ -669,9 +686,9 @@ header .menu {
|
|||
display: block;
|
||||
}
|
||||
.layout-crumbs {
|
||||
grid-template-areas: "header" "crumbs" "child-nodes" "name" "content" "checklist" "files" "blank";
|
||||
grid-template-areas: "header" "crumbs" "child-nodes" "name" "content" "checklist" "schedule" "files" "blank";
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: min-content /* header */ min-content /* crumbs */ min-content /* child-nodes */ min-content /* name */ min-content /* content */ min-content /* checklist */ min-content /* files */ 1fr;
|
||||
grid-template-rows: min-content /* header */ min-content /* crumbs */ min-content /* child-nodes */ min-content /* name */ min-content /* content */ min-content /* checklist */ min-content /* schedule */ min-content /* files */ 1fr;
|
||||
/* blank */
|
||||
}
|
||||
.layout-crumbs #tree {
|
||||
|
|
@ -718,17 +735,17 @@ header .menu {
|
|||
}
|
||||
#app.node {
|
||||
display: grid;
|
||||
grid-template-areas: "header header" "tree crumbs" "tree child-nodes" "tree name" "tree content" "tree checklist" "tree files" "tree blank";
|
||||
grid-template-areas: "header header" "tree crumbs" "tree child-nodes" "tree name" "tree content" "tree checklist" "tree schedule" "tree files" "tree blank";
|
||||
grid-template-columns: min-content 1fr;
|
||||
grid-template-rows: min-content /* header */ min-content /* crumbs */ min-content /* child-nodes */ min-content /* name */ min-content /* content */ min-content /* checklist */ min-content /* files */ 1fr;
|
||||
grid-template-rows: min-content /* header */ min-content /* crumbs */ min-content /* child-nodes */ min-content /* name */ min-content /* content */ min-content /* checklist */ min-content /* schedule */ min-content /* files */ 1fr;
|
||||
/* blank */
|
||||
color: #fff;
|
||||
min-height: 100%;
|
||||
}
|
||||
#app.node.toggle-tree {
|
||||
grid-template-areas: "header" "crumbs" "child-nodes" "name" "content" "checklist" "files" "blank";
|
||||
grid-template-areas: "header" "crumbs" "child-nodes" "name" "content" "checklist" "schedule" "files" "blank";
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: min-content /* header */ min-content /* crumbs */ min-content /* child-nodes */ min-content /* name */ min-content /* content */ min-content /* checklist */ min-content /* files */ 1fr;
|
||||
grid-template-rows: min-content /* header */ min-content /* crumbs */ min-content /* child-nodes */ min-content /* name */ min-content /* content */ min-content /* checklist */ min-content /* schedule */ min-content /* files */ 1fr;
|
||||
/* blank */
|
||||
}
|
||||
#app.node.toggle-tree #tree {
|
||||
|
|
@ -750,11 +767,22 @@ header .menu {
|
|||
#profile-settings .passwords div {
|
||||
white-space: nowrap;
|
||||
}
|
||||
#schedule-events {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, min-content);
|
||||
grid-gap: 4px 12px;
|
||||
margin: 32px;
|
||||
color: #000;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#schedule-events .header {
|
||||
font-weight: bold;
|
||||
}
|
||||
@media only screen and (max-width: 932px) {
|
||||
#app.node {
|
||||
grid-template-areas: "header" "crumbs" "child-nodes" "name" "content" "checklist" "files" "blank";
|
||||
grid-template-areas: "header" "crumbs" "child-nodes" "name" "content" "checklist" "schedule" "files" "blank";
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: min-content /* header */ min-content /* crumbs */ min-content /* child-nodes */ min-content /* name */ min-content /* content */ min-content /* checklist */ min-content /* files */ 1fr;
|
||||
grid-template-rows: min-content /* header */ min-content /* crumbs */ min-content /* child-nodes */ min-content /* name */ min-content /* content */ min-content /* checklist */ min-content /* schedule */ min-content /* files */ 1fr;
|
||||
/* blank */
|
||||
}
|
||||
#app.node #tree {
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@ export class NodeUI extends Component {
|
|||
this.nodeContent = createRef()
|
||||
this.nodeProperties = createRef()
|
||||
this.keys = signal([])
|
||||
|
||||
this.page = signal('node')
|
||||
window.addEventListener('popstate', evt => {
|
||||
if (evt.state && evt.state.hasOwnProperty('nodeID'))
|
||||
|
|
@ -59,7 +58,7 @@ export class NodeUI extends Component {
|
|||
case 'node':
|
||||
if (node.ID == 0) {
|
||||
page = html`
|
||||
<div style="cursor: pointer; color: #000; text-align: center;" onclick=${()=>this.page.value = 'schedule-events'}>Schedule events</div>
|
||||
<div style="cursor: pointer; color: #000; text-align: center;" onclick=${() => this.page.value = 'schedule-events'}>Schedule events</div>
|
||||
${children.length > 0 ? html`<div class="child-nodes">${children}</div><div id="notes-version">Notes version ${window._VERSION}</div>` : html``}
|
||||
`
|
||||
} else {
|
||||
|
|
@ -73,6 +72,7 @@ export class NodeUI extends Component {
|
|||
${node.Name} ${padlock}
|
||||
</div>
|
||||
<${NodeContent} key=${node.ID} node=${node} ref=${this.nodeContent} />
|
||||
<${NodeEvents} events=${node.ScheduleEvents.value} />
|
||||
<${Checklist} ui=${this} groups=${node.ChecklistGroups} />
|
||||
<${NodeFiles} node=${this.node.value} />
|
||||
`
|
||||
|
|
@ -250,15 +250,12 @@ export class NodeUI extends Component {
|
|||
})
|
||||
}//}}}
|
||||
saveNode() {//{{{
|
||||
/*
|
||||
let nodeContent = this.nodeContent.current
|
||||
if (this.page.value != 'node' || nodeContent === null)
|
||||
return
|
||||
*/
|
||||
|
||||
let content = this.node.value.content()
|
||||
this.node.value.setContent(content)
|
||||
this.node.value.save(() => this.props.app.nodeModified.value = false)
|
||||
this.node.value.save(() => {
|
||||
this.props.app.nodeModified.value = false
|
||||
this.node.value.retrieve()
|
||||
})
|
||||
}//}}}
|
||||
renameNode() {//{{{
|
||||
let name = prompt("New name")
|
||||
|
|
@ -389,6 +386,24 @@ class MarkdownContent extends Component {
|
|||
}//}}}
|
||||
}
|
||||
|
||||
class NodeEvents extends Component {
|
||||
render({ events }) {//{{{
|
||||
if (events.length == 0)
|
||||
return html``
|
||||
|
||||
const eventElements = events.map(evt => {
|
||||
const dt = evt.Time.split('T')
|
||||
return html`<div>${dt[0]} ${dt[1].slice(0, 5)}</div>`
|
||||
})
|
||||
return html`
|
||||
<div id="schedule-section">
|
||||
<div class="header">Schedule events</div>
|
||||
${eventElements}
|
||||
</div>
|
||||
`
|
||||
}//}}}
|
||||
}
|
||||
|
||||
class NodeFiles extends Component {
|
||||
render({ node }) {//{{{
|
||||
if (node.Files === null || node.Files.length == 0)
|
||||
|
|
@ -443,10 +458,16 @@ export class Node {
|
|||
this._decrypted = false
|
||||
this._expanded = false // start value for the TreeNode component,
|
||||
this.ChecklistGroups = {}
|
||||
this.ScheduleEvents = signal([])
|
||||
// it doesn't control it afterwards.
|
||||
// Used to expand the crumbs upon site loading.
|
||||
}//}}}
|
||||
retrieve(callback) {//{{{
|
||||
this.app.request('/schedule/list', { NodeID: this.ID })
|
||||
.then(res => {
|
||||
this.ScheduleEvents.value = res.ScheduleEvents
|
||||
})
|
||||
|
||||
this.app.request('/node/retrieve', { ID: this.ID })
|
||||
.then(res => {
|
||||
this.ParentID = res.Node.ParentID
|
||||
|
|
@ -965,18 +986,50 @@ class ProfileSettings extends Component {
|
|||
}
|
||||
|
||||
class ScheduleEventList extends Component {
|
||||
constructor() {
|
||||
constructor() {//{{{
|
||||
super()
|
||||
this.events = signal(null)
|
||||
this.retrieveFutureEvents()
|
||||
}
|
||||
render() {
|
||||
}
|
||||
retrieveFutureEvents() {
|
||||
_app.current.request('/schedule/list')
|
||||
.then(foo=>{
|
||||
console.log(foo)
|
||||
}//}}}
|
||||
render() {//{{{
|
||||
if (this.events.value === null)
|
||||
return
|
||||
|
||||
let events = this.events.value.map(evt => {
|
||||
const dt = evt.Time.split('T')
|
||||
const remind = () => {
|
||||
if (evt.RemindMinutes > 0)
|
||||
return html`${evt.RemindMinutes} min`
|
||||
}
|
||||
const nodeLink = () => html`<a href="/?node=${evt.Node.ID}">${evt.Node.Name}</a>`
|
||||
|
||||
|
||||
return html`
|
||||
<div class="date">${dt[0]}</div>
|
||||
<div class="time">${dt[1].slice(0, 5)}</div>
|
||||
<div class="remind"><${remind} /></div>
|
||||
<div class="description">${evt.Description}</div>
|
||||
<div class="node"><${nodeLink} /></div>
|
||||
`
|
||||
})
|
||||
}
|
||||
|
||||
return html`
|
||||
<div id="schedule-events">
|
||||
<div class="header">Date</div>
|
||||
<div class="header">Time</div>
|
||||
<div class="header">Reminder</div>
|
||||
<div class="header">Event</div>
|
||||
<div class="header">Node</div>
|
||||
${events}
|
||||
</div>
|
||||
`
|
||||
}//}}}
|
||||
retrieveFutureEvents() {//{{{
|
||||
_app.current.request('/schedule/list')
|
||||
.then(data => {
|
||||
this.events.value = data.ScheduleEvents
|
||||
})
|
||||
}//}}}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -617,7 +617,7 @@ header {
|
|||
}
|
||||
/* ============================================================= */
|
||||
|
||||
#file-section {
|
||||
#schedule-section {
|
||||
grid-area: files;
|
||||
justify-self: center;
|
||||
width: calc(100% - 32px);
|
||||
|
|
@ -627,6 +627,25 @@ header {
|
|||
border-radius: 8px;
|
||||
margin-top: 32px;
|
||||
margin-bottom: 32px;
|
||||
color: #000;
|
||||
|
||||
.header {
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
#file-section {
|
||||
grid-area: schedule;
|
||||
justify-self: center;
|
||||
width: calc(100% - 32px);
|
||||
max-width: 900px;
|
||||
padding: 32px;
|
||||
background: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
margin-top: 32px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.header {
|
||||
font-weight: bold;
|
||||
|
|
@ -751,6 +770,7 @@ header {
|
|||
"tree name"
|
||||
"tree content"
|
||||
"tree checklist"
|
||||
"tree schedule"
|
||||
"tree files"
|
||||
"tree blank"
|
||||
;
|
||||
|
|
@ -762,6 +782,7 @@ header {
|
|||
min-content /* name */
|
||||
min-content /* content */
|
||||
min-content /* checklist */
|
||||
min-content /* schedule */
|
||||
min-content /* files */
|
||||
1fr; /* blank */
|
||||
color: #fff;
|
||||
|
|
@ -795,6 +816,7 @@ header {
|
|||
"name"
|
||||
"content"
|
||||
"checklist"
|
||||
"schedule"
|
||||
"files"
|
||||
"blank"
|
||||
;
|
||||
|
|
@ -806,6 +828,7 @@ header {
|
|||
min-content /* name */
|
||||
min-content /* content */
|
||||
min-content /* checklist */
|
||||
min-content /* schedule */
|
||||
min-content /* files */
|
||||
1fr; /* blank */
|
||||
#tree { display: none }
|
||||
|
|
@ -869,6 +892,19 @@ header {
|
|||
}
|
||||
}
|
||||
|
||||
#schedule-events {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, min-content);
|
||||
grid-gap: 4px 12px;
|
||||
margin: 32px;
|
||||
color: #000;
|
||||
white-space: nowrap;
|
||||
|
||||
.header {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 932px) {
|
||||
#app.node {
|
||||
.layout-crumbs();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue