Compare commits
1 commit
main
...
css-implem
| Author | SHA1 | Date | |
|---|---|---|---|
|
7d3769cf4f |
35 changed files with 349 additions and 1374 deletions
9
.gitignore
vendored
9
.gitignore
vendored
|
|
@ -6,17 +6,12 @@
|
||||||
node_modules
|
node_modules
|
||||||
package-lock.json
|
package-lock.json
|
||||||
|
|
||||||
# yarn
|
# build
|
||||||
yarn.lock
|
main.js
|
||||||
|
|
||||||
|
|
||||||
*.js.map
|
*.js.map
|
||||||
|
|
||||||
# obsidian
|
# obsidian
|
||||||
data.json
|
data.json
|
||||||
|
|
||||||
#build_files
|
|
||||||
main.js
|
|
||||||
|
|
||||||
#vscode
|
#vscode
|
||||||
.vscode
|
.vscode
|
||||||
21
LICENSE
21
LICENSE
|
|
@ -1,21 +0,0 @@
|
||||||
MIT License
|
|
||||||
|
|
||||||
Copyright (c) 2021 Zain Siddavatam and John Mavrick Reyes
|
|
||||||
|
|
||||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
||||||
of this software and associated documentation files (the "Software"), to deal
|
|
||||||
in the Software without restriction, including without limitation the rights
|
|
||||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
||||||
copies of the Software, and to permit persons to whom the Software is
|
|
||||||
furnished to do so, subject to the following conditions:
|
|
||||||
|
|
||||||
The above copyright notice and this permission notice shall be included in all
|
|
||||||
copies or substantial portions of the Software.
|
|
||||||
|
|
||||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
||||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
||||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
||||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
||||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
||||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
||||||
SOFTWARE.
|
|
||||||
83
README.md
83
README.md
|
|
@ -1,46 +1,57 @@
|
||||||
# Habitica Sync in Obsidian
|
## Obsidian Sample Plugin
|
||||||
This plugin for Obsidian incorporates a view to display and interact with the task management app Habitica.
|
|
||||||
|
|
||||||
Please open issues for any bugs/functionality requests :)
|
This is a sample plugin for Obsidian (https://obsidian.md).
|
||||||
|
|
||||||
## Usage
|
This project uses Typescript to provide type checking and documentation.
|
||||||
The plugin's view is enabled by clicking on the "Open Habitica Pane" option in the side ribbon (default hotkey is `Ctrl+Shift+H`).
|
The repo depends on the latest plugin API (obsidian.d.ts) in Typescript Definition format, which contains TSDoc comments describing what it does.
|
||||||
|
|
||||||
To sync your Habitica account, go to the settings page of the plugin and enter your user ID and API token credentials.
|
**Note:** The Obsidian API is still in early alpha and is subject to change at any time!
|
||||||
## Features
|
|
||||||
### Pane View
|
|
||||||
#### View stats (HP, XP, coins)
|
|
||||||
#### Views
|
|
||||||
Task Information:
|
|
||||||
- Title, description, subtasks
|
|
||||||
- Markdown and emoji support
|
|
||||||
|
|
||||||
Tabs:
|
This sample plugin demonstrates some of the basic functionality the plugin API can do.
|
||||||
- To Do's
|
- Changes the default font color to red using `styles.css`.
|
||||||
- Active/Completed
|
- Adds a ribbon icon, which shows a Notice when clicked.
|
||||||
- Dailies
|
- Adds a command "Open Sample Modal" which opens a Modal.
|
||||||
- Due/Not Due/Completed
|
- Adds a plugin setting tab to the settings page.
|
||||||
- [](https://gyazo.com/1966b17f954dcffa954922570e860a06)
|
- Registers a global click event and output 'click' to the console.
|
||||||
- Habits
|
- Registers a global interval which logs 'setInterval' to the console.
|
||||||
- [](https://gyazo.com/280494e620fc91548838d5b29a62652b)
|
|
||||||
- Rewards
|
|
||||||
#### Interactivity
|
|
||||||
- Check off tasks/dailies in the view
|
|
||||||
- Can uncheck completed habits/todos
|
|
||||||
- [](https://gyazo.com/efb858cd9d54f9d9df936da1bd5858ed)
|
|
||||||
- modify habit counters (+/-)
|
|
||||||
|
|
||||||
### Settings
|
### First time developing plugins?
|
||||||
|
|
||||||
The following two inputs help fetch your user data to be displayed in the Obsidian view:
|
Quick starting guide for new plugin devs:
|
||||||
- **Habitica User ID:** You can find this by clicking on the "User" icon in the top right of the Habitica webapp, "Settings", then "API"
|
|
||||||
- **Habitica Token API:** You can find this by clicking on the "User" icon in the top right of the Habitica webapp, "Settings", then "API"
|
|
||||||
- **Show Task Descriptions:** Toggles whether description/notes for tasks will be shown or not
|
|
||||||
- **Show Subtasks:** Toggles whether subtasks for to do's/dailies will be shown or not
|
|
||||||
|
|
||||||
## Roadmap
|
- Make a copy of this repo as a template with the "Use this template" button (login to GitHub if you don't see it).
|
||||||
|
- Clone your repo to a local development folder. For convenience, you can place this folder in your `.obsidian/plugins/your-plugin-name` folder.
|
||||||
|
- Install NodeJS, then run `npm i` in the command line under your repo folder.
|
||||||
|
- Run `npm run dev` to compile your plugin from `main.ts` to `main.js`.
|
||||||
|
- Make changes to `main.ts` (or create new `.ts` files). Those changes should be automatically compiled into `main.js`.
|
||||||
|
- Reload Obsidian to load the new version of your plugin.
|
||||||
|
- Enable plugin in settings window.
|
||||||
|
- For updates to the Obsidian API run `npm update` in the command line under your repo folder.
|
||||||
|
|
||||||
*Feel free to support us and donate!*
|
### Releasing new releases
|
||||||
|
|
||||||
<a href='https://ko-fi.com/leonardandran' target='_blank'><img height='35' style='border:0px;height:46px;' src='https://az743702.vo.msecnd.net/cdn/kofi3.png?v=0' border='0' alt='Buy Me a Coffee at ko-fi.com' />
|
- Update your `manifest.json` with your new version number, such as `1.0.1`, and the minimum Obsidian version required for your latest release.
|
||||||
|
- Update your `versions.json` file with `"new-plugin-version": "minimum-obsidian-version"` so older versions of Obsidian can download an older version of your plugin that's compatible.
|
||||||
|
- Create new GitHub release using your new version number as the "Tag version". Use the exact version number, don't include a prefix `v`. See here for an example: https://github.com/obsidianmd/obsidian-sample-plugin/releases
|
||||||
|
- Upload the files `manifest.json`, `main.js`, `styles.css` as binary attachments.
|
||||||
|
- Publish the release.
|
||||||
|
|
||||||
|
### Adding your plugin to the community plugin list
|
||||||
|
|
||||||
|
- Publish an initial version.
|
||||||
|
- Make sure you have a `README.md` file in the root of your repo.
|
||||||
|
- Make a pull request at https://github.com/obsidianmd/obsidian-releases to add your plugin.
|
||||||
|
|
||||||
|
### How to use
|
||||||
|
|
||||||
|
- Clone this repo.
|
||||||
|
- `npm i` or `yarn` to install dependencies
|
||||||
|
- `npm run dev` to start compilation in watch mode.
|
||||||
|
|
||||||
|
### Manually installing the plugin
|
||||||
|
|
||||||
|
- Copy over `main.js`, `styles.css`, `manifest.json` to your vault `VaultFolder/.obsidian/plugins/your-plugin-id/`.
|
||||||
|
|
||||||
|
### API Documentation
|
||||||
|
|
||||||
|
See https://github.com/obsidianmd/obsidian-api
|
||||||
|
|
|
||||||
6
ReactView.tsx
Normal file
6
ReactView.tsx
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
import * as React from "react";
|
||||||
|
import App from "./view/App";
|
||||||
|
|
||||||
|
export const ReactView = () => {
|
||||||
|
return <App />;
|
||||||
|
};
|
||||||
52
main.ts
Normal file
52
main.ts
Normal file
|
|
@ -0,0 +1,52 @@
|
||||||
|
import { Plugin } from "obsidian";
|
||||||
|
import { ExampleSettingsTab } from "./settings";
|
||||||
|
import { ExampleView, VIEW_TYPE_EXAMPLE} from "./view"
|
||||||
|
|
||||||
|
interface ExamplePluginSettings {
|
||||||
|
dateFormat: string
|
||||||
|
}
|
||||||
|
const DEFAULT_SETTINGS: Partial<ExamplePluginSettings> = {
|
||||||
|
dateFormat: "YYYY-MM-DD"
|
||||||
|
}
|
||||||
|
export default class ExamplePlugin extends Plugin {
|
||||||
|
settings: ExamplePluginSettings;
|
||||||
|
view: ExampleView;
|
||||||
|
|
||||||
|
async onload() {
|
||||||
|
await this.loadSettings();
|
||||||
|
this.addSettingTab(new ExampleSettingsTab(this.app, this));
|
||||||
|
this.registerView(
|
||||||
|
VIEW_TYPE_EXAMPLE,
|
||||||
|
(leaf) => (this.view = new ExampleView(leaf))
|
||||||
|
);
|
||||||
|
this.addRibbonIcon("dice", "Activate view", () => { //activate view
|
||||||
|
this.activateView();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
async loadSettings() {
|
||||||
|
this.settings = Object.assign(DEFAULT_SETTINGS, await this.loadData())
|
||||||
|
}
|
||||||
|
async saveSettings() {
|
||||||
|
await this.saveData(this.settings);
|
||||||
|
}
|
||||||
|
async onunload() {
|
||||||
|
await this.view.onClose();
|
||||||
|
|
||||||
|
this.app.workspace
|
||||||
|
.getLeavesOfType(VIEW_TYPE_EXAMPLE)
|
||||||
|
.forEach((leaf) => leaf.detach());
|
||||||
|
}
|
||||||
|
async activateView() {
|
||||||
|
this.app.workspace.detachLeavesOfType(VIEW_TYPE_EXAMPLE);
|
||||||
|
|
||||||
|
await this.app.workspace.getRightLeaf(false).setViewState({
|
||||||
|
type: VIEW_TYPE_EXAMPLE,
|
||||||
|
active: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
this.app.workspace.revealLeaf(
|
||||||
|
this.app.workspace.getLeavesOfType(VIEW_TYPE_EXAMPLE)[0]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -1,11 +1,10 @@
|
||||||
{
|
{
|
||||||
"id": "obsidian-habitica-integration",
|
"id": "test-plugin",
|
||||||
"name": "Habitica Sync",
|
"name": "Test Plugin",
|
||||||
"version": "1.0.2",
|
"version": "0.0.1",
|
||||||
"minAppVersion": "0.9.12",
|
"minAppVersion": "0.9.12",
|
||||||
"description": "This plugin helps integrate Habitica user tasks and stats into Obsidian",
|
"description": "This is a sample plugin for Obsidian. This plugin demonstrates some of the capabilities of the Obsidian API.",
|
||||||
"author": "Leoh and Ran",
|
"author": "Leoh",
|
||||||
"authorUrl": "",
|
"authorUrl": "",
|
||||||
"isDesktopOnly": false,
|
"isDesktopOnly": false
|
||||||
"js": "main.js"
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
63
package.json
63
package.json
|
|
@ -1,51 +1,34 @@
|
||||||
{
|
{
|
||||||
"name": "obsidian-habitica-integration",
|
"name": "test-plugin",
|
||||||
"version": "1.0.0",
|
"version": "0.12.0",
|
||||||
"description": "This plugin allows for Habitica integration into Obsidian",
|
"description": "This is a sample plugin for Obsidian (https://obsidian.md)",
|
||||||
"main": "main.js",
|
"main": "main.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "rollup --config rollup.config.mjs -w",
|
"dev": "rollup --config rollup.config.js -w",
|
||||||
"build": "rollup --config rollup.config.mjs --environment BUILD:production",
|
"build": "rollup --config rollup.config.js --environment BUILD:production"
|
||||||
"dev2": "obsidian-plugin dev src/main.ts"
|
|
||||||
},
|
},
|
||||||
"keywords": [],
|
"keywords": [],
|
||||||
"author": "Leonard and Ran",
|
"author": "",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@rollup/plugin-commonjs": "^25.0.7",
|
"@rollup/plugin-commonjs": "^18.0.0",
|
||||||
"@rollup/plugin-json": "^6.1.0",
|
"@rollup/plugin-node-resolve": "^11.2.1",
|
||||||
"@rollup/plugin-node-resolve": "^15.2.3",
|
"@rollup/plugin-typescript": "^8.2.1",
|
||||||
"@rollup/plugin-typescript": "^11.1.6",
|
"@types/node": "^14.14.37",
|
||||||
"@types/markdown-it": "^13.0.7",
|
"@types/react": "^17.0.27",
|
||||||
"@types/markdown-it-emoji": "^2.0.4",
|
"@types/react-dom": "^17.0.9",
|
||||||
"@types/node": "^20.11.0",
|
"css-loader": "^6.4.0",
|
||||||
"@types/node-emoji": "^1.8.2",
|
"extract-text-webpack-plugin": "^2.1.2",
|
||||||
"@types/react": "^18.2.47",
|
"obsidian": "^0.12.0",
|
||||||
"@types/react-dom": "^18.2.18",
|
"rollup": "^2.32.1",
|
||||||
"@types/react-tabs": "^5.0.4",
|
"style-loader": "^3.3.0",
|
||||||
"@types/twemoji": "^13.1.1",
|
"tslib": "^2.2.0",
|
||||||
"css-loader": "^6.9.0",
|
"typescript": "^4.2.4"
|
||||||
"mini-css-extract-plugin": "^2.7.7",
|
|
||||||
"obsidian": "^1.4.11",
|
|
||||||
"obsidian-plugin-cli": "^0.0.5",
|
|
||||||
"rollup": "^4.9.4",
|
|
||||||
"style-loader": "^3.3.4",
|
|
||||||
"tslib": "^2.6.2",
|
|
||||||
"typescript": "^5.3.3",
|
|
||||||
"webpack": "^5.89.0"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"markdown-it": "^14.0.0",
|
"node": "^16.10.0",
|
||||||
"markdown-it-emoji": "^2.0.2",
|
"node-fetch": "^3.0.0",
|
||||||
"moment": "^2.30.1",
|
"react": "^17.0.2",
|
||||||
"node": "^21.2.0",
|
"react-dom": "^17.0.2"
|
||||||
"node-emoji": "^2.1.3",
|
|
||||||
"node-fetch": "^3.3.2",
|
|
||||||
"react": "^18.2.0",
|
|
||||||
"react-dom": "^18.2.0",
|
|
||||||
"react-emoji-render": "^2.0.1",
|
|
||||||
"react-markdown": "^9.0.1",
|
|
||||||
"react-tabs": "^6.0.2",
|
|
||||||
"twemoji": "^14.0.2"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
import typescript from '@rollup/plugin-typescript';
|
import typescript from '@rollup/plugin-typescript';
|
||||||
import {nodeResolve} from '@rollup/plugin-node-resolve';
|
import {nodeResolve} from '@rollup/plugin-node-resolve';
|
||||||
import commonjs from '@rollup/plugin-commonjs';
|
import commonjs from '@rollup/plugin-commonjs';
|
||||||
import json from '@rollup/plugin-json';
|
|
||||||
|
|
||||||
const isProd = (process.env.BUILD === 'production');
|
const isProd = (process.env.BUILD === 'production');
|
||||||
|
|
||||||
|
|
@ -13,7 +12,7 @@ if you want to view the source visit the plugins github repository
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
input: 'src/main.ts',
|
input: 'main.ts',
|
||||||
output: {
|
output: {
|
||||||
dir: '.',
|
dir: '.',
|
||||||
sourcemap: 'inline',
|
sourcemap: 'inline',
|
||||||
|
|
@ -27,6 +26,5 @@ export default {
|
||||||
typescript(),
|
typescript(),
|
||||||
nodeResolve({browser: true}),
|
nodeResolve({browser: true}),
|
||||||
commonjs(),
|
commonjs(),
|
||||||
json(),
|
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
30
settings.ts
Normal file
30
settings.ts
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
import ExamplePlugin from "main";
|
||||||
|
import { App, PluginSettingTab, Setting } from "obsidian";
|
||||||
|
|
||||||
|
export class ExampleSettingsTab extends PluginSettingTab {
|
||||||
|
plugin: ExamplePlugin;
|
||||||
|
|
||||||
|
constructor(app: App, plugin: ExamplePlugin) {
|
||||||
|
super(app, plugin)
|
||||||
|
this.plugin = plugin
|
||||||
|
}
|
||||||
|
|
||||||
|
display(): void {
|
||||||
|
let { containerEl } = this;
|
||||||
|
containerEl.empty();
|
||||||
|
|
||||||
|
new Setting(containerEl)
|
||||||
|
.setName("Date format")
|
||||||
|
.setDesc("Default date format")
|
||||||
|
.addText((text) =>
|
||||||
|
|
||||||
|
text
|
||||||
|
.setPlaceholder("MMMM dd, yyyy")
|
||||||
|
.setValue(this.plugin.settings.dateFormat)
|
||||||
|
.onChange(async (value) => {
|
||||||
|
this.plugin.settings.dateFormat = value;
|
||||||
|
await this.plugin.saveSettings();
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
71
src/main.ts
71
src/main.ts
|
|
@ -1,71 +0,0 @@
|
||||||
import { Plugin } from "obsidian";
|
|
||||||
import { HabiticaSyncSettingsTab } from "./settings";
|
|
||||||
import { HabiticaSyncView, VIEW_TYPE} from "./view"
|
|
||||||
|
|
||||||
interface HabiticaSyncSettings {
|
|
||||||
userID: string
|
|
||||||
apiToken: string
|
|
||||||
showTaskDescription: boolean
|
|
||||||
showSubTasks: boolean
|
|
||||||
dueDateFormat: string
|
|
||||||
}
|
|
||||||
const DEFAULT_SETTINGS: Partial<HabiticaSyncSettings> = {
|
|
||||||
userID: "",
|
|
||||||
apiToken: "",
|
|
||||||
showTaskDescription: true,
|
|
||||||
showSubTasks: true,
|
|
||||||
dueDateFormat: "DD-MM-YYYY"
|
|
||||||
}
|
|
||||||
export default class HabiticaSync extends Plugin {
|
|
||||||
settings: HabiticaSyncSettings;
|
|
||||||
view: HabiticaSyncView;
|
|
||||||
|
|
||||||
async onload() {
|
|
||||||
console.log("load plugin: habitica-sync")
|
|
||||||
await this.loadSettings();
|
|
||||||
this.addSettingTab(new HabiticaSyncSettingsTab(this.app, this));
|
|
||||||
this.registerView(
|
|
||||||
VIEW_TYPE,
|
|
||||||
(leaf) => (new HabiticaSyncView(leaf, this))
|
|
||||||
);
|
|
||||||
this.addRibbonIcon("popup-open", "Open Habitica Pane", () => {
|
|
||||||
this.activateView();
|
|
||||||
});
|
|
||||||
this.addCommand({
|
|
||||||
id: "habitica-view-open",
|
|
||||||
name: "Open Pane",
|
|
||||||
hotkeys: [{ modifiers: ["Mod", "Shift"], key: "h"}],
|
|
||||||
callback: () => {
|
|
||||||
this.activateView();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
|
||||||
async loadSettings() {
|
|
||||||
this.settings = Object.assign(DEFAULT_SETTINGS, await this.loadData())
|
|
||||||
}
|
|
||||||
async saveSettings() {
|
|
||||||
await this.saveData(this.settings);
|
|
||||||
}
|
|
||||||
|
|
||||||
async onunload() {
|
|
||||||
await this.view.onClose();
|
|
||||||
|
|
||||||
this.app.workspace
|
|
||||||
.getLeavesOfType(VIEW_TYPE)
|
|
||||||
.forEach((leaf) => leaf.detach());
|
|
||||||
}
|
|
||||||
async activateView() {
|
|
||||||
this.app.workspace.detachLeavesOfType(VIEW_TYPE);
|
|
||||||
|
|
||||||
await this.app.workspace.getRightLeaf(false).setViewState({
|
|
||||||
type: VIEW_TYPE,
|
|
||||||
active: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
this.app.workspace.revealLeaf(
|
|
||||||
this.app.workspace.getLeavesOfType(VIEW_TYPE)[0]
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,80 +0,0 @@
|
||||||
import HabiticaSync from "./main";
|
|
||||||
import { App, PluginSettingTab, Setting } from "obsidian";
|
|
||||||
import moment from "moment";
|
|
||||||
|
|
||||||
export class HabiticaSyncSettingsTab extends PluginSettingTab {
|
|
||||||
plugin: HabiticaSync;
|
|
||||||
|
|
||||||
constructor(app: App, plugin: HabiticaSync) {
|
|
||||||
super(app, plugin)
|
|
||||||
this.plugin = plugin
|
|
||||||
}
|
|
||||||
|
|
||||||
display(): void {
|
|
||||||
let { containerEl } = this;
|
|
||||||
containerEl.empty();
|
|
||||||
|
|
||||||
new Setting(containerEl)
|
|
||||||
.setName("Habitica User ID")
|
|
||||||
.setDesc("Can be found in Settings > API")
|
|
||||||
.addText((text) =>
|
|
||||||
text
|
|
||||||
.setPlaceholder("User ID")
|
|
||||||
.setValue(this.plugin.settings.userID)
|
|
||||||
.onChange(async (value) => {
|
|
||||||
this.plugin.settings.userID = value;
|
|
||||||
await this.plugin.saveSettings();
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
new Setting(containerEl)
|
|
||||||
.setName("Habitica API Token")
|
|
||||||
.setDesc("Can be found in Settings > API")
|
|
||||||
.addText((text) =>
|
|
||||||
text
|
|
||||||
.setPlaceholder("API Token")
|
|
||||||
.setValue(this.plugin.settings.apiToken)
|
|
||||||
.onChange(async (value) => {
|
|
||||||
this.plugin.settings.apiToken = value;
|
|
||||||
await this.plugin.saveSettings();
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
new Setting(containerEl)
|
|
||||||
.setName("Show Task Descriptions")
|
|
||||||
.setDesc("Updates require pane re-opening")
|
|
||||||
.addToggle(cb => {
|
|
||||||
cb
|
|
||||||
.setValue(this.plugin.settings.showTaskDescription)
|
|
||||||
.onChange(async (isEnable) => {
|
|
||||||
this.plugin.settings.showTaskDescription = isEnable;
|
|
||||||
await this.plugin.saveSettings();
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
new Setting(containerEl)
|
|
||||||
.setName("Show Sub-Tasks")
|
|
||||||
.setDesc("Updates require pane re-opening")
|
|
||||||
.addToggle(cb => {
|
|
||||||
cb
|
|
||||||
.setValue(this.plugin.settings.showSubTasks)
|
|
||||||
.onChange(async (isEnable) => {
|
|
||||||
this.plugin.settings.showSubTasks = isEnable;
|
|
||||||
await this.plugin.saveSettings();
|
|
||||||
})
|
|
||||||
});
|
|
||||||
new Setting(containerEl)
|
|
||||||
.setName("Due Date Format")
|
|
||||||
.setDesc("Update requires pane re-opening, check moment.js docs for formatting. Current Format: " + moment().format(this.plugin.settings.dueDateFormat))
|
|
||||||
.addText((text) =>
|
|
||||||
text
|
|
||||||
.setPlaceholder("DD-MM-YYYY")
|
|
||||||
.setValue(this.plugin.settings.dueDateFormat)
|
|
||||||
.onChange(async (value) => {
|
|
||||||
this.plugin.settings.dueDateFormat = value;
|
|
||||||
await this.plugin.saveSettings();
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
37
src/view.tsx
37
src/view.tsx
|
|
@ -1,37 +0,0 @@
|
||||||
import { ItemView,WorkspaceLeaf } from "obsidian";
|
|
||||||
import * as React from "react";
|
|
||||||
import * as ReactDOM from "react-dom";
|
|
||||||
import App from "./view/App"
|
|
||||||
import HabiticaSync from "./main";
|
|
||||||
|
|
||||||
|
|
||||||
export const VIEW_TYPE = "example-view"
|
|
||||||
|
|
||||||
export class HabiticaSyncView extends ItemView {
|
|
||||||
plugin: HabiticaSync;
|
|
||||||
constructor(leaf: WorkspaceLeaf, plugin: HabiticaSync) {
|
|
||||||
super(leaf)
|
|
||||||
this.plugin = plugin
|
|
||||||
}
|
|
||||||
|
|
||||||
getViewType() {
|
|
||||||
return VIEW_TYPE
|
|
||||||
}
|
|
||||||
|
|
||||||
getDisplayText() {
|
|
||||||
return "Habitica Pane"
|
|
||||||
}
|
|
||||||
getIcon(): string {
|
|
||||||
return "popup-open"
|
|
||||||
}
|
|
||||||
|
|
||||||
async onOpen() {
|
|
||||||
ReactDOM.render(
|
|
||||||
<App plugin={this.plugin}/>,
|
|
||||||
this.containerEl.children[1]
|
|
||||||
)
|
|
||||||
}
|
|
||||||
async onClose(){
|
|
||||||
ReactDOM.unmountComponentAtNode(this.containerEl.children[1]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
227
src/view/App.tsx
227
src/view/App.tsx
|
|
@ -1,227 +0,0 @@
|
||||||
import * as React from "react";
|
|
||||||
import { Notice } from "obsidian";
|
|
||||||
import { getStats, scoreTask, makeCronReq, costReward, scoreChecklistItem } from "./habiticaAPI"
|
|
||||||
import Statsview from "./Components/Statsview"
|
|
||||||
import Taskview from "./Components/Taskview"
|
|
||||||
import ReactDOM from "react-dom";
|
|
||||||
|
|
||||||
class App extends React.Component<any, any> {
|
|
||||||
private _username = "";
|
|
||||||
public get username() {
|
|
||||||
return this._username;
|
|
||||||
}
|
|
||||||
public set username(value) {
|
|
||||||
this._username = value;
|
|
||||||
}
|
|
||||||
private _credentials = "";
|
|
||||||
public get credentials() {
|
|
||||||
return this._credentials;
|
|
||||||
}
|
|
||||||
public set credentials(value) {
|
|
||||||
this._credentials = value;
|
|
||||||
}
|
|
||||||
constructor(props: any) {
|
|
||||||
super(props)
|
|
||||||
this.username = this.props.plugin.settings.userID
|
|
||||||
this.credentials = this.props.plugin.settings.apiToken
|
|
||||||
this.state = {
|
|
||||||
needCron: false,
|
|
||||||
isLoaded: false,
|
|
||||||
user_data: {
|
|
||||||
profile: {
|
|
||||||
name: "",
|
|
||||||
},
|
|
||||||
stats: {
|
|
||||||
hp: 0,
|
|
||||||
lvl: 0,
|
|
||||||
gold: 0,
|
|
||||||
},
|
|
||||||
lastCron: "",
|
|
||||||
},
|
|
||||||
todos: [],
|
|
||||||
dailys: [],
|
|
||||||
habits: [],
|
|
||||||
}
|
|
||||||
this.handleChangeTodos = this.handleChangeTodos.bind(this);
|
|
||||||
this.handleChangeDailys = this.handleChangeDailys.bind(this);
|
|
||||||
this.handleChangeHabits = this.handleChangeHabits.bind(this);
|
|
||||||
this.handleChangeRewards = this.handleChangeRewards.bind(this);
|
|
||||||
this.handleChangeChecklistItem = this.handleChangeChecklistItem.bind(this);
|
|
||||||
this.runCron = this.runCron.bind(this);
|
|
||||||
|
|
||||||
}
|
|
||||||
CheckCron(lastCron: string) {
|
|
||||||
let cronDate = new Date(lastCron);
|
|
||||||
let now = new Date();
|
|
||||||
if (cronDate.getDate() != now.getDate() || (cronDate.getMonth() != now.getMonth() || cronDate.getFullYear() != now.getFullYear())) {
|
|
||||||
return (
|
|
||||||
<div className="cron">
|
|
||||||
<div id="cronMessage"> Welcome back! Please check your tasks for the last day and hit continue to get your daily rewards.</div>
|
|
||||||
<button id="cronButton" onClick={this.runCron}>Continue</button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
return null
|
|
||||||
};
|
|
||||||
}
|
|
||||||
async runCron() {
|
|
||||||
console.log("running cron");
|
|
||||||
try {
|
|
||||||
let response = await makeCronReq(this.username, this.credentials);
|
|
||||||
this.setState({
|
|
||||||
needCron: false,
|
|
||||||
})
|
|
||||||
} catch (error) {
|
|
||||||
console.log(error);
|
|
||||||
new Notice("There was an error running the cron. Please try again later.");
|
|
||||||
}
|
|
||||||
this.reloadData();
|
|
||||||
}
|
|
||||||
async reloadData() {
|
|
||||||
try {
|
|
||||||
let response = await getStats(this.username, this.credentials);
|
|
||||||
let result = await response.json();
|
|
||||||
if (result.success === false) {
|
|
||||||
new Notice('Login Failed, Please check credentials and try again!');
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.setState({
|
|
||||||
isLoaded: true,
|
|
||||||
user_data: result,
|
|
||||||
tasks: result.tasks,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.log(e);
|
|
||||||
new Notice("API Error: Please check credentials")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
componentDidMount() {
|
|
||||||
this.reloadData()
|
|
||||||
}
|
|
||||||
|
|
||||||
async sendScore(id: string, score: string, message: string) {
|
|
||||||
try {
|
|
||||||
let response = await scoreTask(this.username, this.credentials, id, score);
|
|
||||||
let result = await response.json();
|
|
||||||
if (result.success === true) {
|
|
||||||
new Notice(message);
|
|
||||||
this.reloadData();
|
|
||||||
} else {
|
|
||||||
new Notice("Resyncing, please try again");
|
|
||||||
this.reloadData();
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.log(e);
|
|
||||||
new Notice("API Error: Please check credentials")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async sendReward(id: string, score: string, message: string) {
|
|
||||||
try {
|
|
||||||
let response = await costReward(this.username, this.credentials, id, score);
|
|
||||||
let result = await response.json();
|
|
||||||
if (result.success === true) {
|
|
||||||
new Notice(message);
|
|
||||||
this.reloadData();
|
|
||||||
} else {
|
|
||||||
new Notice("Resyncing, please try again");
|
|
||||||
this.reloadData();
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.log(e);
|
|
||||||
new Notice("API Error: Please check credentials")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
handleChangeTodos(event: any) {
|
|
||||||
this.state.tasks.todos.forEach((element: any) => {
|
|
||||||
if (element.id == event.target.id) {
|
|
||||||
if (!element.completed) {
|
|
||||||
this.sendScore(event.target.id, "up", "Checked!")
|
|
||||||
} else {
|
|
||||||
this.sendScore(event.target.id, "down", "Un-Checked!")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
handleChangeDailys(event: any) {
|
|
||||||
this.state.tasks.dailys.forEach((element: any) => {
|
|
||||||
if (element.id == event.target.id) {
|
|
||||||
if (element.id == event.target.id) {
|
|
||||||
if (!element.completed) {
|
|
||||||
this.sendScore(event.target.id, "up", "Checked!")
|
|
||||||
} else {
|
|
||||||
this.sendScore(event.target.id, "down", "Un-Checked!")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
handleChangeHabits(event: any) {
|
|
||||||
const target_id = event.target.id.slice(4)
|
|
||||||
if (event.target.id.slice(0, 4) == "plus") {
|
|
||||||
this.state.tasks.habits.forEach((element: any) => {
|
|
||||||
if (element.id == target_id) {
|
|
||||||
this.sendScore(target_id, "up", "Plus!")
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.state.tasks.habits.forEach((element: any) => {
|
|
||||||
if (element.id == target_id) {
|
|
||||||
this.sendScore(target_id, "down", "Minus :(")
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
handleChangeRewards(event: any) {
|
|
||||||
const target_id = event.target.id
|
|
||||||
this.state.tasks.rewards.forEach((element: any) => {
|
|
||||||
if (element.id == event.target.id) {
|
|
||||||
if (element.id == target_id) {
|
|
||||||
this.sendReward(target_id, "down", "Redeemed!")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
async handleChangeChecklistItem(event: any){
|
|
||||||
let parentID = event.target.parentNode.parentNode.parentNode.getAttribute("id")
|
|
||||||
let targetID = event.target.id
|
|
||||||
console.log(parentID+ " , " + targetID)
|
|
||||||
try{
|
|
||||||
let response = await scoreChecklistItem(this.username, this.credentials, targetID, parentID);
|
|
||||||
let result = await response.json();
|
|
||||||
if (result.success === true) {
|
|
||||||
new Notice("Checked!");
|
|
||||||
this.reloadData();
|
|
||||||
} else {
|
|
||||||
new Notice("Resyncing, please try again");
|
|
||||||
this.reloadData();
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.log(e);
|
|
||||||
new Notice("API Error: Please check credentials")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
let content = this.CheckCron(this.state.user_data.lastCron);
|
|
||||||
if (this.state.error)
|
|
||||||
return (<div className="loading">Loading....</div>)
|
|
||||||
else if (!this.state.isLoaded)
|
|
||||||
return <div className="loading">Loading....</div>
|
|
||||||
else {
|
|
||||||
return (<div className="plugin-root">
|
|
||||||
{content}
|
|
||||||
<Statsview className ="stats-view" user_data={this.state.user_data} />
|
|
||||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
|
|
||||||
<Taskview data={this.state.tasks} handleChangeTodos={this.handleChangeTodos} settings = {this.props.plugin.settings} handleChangeDailys={this.handleChangeDailys} handleChangeHabits={this.handleChangeHabits} handleChangeRewards={this.handleChangeRewards} handleChangeChecklistItem={this.handleChangeChecklistItem}/>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
export default App
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
import * as React from 'react';
|
|
||||||
|
|
||||||
export default function Index(props: any) {
|
|
||||||
return(
|
|
||||||
<div className="stats">
|
|
||||||
{/* <div id="profile-name">{props.user_data.profile.name}</div> */}
|
|
||||||
<div className = "substats" id="hp">HP: {numberWithCommas((props.user_data.stats.hp).toFixed(0))}</div>
|
|
||||||
<div className = "substats" id="lvl">LEVEL: {props.user_data.stats.lvl}</div>
|
|
||||||
<div className = "substats" id="gold">GOLD: {numberWithCommas(props.user_data.stats.gp.toFixed(2))}</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
function numberWithCommas(x: any) {
|
|
||||||
return x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
|
|
||||||
}
|
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
import * as React from "react";
|
|
||||||
import DailySubTasks from "./DailySubTasks";
|
|
||||||
import renderMarkdown from "../markdownRender";
|
|
||||||
|
|
||||||
function DailyItem(props: any) {
|
|
||||||
var text_html = renderMarkdown(props.daily_text);
|
|
||||||
var note_html = renderMarkdown(props.daily_notes);
|
|
||||||
return (
|
|
||||||
<div className="todo-item" id={props.id}>
|
|
||||||
<input type="checkbox" className="checkbox" id={props.id} onChange={props.onChange} checked={props.completed} />
|
|
||||||
<div>
|
|
||||||
<p><span dangerouslySetInnerHTML={{__html: text_html}}></span></p>
|
|
||||||
<div className="description" dangerouslySetInnerHTML={{__html: note_html}}></div>
|
|
||||||
{/* {console.log(props.checklist)} */}
|
|
||||||
<DailySubTasks key={props.daily_subtasks.id} subtasks={props.daily_subtasks} onChangeChecklistItem={props.onChangeChecklistItem}></DailySubTasks>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default DailyItem
|
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
import * as React from "react";
|
|
||||||
import renderMarkdown from "../markdownRender";
|
|
||||||
|
|
||||||
function DailySubTasks(props: any) {
|
|
||||||
|
|
||||||
if (props.subtasks) {
|
|
||||||
const subtasks = props.subtasks.map((subtask: any) => {
|
|
||||||
let subtask_text = renderMarkdown(subtask.text);
|
|
||||||
return (
|
|
||||||
<div className="subtask" id={subtask.id} key={subtask.id} >
|
|
||||||
<input id={subtask.id} type="checkbox" className="checkbox-checklist" onChange={props.onChangeChecklistItem} checked={subtask.completed} />
|
|
||||||
<p id={subtask.id}><span dangerouslySetInnerHTML={{__html: subtask_text}}></span></p>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
});
|
|
||||||
return subtasks
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
return <div></div>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
export default DailySubTasks
|
|
||||||
|
|
@ -1,107 +0,0 @@
|
||||||
import * as React from "react";
|
|
||||||
import DailyItem from "./DailyItem"
|
|
||||||
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
|
|
||||||
|
|
||||||
export default function Index(props: any){
|
|
||||||
|
|
||||||
if(props.dailys == undefined) {
|
|
||||||
return <div id="classDisplay">No Dailies Present</div>
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
|
|
||||||
const notDueDailies = props.dailys.map((daily: any) => {
|
|
||||||
|
|
||||||
if (!daily.isDue) {
|
|
||||||
let daily_notes = '';
|
|
||||||
let daily_subtasks = '';
|
|
||||||
if (props.settings.showTaskDescription) {
|
|
||||||
daily_notes = daily.notes;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (props.settings.showSubTasks) {
|
|
||||||
daily_subtasks = daily.checklist;
|
|
||||||
}
|
|
||||||
return <DailyItem key={daily.id} id={daily.id} daily_text={daily.text}
|
|
||||||
daily_notes={daily_notes} daily_subtasks={daily_subtasks}
|
|
||||||
onChange={props.onChange} completed={daily.completed} onChangeChecklistItem={props.onChangeChecklistItem}/>
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const incompleteDailies = props.dailys.map((daily: any) => {
|
|
||||||
if (!daily.completed&&daily.isDue) {
|
|
||||||
let daily_notes = '';
|
|
||||||
let daily_subtasks = '';
|
|
||||||
if (props.settings.showTaskDescription) {
|
|
||||||
daily_notes = daily.notes;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (props.settings.showSubTasks) {
|
|
||||||
daily_subtasks = daily.checklist;
|
|
||||||
}
|
|
||||||
return <DailyItem key={daily.id} id={daily.id} daily_text={daily.text}
|
|
||||||
daily_notes={daily_notes} daily_subtasks={daily_subtasks}
|
|
||||||
onChange={props.onChange} completed={daily.completed} onChangeChecklistItem={props.onChangeChecklistItem}/>
|
|
||||||
}
|
|
||||||
})
|
|
||||||
const completedDailies = props.dailys.map((daily: any) => {
|
|
||||||
// if(daily.completed)
|
|
||||||
// return <DailyItem key={daily.id} id={daily.id} daily_text={daily.text} daily_notes={daily.notes} onChange={props.onChange} completed={daily.completed}/>
|
|
||||||
if (daily.completed) {
|
|
||||||
let daily_notes = '';
|
|
||||||
let daily_subtasks = '';
|
|
||||||
if (props.settings.showTaskDescription) {
|
|
||||||
daily_notes = daily.notes;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (props.settings.showSubTasks) {
|
|
||||||
daily_subtasks = daily.checklist;
|
|
||||||
}
|
|
||||||
return <DailyItem key={daily.id} id={daily.id} daily_text={daily.text}
|
|
||||||
daily_notes={daily_notes} daily_subtasks={daily_subtasks}
|
|
||||||
onChange={props.onChange} completed={daily.completed} onChangeChecklistItem={props.onChangeChecklistItem}/>
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const allDailies = props.dailys.map((daily: any) => {
|
|
||||||
// if(daily.completed)
|
|
||||||
// return <DailyItem key={daily.id} id={daily.id} daily_text={daily.text} daily_notes={daily.notes} onChange={props.onChange} completed={daily.completed}/>
|
|
||||||
let daily_notes = '';
|
|
||||||
let daily_subtasks = '';
|
|
||||||
if (props.settings.showTaskDescription) {
|
|
||||||
daily_notes = daily.notes;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (props.settings.showSubTasks) {
|
|
||||||
daily_subtasks = daily.checklist;
|
|
||||||
}
|
|
||||||
return <DailyItem key={daily.id} id={daily.id} daily_text={daily.text}
|
|
||||||
daily_notes={daily_notes} daily_subtasks={daily_subtasks}
|
|
||||||
onChange={props.onChange} completed={daily.completed} onChangeChecklistItem={props.onChangeChecklistItem}/>
|
|
||||||
})
|
|
||||||
|
|
||||||
const display = <div id="classDisplay">
|
|
||||||
<Tabs>
|
|
||||||
<TabList>
|
|
||||||
<Tab>Active</Tab>
|
|
||||||
<Tab>Completed</Tab>
|
|
||||||
<Tab>Not Due</Tab>
|
|
||||||
<Tab>All</Tab>
|
|
||||||
</TabList>
|
|
||||||
<TabPanel>
|
|
||||||
<ul>{incompleteDailies}</ul>
|
|
||||||
</TabPanel>
|
|
||||||
<TabPanel>
|
|
||||||
<ul>{completedDailies}</ul>
|
|
||||||
</TabPanel>
|
|
||||||
<TabPanel>
|
|
||||||
<ul>{notDueDailies}</ul>
|
|
||||||
</TabPanel>
|
|
||||||
<TabPanel>
|
|
||||||
<ul>{allDailies}</ul>
|
|
||||||
</TabPanel>
|
|
||||||
</Tabs>
|
|
||||||
</div>
|
|
||||||
return(display);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
import * as React from "react";
|
|
||||||
import renderMarkdown from "../markdownRender";
|
|
||||||
|
|
||||||
function HabitItem(props: any) {
|
|
||||||
let habit_text = renderMarkdown(props.habit_text);
|
|
||||||
let habit_notes = renderMarkdown(props.habit_notes);
|
|
||||||
return (
|
|
||||||
<div className="habit-item" id={props.id}>
|
|
||||||
<div className="habit-button-grp">
|
|
||||||
<button className="habit-button" id={"plus" + props.id} onClick={props.onChange}>
|
|
||||||
+{props.upCount}
|
|
||||||
</button>
|
|
||||||
<button className="habit-button" id={"mins" + props.id} onClick={props.onChange}>
|
|
||||||
-{props.downCount}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="habit-text"><span dangerouslySetInnerHTML={{__html: habit_text}}></span></p>
|
|
||||||
<div className="description" dangerouslySetInnerHTML={{__html: habit_notes}}></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default HabitItem
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
import * as React from "react";
|
|
||||||
import HabitItem from "./HabitItem"
|
|
||||||
|
|
||||||
export default function Index(props: any){
|
|
||||||
if(props.habits == undefined) {
|
|
||||||
return (<div id="classDisplay">
|
|
||||||
No habits present.
|
|
||||||
</div>)
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
const allHabits = props.habits.map((habit: any) => {
|
|
||||||
if (props.settings.showTaskDescription) {
|
|
||||||
return <HabitItem key={habit.id} id={habit.id} habit_text={habit.text} habit_notes={habit.notes} upCount={habit.counterUp} downCount={habit.counterDown} onChange={props.onChange}/>
|
|
||||||
} else {
|
|
||||||
return <HabitItem key={habit.id} id={habit.id} habit_text={habit.text} upCount={habit.counterUp} downCount={habit.counterDown} onChange={props.onChange}/>
|
|
||||||
}
|
|
||||||
})
|
|
||||||
const display = <div id="classDisplay">
|
|
||||||
<ul>{allHabits}</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
return(display);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
import * as React from "react";
|
|
||||||
import renderMarkdown from "../markdownRender";
|
|
||||||
|
|
||||||
function RewardItem(props: any) {
|
|
||||||
let reward_text = renderMarkdown(props.reward_text);
|
|
||||||
let reward_notes = renderMarkdown(props.reward_notes);
|
|
||||||
return (
|
|
||||||
<div className="habit-item" id={props.id}>
|
|
||||||
<div className="habit-button-grp">
|
|
||||||
<button className="habit-button" id={props.id} onClick={props.onChange}>-{props.reward_value}</button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="habit-text"><span dangerouslySetInnerHTML={{__html: reward_text}}></span></p>
|
|
||||||
<div className="description" dangerouslySetInnerHTML={{__html: reward_notes}}></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default RewardItem
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
import * as React from "react";
|
|
||||||
import RewardItem from "./RewardItem"
|
|
||||||
|
|
||||||
export default function Index(props: any){
|
|
||||||
if(props.rewards == undefined) {
|
|
||||||
return (<div id="classDisplay">
|
|
||||||
No Rewards present.
|
|
||||||
</div>)
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
const allRewards = props.rewards.map((reward: any) => {
|
|
||||||
if (props.settings.showTaskDescription) {
|
|
||||||
return <RewardItem key={reward.id} id={reward.id} reward_text={reward.text} reward_notes={reward.notes} reward_value={reward.value} onChange={props.onChange}/>
|
|
||||||
} else {
|
|
||||||
return <RewardItem key={reward.id} id={reward.id} reward_text={reward.text} reward_value={reward.value} onChange={props.onChange}/>
|
|
||||||
}
|
|
||||||
})
|
|
||||||
const display = <div id="classDisplay">
|
|
||||||
<ul>{allRewards}</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
return(display);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
import * as React from "react";
|
|
||||||
import TodoSubTasks from "./TodoSubTasks";
|
|
||||||
import renderMarkdown from "../markdownRender"
|
|
||||||
import moment from "moment";
|
|
||||||
|
|
||||||
function TodoItem(props: any) {
|
|
||||||
var dueDate = (props.dueDate==null)?"":("Due Date:"+(moment(props.dueDate).format(props.dueDateFormat)));
|
|
||||||
var text_html = renderMarkdown(props.todo_text);
|
|
||||||
var note_html = renderMarkdown(props.todo_notes);
|
|
||||||
return (
|
|
||||||
<div className="todo-item" id={props.id}>
|
|
||||||
<input type="checkbox" className="checkbox" id={props.id} onChange={props.onChange} checked={props.completed}/>
|
|
||||||
<div>
|
|
||||||
<p><span dangerouslySetInnerHTML={{__html: text_html}}></span></p>
|
|
||||||
<div className="description" dangerouslySetInnerHTML={{__html: note_html}}></div>
|
|
||||||
<TodoSubTasks todoID={props.id} subtasks={props.todo_subtasks} onChange={props.onChangeChecklistItem}></TodoSubTasks>
|
|
||||||
<div className="due-date">{dueDate}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default TodoItem
|
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
import * as React from "react";
|
|
||||||
import renderMarkdown from "../markdownRender";
|
|
||||||
|
|
||||||
function TodoSubTasks(props: any) {
|
|
||||||
if (props.subtasks) {
|
|
||||||
const subtasks = props.subtasks.map((subtask: any) => {
|
|
||||||
let subtask_text = renderMarkdown(subtask.text);
|
|
||||||
return (
|
|
||||||
<div className="subtask" id={subtask.id} key={subtask.id}>
|
|
||||||
<input type="checkbox" className="checkbox" onChange={props.onChange} checked={subtask.completed} id={subtask.id}/>
|
|
||||||
<p id={subtask.id}><span dangerouslySetInnerHTML={{__html: subtask_text}}></span></p>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
});
|
|
||||||
return subtasks
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
return <div></div>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
export default TodoSubTasks
|
|
||||||
|
|
@ -1,50 +0,0 @@
|
||||||
import * as React from "react";
|
|
||||||
import TodoItem from "./TodoItem"
|
|
||||||
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
|
|
||||||
|
|
||||||
export default function Index(props: any){
|
|
||||||
if(props.todos == undefined) {
|
|
||||||
return <div id="classDisplay">No Todos present.</div>
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
const incompleteTodos = props.todos.map((todo: any) => {
|
|
||||||
|
|
||||||
if(!todo.completed) {
|
|
||||||
let todo_notes = '';
|
|
||||||
let todo_subtasks = '';
|
|
||||||
if (props.settings.showTaskDescription) {
|
|
||||||
todo_notes = todo.notes;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (props.settings.showSubTasks) {
|
|
||||||
todo_subtasks = todo.checklist;
|
|
||||||
}
|
|
||||||
return <TodoItem key={todo.id} id={todo.id} todo_text={todo.text}
|
|
||||||
todo_notes={todo_notes} todo_subtasks={todo_subtasks}
|
|
||||||
onChange={props.onChange} onChangeChecklistItem={props.onChangeChecklistItem} completed={todo.completed} dueDate={todo.date} dueDateFormat={props.settings.dueDateFormat}/>
|
|
||||||
}
|
|
||||||
|
|
||||||
})
|
|
||||||
const completedTodos = props.todos.map((todo: any) => {
|
|
||||||
if(todo.completed)
|
|
||||||
return <TodoItem key={todo.id} id={todo.id} todo_text={todo.text} todo_notes={todo.notes} onChange={props.onChange} completed={todo.completed}/>
|
|
||||||
})
|
|
||||||
const display = <div id="classDisplay">
|
|
||||||
<Tabs>
|
|
||||||
<TabList>
|
|
||||||
<Tab>Active</Tab>
|
|
||||||
<Tab>Completed</Tab>
|
|
||||||
</TabList>
|
|
||||||
<TabPanel>
|
|
||||||
<ul className="todolist-indent">{incompleteTodos}</ul>
|
|
||||||
</TabPanel>
|
|
||||||
<TabPanel>
|
|
||||||
<ul className="todolist-indent">{completedTodos}</ul>
|
|
||||||
</TabPanel>
|
|
||||||
</Tabs>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
return(display);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,42 +0,0 @@
|
||||||
import * as React from "react";
|
|
||||||
import Dailiesview from "./Dailiesview"
|
|
||||||
import Habitsview from "./Habitsview"
|
|
||||||
import Todoview from "./Todoview"
|
|
||||||
import Rewardview from "./Rewardview"
|
|
||||||
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
|
|
||||||
|
|
||||||
export default function Index(props: any){
|
|
||||||
const display = <div className="task-view">
|
|
||||||
<Tabs>
|
|
||||||
<TabList>
|
|
||||||
|
|
||||||
<Tab>
|
|
||||||
<span className="material-icons md-24">today</span>
|
|
||||||
</Tab>
|
|
||||||
<Tab >
|
|
||||||
<span className="material-icons md-24">add_chart</span>
|
|
||||||
</Tab>
|
|
||||||
<Tab>
|
|
||||||
<span className="material-icons md-24">assignment_turned_in</span>
|
|
||||||
</Tab>
|
|
||||||
<Tab>
|
|
||||||
<span className="material-icons md-24">account_balance</span>
|
|
||||||
</Tab>
|
|
||||||
</TabList>
|
|
||||||
<TabPanel>
|
|
||||||
<Dailiesview dailys={props.data.dailys} settings = {props.settings} onChange={props.handleChangeDailys} onChangeChecklistItem={props.handleChangeChecklistItem}/>
|
|
||||||
</TabPanel>
|
|
||||||
<TabPanel>
|
|
||||||
<Habitsview habits={props.data.habits} settings = {props.settings} onChange={props.handleChangeHabits}/>
|
|
||||||
</TabPanel>
|
|
||||||
<TabPanel>
|
|
||||||
<Todoview todos={props.data.todos} settings = {props.settings} onChange={props.handleChangeTodos} onChangeChecklistItem={props.handleChangeChecklistItem}/>
|
|
||||||
</TabPanel>
|
|
||||||
<TabPanel>
|
|
||||||
<Rewardview rewards={props.data.rewards} settings = {props.settings} onChange={props.handleChangeRewards} />
|
|
||||||
</TabPanel>
|
|
||||||
</Tabs>
|
|
||||||
</div>
|
|
||||||
return(display);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
import MarkdownIt from "markdown-it";
|
|
||||||
import markdownitEmoji from "markdown-it-emoji"
|
|
||||||
import twemoji from "twemoji";
|
|
||||||
|
|
||||||
export default function renderMarkdown(markdown: string) {
|
|
||||||
//check if markdown is empty or not a string
|
|
||||||
if (markdown === "" || markdown === undefined) {
|
|
||||||
return "";
|
|
||||||
}
|
|
||||||
const md = new MarkdownIt({
|
|
||||||
html: true,
|
|
||||||
breaks: true,
|
|
||||||
linkify: true,
|
|
||||||
typographer: true
|
|
||||||
});
|
|
||||||
md.use(markdownitEmoji);
|
|
||||||
md.renderer.rules.emoji = function(token, idx) {
|
|
||||||
return twemoji.parse(token[idx].content);
|
|
||||||
};
|
|
||||||
return md.render(markdown);
|
|
||||||
}
|
|
||||||
|
|
@ -1,70 +0,0 @@
|
||||||
// import fetch from "node-fetch";
|
|
||||||
|
|
||||||
export async function getStats(username: string, credentials: string){
|
|
||||||
const url = "https://habitica.com/export/userdata.json"
|
|
||||||
const response = await fetch(url, {
|
|
||||||
method: 'GET',
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
"x-client": "278e719e-5f9c-43b1-9dba-8b73343dc062-HabiticaSync",
|
|
||||||
"x-api-user": username,
|
|
||||||
"x-api-key": credentials,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
return (await response)
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function scoreTask(username: string, credentials: string, taskID: string, direction: string) {
|
|
||||||
const url = "https://habitica.com/api/v3/tasks/".concat(taskID).concat("/score/").concat(direction)
|
|
||||||
const response = fetch(url, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
"x-client": "278e719e-5f9c-43b1-9dba-8b73343dc062-HabiticaSync",
|
|
||||||
"x-api-user": username,
|
|
||||||
"x-api-key": credentials,
|
|
||||||
}
|
|
||||||
})
|
|
||||||
return(response)
|
|
||||||
}
|
|
||||||
export async function makeCronReq(username: string, credentials: string){
|
|
||||||
const url = "https://habitica.com/api/v3/cron";
|
|
||||||
const response = fetch(url, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
"x-client": "278e719e-5f9c-43b1-9dba-8b73343dc062-HabiticaSync",
|
|
||||||
"x-api-user": username,
|
|
||||||
"x-api-key": credentials,
|
|
||||||
}
|
|
||||||
})
|
|
||||||
return(response)
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function costReward(username: string, credentials: string, taskID: string, direction: string) {
|
|
||||||
const url = "https://habitica.com/api/v4/tasks/".concat(taskID).concat("/score/").concat(direction)
|
|
||||||
const response = fetch(url, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
"x-client": "278e719e-5f9c-43b1-9dba-8b73343dc062-HabiticaSync",
|
|
||||||
"x-api-user": username,
|
|
||||||
"x-api-key": credentials,
|
|
||||||
}
|
|
||||||
})
|
|
||||||
return(response)
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function scoreChecklistItem(username: string, credentials: string, checklistItemID: string, taskID: string) {
|
|
||||||
const url = "https://habitica.com/api/v3/tasks/".concat(taskID).concat("/checklist/").concat(checklistItemID).concat("/score")
|
|
||||||
const response = fetch(url, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
"x-client": "278e719e-5f9c-43b1-9dba-8b73343dc062-HabiticaSync",
|
|
||||||
"x-api-user": username,
|
|
||||||
"x-api-key": credentials,
|
|
||||||
}
|
|
||||||
})
|
|
||||||
return(response)
|
|
||||||
}
|
|
||||||
319
styles.css
319
styles.css
|
|
@ -1,323 +1,36 @@
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@1,300&display=swap');
|
/* Empty. change later */
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Open Sans:ital,wght@0,400;1,100&family=Roboto&display=swap');
|
|
||||||
|
|
||||||
.add-task-input {
|
.book {
|
||||||
display: flex;
|
border: 1px solid var(--background-modifier-border);
|
||||||
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#profile-name {
|
.book__title {
|
||||||
font-size: x-large;
|
font-weight: 600;
|
||||||
font-weight: bold;
|
|
||||||
padding-bottom: 3%;
|
|
||||||
}
|
|
||||||
.stats {
|
|
||||||
width: 95%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
font-weight: bold;
|
|
||||||
padding-bottom: 5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.stats-view {
|
.book__author {
|
||||||
border-bottom: 1px;
|
color: var(--text-muted);
|
||||||
}
|
|
||||||
.modify-todo {
|
|
||||||
align-self: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delete-todo {
|
|
||||||
align-self: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.todo-item {
|
.todo-item {
|
||||||
display: grid;
|
display: flex;
|
||||||
grid-template-columns: 1fr 30fr 1fr 1fr;
|
justify-content: flex-start;
|
||||||
justify-content: left;
|
align-items: center;
|
||||||
align-items: flex-start;
|
padding: 30px 20px 0;
|
||||||
padding-top: 5px;
|
width: 70%;
|
||||||
padding-bottom: 5px;
|
|
||||||
width: 100%;
|
|
||||||
border-bottom: 1px solid #cecece;
|
border-bottom: 1px solid #cecece;
|
||||||
font-family: Roboto, sans-serif;
|
font-family: Roboto, sans-serif;
|
||||||
font-weight: bold;
|
|
||||||
font-size: 16px;
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.description {
|
|
||||||
font-family: Open Sans, sans-serif;
|
|
||||||
font-weight: 100;
|
font-weight: 100;
|
||||||
}
|
font-size: 15px;
|
||||||
.description > ul {
|
color: #ffffff;
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.habit-text {
|
|
||||||
text-align: left !important;
|
|
||||||
font-weight: bold;
|
|
||||||
padding-top: 5px;
|
|
||||||
width: 80%;
|
|
||||||
margin-right: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.habit-button {
|
|
||||||
background-color: var(--interactive-accent);
|
|
||||||
border: none;
|
|
||||||
/* color: black; */
|
|
||||||
text-align: center;
|
|
||||||
text-decoration: none;
|
|
||||||
font-size: 16px;
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
color: var(--text-on-accent);
|
|
||||||
}
|
|
||||||
/* habit-button on hover css selector */
|
|
||||||
.habit-button:hover {
|
|
||||||
color: var(--text-on-accent);
|
|
||||||
background-color: var(--interactive-accent-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
.habit-item {
|
|
||||||
display: flex;
|
|
||||||
grid-template-columns: 60px 1fr;
|
|
||||||
width: 100%;
|
|
||||||
gap: 5px;
|
|
||||||
border-bottom: 1px solid #cecece;
|
|
||||||
font-family: Open Sans, sans-serif;
|
|
||||||
font-weight: 100%;
|
|
||||||
font-size: 16px;
|
|
||||||
padding-top: 5px;
|
|
||||||
padding-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.habit-button-grp {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-content: stretch;
|
|
||||||
height: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type=checkbox] {
|
input[type=checkbox] {
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
margin-top: 5px;
|
font-size: 30px;
|
||||||
align-self: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.todo-content {
|
|
||||||
align-self: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submit-button {
|
|
||||||
/* padding: 5px 5px; */
|
|
||||||
font-size: 15px;
|
|
||||||
border: 1px solid #aaa;
|
|
||||||
/* white-space: nowrap; */
|
|
||||||
/* margin: 10px; */
|
|
||||||
margin: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type=checkbox]:focus {
|
input[type=checkbox]:focus {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
display: none; /* Chrome Safari */
|
|
||||||
}
|
|
||||||
|
|
||||||
.plugin-root {
|
|
||||||
min-width: 260px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: stretch;
|
|
||||||
}
|
|
||||||
|
|
||||||
#classDisplay {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.view-content {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.substats {
|
|
||||||
font-size: medium;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* react-tabs internal file :wink: */
|
|
||||||
.material-icons {
|
|
||||||
font-size: 12px !important;
|
|
||||||
padding-top: 1px;
|
|
||||||
padding-right: 2px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.material-icons.md-18 { font-size: 18px !important; }
|
|
||||||
.material-icons.md-24 { font-size: 24px !important; }
|
|
||||||
.material-icons.md-32 { font-size: 32px !important; }
|
|
||||||
.material-icons.md-48 { font-size: 48px !important; }
|
|
||||||
|
|
||||||
|
|
||||||
.react-tabs {
|
|
||||||
-webkit-tap-highlight-color: transparent;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.react-tabs__tab-list {
|
|
||||||
border-bottom: 1px solid #aaa;
|
|
||||||
margin: 0 0 5px;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.react-tabs__tab {
|
|
||||||
display: inline-block;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
border-bottom: none;
|
|
||||||
bottom: -1px;
|
|
||||||
position: relative;
|
|
||||||
list-style: none;
|
|
||||||
padding: 1% 2%;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: medium;
|
|
||||||
}
|
|
||||||
|
|
||||||
.react-tabs__tab--selected {
|
|
||||||
background: var(--interactive-accent);
|
|
||||||
color: white;
|
|
||||||
border-radius: 5px 5px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.react-tabs__tab--disabled {
|
|
||||||
color: GrayText;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
.react-tabs__tab:focus {
|
|
||||||
box-shadow: 0 0 5px hsl(208, 99%, 50%);
|
|
||||||
border-color: hsl(208, 99%, 50%);
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.react-tabs__tab:focus:after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
height: 5px;
|
|
||||||
left: -4px;
|
|
||||||
right: -4px;
|
|
||||||
bottom: -5px;
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.react-tabs__tab-panel {
|
|
||||||
display: none;
|
|
||||||
left: 0px;
|
|
||||||
height: 88%;
|
|
||||||
/* overflow: scroll; */
|
|
||||||
}
|
|
||||||
|
|
||||||
.task-panel {
|
|
||||||
overflow: scroll;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.react-tabs__tab-panel--selected {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
ul li:not(.task-list-item)::before {
|
|
||||||
content: "•";
|
|
||||||
color: transparent;
|
|
||||||
display: inline-block;
|
|
||||||
width: 1em;
|
|
||||||
margin-left: -1em;
|
|
||||||
padding: 0;
|
|
||||||
font-weight: bold;
|
|
||||||
text-shadow: 0 0 0.5em transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.task-operation {
|
|
||||||
align-self: center;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit-item {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit-button {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.task-submit {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 10fr 5fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.add-task-input {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.task-input-box {
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
margin: auto;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
white-space: nowrap;
|
|
||||||
padding: 5px 5px;
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
.cron {
|
|
||||||
display: inline-grid;
|
|
||||||
justify-content: center;
|
|
||||||
text-align: center;;
|
|
||||||
margin-top: 5px;
|
|
||||||
margin-left: 10%;
|
|
||||||
margin-right: 10%;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
#cronMessage {
|
|
||||||
margin: 20px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
color: var(--text-normal)
|
|
||||||
}
|
|
||||||
#cronButton {
|
|
||||||
margin: auto;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
white-space: nowrap;
|
|
||||||
padding: 5px 5px;
|
|
||||||
background-color: var(--interactive-accent);
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtask {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
font-weight: normal;
|
|
||||||
font-family: Roboto, sans-serif;
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
.emoji {
|
|
||||||
height: 1em;
|
|
||||||
}
|
|
||||||
.description>ul {
|
|
||||||
list-style-type: disc;
|
|
||||||
margin-left: 10% !important;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -3,14 +3,13 @@
|
||||||
"baseUrl": ".",
|
"baseUrl": ".",
|
||||||
"inlineSourceMap": true,
|
"inlineSourceMap": true,
|
||||||
"inlineSources": true,
|
"inlineSources": true,
|
||||||
"module": "ESNext",
|
"module": "esnext",
|
||||||
"target": "es6",
|
|
||||||
"jsx": "react",
|
"jsx": "react",
|
||||||
|
"target": "es2017",
|
||||||
|
"allowJs": true,
|
||||||
"noImplicitAny": true,
|
"noImplicitAny": true,
|
||||||
"moduleResolution": "node",
|
"moduleResolution": "node",
|
||||||
"importHelpers": true,
|
"importHelpers": true,
|
||||||
"allowSyntheticDefaultImports": true,
|
|
||||||
"esModuleInterop": true,
|
|
||||||
"lib": [
|
"lib": [
|
||||||
"dom",
|
"dom",
|
||||||
"es5",
|
"es5",
|
||||||
|
|
|
||||||
32
view.ts
Normal file
32
view.ts
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
import { ItemView,WorkspaceLeaf } from "obsidian";
|
||||||
|
import * as React from "react";
|
||||||
|
import * as ReactDOM from "react-dom";
|
||||||
|
import { ReactView } from "./ReactView";
|
||||||
|
|
||||||
|
|
||||||
|
export const VIEW_TYPE_EXAMPLE = "example-view"
|
||||||
|
|
||||||
|
export class ExampleView extends ItemView {
|
||||||
|
constructor(leaf: WorkspaceLeaf) {
|
||||||
|
super(leaf)
|
||||||
|
}
|
||||||
|
|
||||||
|
getViewType() {
|
||||||
|
return VIEW_TYPE_EXAMPLE
|
||||||
|
}
|
||||||
|
|
||||||
|
getDisplayText() {
|
||||||
|
return "Example View"
|
||||||
|
}
|
||||||
|
|
||||||
|
async onOpen() {
|
||||||
|
ReactDOM.render(
|
||||||
|
React.createElement(ReactView),
|
||||||
|
this.containerEl.children[1]
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
async onClose(){
|
||||||
|
ReactDOM.unmountComponentAtNode(this.containerEl.children[1]);
|
||||||
|
}
|
||||||
|
}
|
||||||
54
view/App.tsx
Normal file
54
view/App.tsx
Normal file
|
|
@ -0,0 +1,54 @@
|
||||||
|
import * as React from "react";
|
||||||
|
import { getTasks } from "./habiticaAPI"
|
||||||
|
import TodoItem from "./TodoItem"
|
||||||
|
|
||||||
|
|
||||||
|
const username = "5b70c4ea-ed91-4fc4-8231-edd1984ec02c"
|
||||||
|
const credentials = "ccbeec3b-fe55-4952-a2fa-023d0fbbab85"
|
||||||
|
|
||||||
|
class App extends React.Component<any,any> {
|
||||||
|
constructor(props: any) {
|
||||||
|
super(props)
|
||||||
|
this.state = {
|
||||||
|
isLoaded: false,
|
||||||
|
tasks: ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
componentDidMount() {
|
||||||
|
getTasks(username, credentials)
|
||||||
|
.then(res => res.json())
|
||||||
|
.then(
|
||||||
|
result => {
|
||||||
|
console.log(result.data)
|
||||||
|
this.setState({
|
||||||
|
isLoaded: true,
|
||||||
|
tasks: result.data
|
||||||
|
})
|
||||||
|
},
|
||||||
|
(error) => {
|
||||||
|
this.setState({
|
||||||
|
isLoaded: true,
|
||||||
|
error
|
||||||
|
})
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
}
|
||||||
|
render(){
|
||||||
|
const { error, isLoaded, tasks } = this.state;
|
||||||
|
if (error) {
|
||||||
|
return <div>Error: {error.message}</div>;
|
||||||
|
} else if (!isLoaded) {
|
||||||
|
return <div>Loading...</div>;
|
||||||
|
} else {
|
||||||
|
const listItems = tasks.map((tasks: any) =>
|
||||||
|
<TodoItem key={tasks.id} task={tasks}/>
|
||||||
|
|
||||||
|
);
|
||||||
|
return (
|
||||||
|
<ul>{listItems}</ul>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default App
|
||||||
12
view/TodoItem.tsx
Normal file
12
view/TodoItem.tsx
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
import * as React from "react";
|
||||||
|
|
||||||
|
function TodoItem(props: any) {
|
||||||
|
return (
|
||||||
|
<div className="todo-item">
|
||||||
|
<input type="checkbox" />
|
||||||
|
<p>{props.task.text}</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default TodoItem
|
||||||
16
view/habiticaAPI.ts
Normal file
16
view/habiticaAPI.ts
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
// import fetch from "node-fetch";
|
||||||
|
|
||||||
|
|
||||||
|
export async function getTasks(username: string, credentials: string){
|
||||||
|
const url = "https://habitica.com/api/v3/tasks/user?type=todos"
|
||||||
|
const response = fetch(url, {
|
||||||
|
method: 'GET',
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
"x-client": username.concat("-testAPI"),
|
||||||
|
"x-api-user": username,
|
||||||
|
"x-api-key": credentials,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
return (response)
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue