import { Version } from '@microsoft/sp-core-library';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import {
IPropertyPaneConfiguration,
PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { escape } from '@microsoft/sp-lodash-subset';
import './ThoughtforthedayWebPart.module.scss';
import * as strings from 'ThoughtforthedayWebPartStrings';
import MockHttpClient from './MockHttpClient';
import {
SPHttpClientResponse,
SPHttpClient,
SPHttpClientConfiguration,
ISPHttpClientOptions,
} from '@microsoft/sp-http';
import {
Environment,
EnvironmentType
} from '@microsoft/sp-core-library';
import * as $ from 'jquery';
import 'jquery';
export interface ISPLists {
value: ISPList[];
}
export interface ISPList {
Title: string;
Quote: string;
}
export default class ThoughtforthedayWebPart extends BaseClientSideWebPart {
public _getListData() {
var today = new Date();
var Startdate = today.toISOString().substring(0, 10) + "T00:00:00.000Z";
var Enddate = today.toISOString().substring(0, 10) + "T23:00:00.000Z";
var filterQuery = "?$top=1&$filter=Created le datetime'" + Enddate + "' and Created ge datetime'" + Startdate + "'";
$.ajax({
url: encodeURI(this.context.pageContext.web.absoluteUrl + "/_api/web/lists/getbytitle('Thoughtfortheday')/items" + filterQuery),
type: "GET",
headers: {
"Accept": "application/json; odata=verbose",
"Content-Type": "application/json;odata=verbose",
},
// tslint:disable-next-line: no-function-expression
success: function (data) {
var allData = data.d.results;
var datalen = data.d.results.length;
if (datalen == 0) {
console.log("No records available for today's date");
}
else {
console.log("Available Record:", allData);
}
},
// tslint:disable-next-line: no-function-expression
error: function (err) {
console.log(JSON.stringify(err));
}
});
}
private _renderListAsync(): void {
if (Environment.type === EnvironmentType.Local) {
this._getMockListData().then((response) => {
this._renderList(response.value);
});
}
else
{
this._getListData()
.then((response) => {
this._renderList(response.value);
});
}
}
private _getMockListData(): Promise {
return MockHttpClient.get(this.context.pageContext.web.absoluteUrl).then(() => {
const listData: ISPLists = {
value:
[
{ Title: 'Gandhi', Quote: 'Where there is will there is a way' },
{ Title: 'Modi', Quote: 'Desh Vasiyon' },
{ Title: 'Rajiv', Quote: 'Try until u succeed' },
]
};
return listData;
}) as Promise;
}
private _renderList(items: ISPList[]): void {
let html: string = '';
items.forEach((item: ISPList) => {
html += `
<div align="center"> ${item.Quote}</div>
<div align="right"> ${'-'} ${item.Title}</div>
`;
});
html += `</table>`;
const listContainer: Element = this.domElement.querySelector('#spListContainer');
listContainer.innerHTML = html;
}
public render(): void {
this.domElement.innerHTML =
<div class="thoughtfortheday}">
<div class="container">
<div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white row}">
<div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">
</div>
</div>
<div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white row}">
<div style="background-color:Black;color:white;text-align: center;font-weight: bold;font-size:18px;">Thought for the day</div>
<br>
<div id="spListContainer" />
</div>
</div>
</div>;
this._renderListAsync();
}
protected get dataVersion(): Version {
return Version.parse('1.0');
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField('description', {
label: strings.DescriptionFieldLabel
})
]
}
]
}
]
};
}
}
This is the entire code.
