Compare commits
86 commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
a3e378f219 | ||
|
c63f039b11 | ||
|
|
3c7d2099bd | ||
|
44893508dc | ||
|
64d045bbc5 | ||
|
|
fc6506525c | ||
|
|
b80d2f8dc1 | ||
|
|
67463a648d | ||
|
|
b2c93a4747 | ||
|
|
3d09f20d84 | ||
|
|
eadd8d9f8c | ||
|
|
e7b4572d2e | ||
|
|
350ab38135 | ||
|
|
615f3e8a78 | ||
|
|
c1851c2fc6 | ||
|
|
82780ba589 | ||
|
|
e4d3c78a9f | ||
|
932562ab2e | ||
|
|
22616cbed9 | ||
|
|
88fdde519d | ||
|
|
916236db5d | ||
|
|
e31d103dd7 | ||
|
|
0ac05ef6d3 | ||
|
|
6865d4f080 | ||
|
|
4878ed8aa8 | ||
|
|
dfc4e55cb5 | ||
|
|
6384c98181 | ||
|
|
54e6000eb8 | ||
|
|
d10a2ca747 | ||
|
|
8deee0ecc6 | ||
|
e45182547f | ||
|
|
9b15bb1236 | ||
|
|
bc97bcfc3f | ||
|
|
ffa79454a0 | ||
|
|
d29bfd9995 | ||
|
|
86dc33e57c | ||
|
|
288f0a0b09 | ||
|
|
4361341f56 | ||
|
|
9d6c50ef88 | ||
|
|
3d61b94932 | ||
|
|
f1915876ba | ||
|
|
25a1505fd0 | ||
|
|
412f9ed431 | ||
|
|
e0f400b761 | ||
|
|
b3282a360c | ||
|
|
af3b2fe53b | ||
|
|
04f207db5d | ||
|
|
b7b1c3848f | ||
|
|
af6f93d997 | ||
|
|
e8b010a3c5 | ||
|
|
faa33a5655 | ||
|
|
6a7651c04a | ||
|
f996379243 | ||
|
|
86f4fd0d74 | ||
|
|
f1a130077a | ||
|
|
2aa6c949fb | ||
|
|
68eff40b6b | ||
|
|
a8a4e32f7b | ||
|
|
977cacb8f6 | ||
|
|
2e0ec9d021 | ||
|
|
bc77246e44 | ||
|
|
4a9f52df3a | ||
|
|
dc05ce086e | ||
|
|
f3e8047322 | ||
|
|
24f22d28ca | ||
|
|
103620f3ef | ||
|
|
a3cc611dbc | ||
|
|
75b18f2f2a | ||
|
|
25312a6d93 | ||
|
|
0280d5bd3a | ||
|
|
0cd5fde19c | ||
|
|
30dd6590ec | ||
|
|
a4ebd7aab3 | ||
|
|
9fe8405bab | ||
|
|
048a6725ce | ||
|
|
a8e28b2ab7 | ||
|
|
bb4e7cdb92 | ||
|
|
470157b672 | ||
|
|
32f0e6bc98 | ||
|
|
6b715682f9 | ||
|
|
cd3c81cf5c | ||
|
|
08664f2aaf | ||
|
|
a2d3067b75 | ||
|
|
f195546524 | ||
|
|
e3f1d13ee0 | ||
|
|
964829cbb7 |
41 changed files with 1370 additions and 32910 deletions
8
.gitignore
vendored
8
.gitignore
vendored
|
|
@ -6,11 +6,17 @@
|
|||
node_modules
|
||||
package-lock.json
|
||||
|
||||
# yarn
|
||||
yarn.lock
|
||||
|
||||
|
||||
*.js.map
|
||||
|
||||
# obsidian
|
||||
data.json
|
||||
|
||||
#build_files
|
||||
main.js
|
||||
|
||||
#vscode
|
||||
.vscode
|
||||
.vscode
|
||||
21
LICENSE
Normal file
21
LICENSE
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
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,57 +1,46 @@
|
|||
## Obsidian Sample Plugin
|
||||
# Habitica Sync in Obsidian
|
||||
This plugin for Obsidian incorporates a view to display and interact with the task management app Habitica.
|
||||
|
||||
This is a sample plugin for Obsidian (https://obsidian.md).
|
||||
Please open issues for any bugs/functionality requests :)
|
||||
|
||||
This project uses Typescript to provide type checking and documentation.
|
||||
The repo depends on the latest plugin API (obsidian.d.ts) in Typescript Definition format, which contains TSDoc comments describing what it does.
|
||||
## Usage
|
||||
The plugin's view is enabled by clicking on the "Open Habitica Pane" option in the side ribbon (default hotkey is `Ctrl+Shift+H`).
|
||||
|
||||
**Note:** The Obsidian API is still in early alpha and is subject to change at any time!
|
||||
To sync your Habitica account, go to the settings page of the plugin and enter your user ID and API token credentials.
|
||||
## Features
|
||||
### Pane View
|
||||
#### View stats (HP, XP, coins)
|
||||
#### Views
|
||||
Task Information:
|
||||
- Title, description, subtasks
|
||||
- Markdown and emoji support
|
||||
|
||||
This sample plugin demonstrates some of the basic functionality the plugin API can do.
|
||||
- Changes the default font color to red using `styles.css`.
|
||||
- Adds a ribbon icon, which shows a Notice when clicked.
|
||||
- Adds a command "Open Sample Modal" which opens a Modal.
|
||||
- Adds a plugin setting tab to the settings page.
|
||||
- Registers a global click event and output 'click' to the console.
|
||||
- Registers a global interval which logs 'setInterval' to the console.
|
||||
Tabs:
|
||||
- To Do's
|
||||
- Active/Completed
|
||||
- Dailies
|
||||
- Due/Not Due/Completed
|
||||
- [](https://gyazo.com/1966b17f954dcffa954922570e860a06)
|
||||
- Habits
|
||||
- [](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 (+/-)
|
||||
|
||||
### First time developing plugins?
|
||||
### Settings
|
||||
|
||||
Quick starting guide for new plugin devs:
|
||||
The following two inputs help fetch your user data to be displayed in the Obsidian view:
|
||||
- **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
|
||||
|
||||
- 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.
|
||||
## Roadmap
|
||||
|
||||
### Releasing new releases
|
||||
*Feel free to support us and donate!*
|
||||
|
||||
- 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.
|
||||
<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' />
|
||||
|
||||
### 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
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
import * as React from "react";
|
||||
import App from "./view/App";
|
||||
|
||||
export default function ReactView(props: any){
|
||||
return(
|
||||
<App username={props.userID} apiToken={props.tokenAPI} plugin={props.plugin}/>
|
||||
)
|
||||
}
|
||||
32290
main.js
32290
main.js
File diff suppressed because one or more lines are too long
57
main.ts
57
main.ts
|
|
@ -1,57 +0,0 @@
|
|||
import { Notice, Plugin } from "obsidian";
|
||||
import { ExampleSettingsTab } from "./settings";
|
||||
import { ExampleView, VIEW_TYPE_EXAMPLE} from "./view"
|
||||
|
||||
interface ExamplePluginSettings {
|
||||
userID: string
|
||||
apiToken: string
|
||||
}
|
||||
const DEFAULT_SETTINGS: Partial<ExamplePluginSettings> = {
|
||||
userID: "",
|
||||
apiToken: ""
|
||||
}
|
||||
export default class ExamplePlugin extends Plugin {
|
||||
settings: ExamplePluginSettings;
|
||||
view: ExampleView;
|
||||
|
||||
displayNotice(message: string){
|
||||
new Notice(message)
|
||||
}
|
||||
async onload() {
|
||||
await this.loadSettings();
|
||||
this.addSettingTab(new ExampleSettingsTab(this.app, this));
|
||||
this.registerView(
|
||||
VIEW_TYPE_EXAMPLE,
|
||||
(leaf) => (this.view = new ExampleView(leaf, this))
|
||||
);
|
||||
this.addRibbonIcon("dice", "Open Habitica Pane", () => { //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,10 +1,11 @@
|
|||
{
|
||||
"id": "obsidian-habitica-integration",
|
||||
"name": "AAA Obsidian Habitica Integration",
|
||||
"version": "0.0.1",
|
||||
"name": "Habitica Sync",
|
||||
"version": "1.0.2",
|
||||
"minAppVersion": "0.9.12",
|
||||
"description": "This plugin helps integrate Habitica user tasks and stats into Obsidian",
|
||||
"author": "Leoh and Ran",
|
||||
"authorUrl": "",
|
||||
"isDesktopOnly": false
|
||||
"isDesktopOnly": false,
|
||||
"js": "main.js"
|
||||
}
|
||||
|
|
|
|||
34
old_view.ts
34
old_view.ts
|
|
@ -1,34 +0,0 @@
|
|||
import { ItemView,WorkspaceLeaf } from "obsidian";
|
||||
import * as React from "react";
|
||||
import * as ReactDOM from "react-dom";
|
||||
import ReactView from "./ReactView";
|
||||
import ExamplePlugin from "main";
|
||||
|
||||
|
||||
export const VIEW_TYPE_EXAMPLE = "example-view"
|
||||
|
||||
export class ExampleView extends ItemView {
|
||||
plugin: ExamplePlugin;
|
||||
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]);
|
||||
}
|
||||
}
|
||||
61
package.json
61
package.json
|
|
@ -1,36 +1,51 @@
|
|||
{
|
||||
"name": "obsidian-habitica-integration",
|
||||
"version": "0.12.0",
|
||||
"version": "1.0.0",
|
||||
"description": "This plugin allows for Habitica integration into Obsidian",
|
||||
"main": "main.js",
|
||||
"scripts": {
|
||||
"dev": "rollup --config rollup.config.js -w",
|
||||
"build": "rollup --config rollup.config.js --environment BUILD:production"
|
||||
"dev": "rollup --config rollup.config.mjs -w",
|
||||
"build": "rollup --config rollup.config.mjs --environment BUILD:production",
|
||||
"dev2": "obsidian-plugin dev src/main.ts"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"author": "Leonard and Ran",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-commonjs": "^18.0.0",
|
||||
"@rollup/plugin-node-resolve": "^11.2.1",
|
||||
"@rollup/plugin-typescript": "^8.2.1",
|
||||
"@types/node": "^14.14.37",
|
||||
"@types/react": "^17.0.27",
|
||||
"@types/react-dom": "^17.0.9",
|
||||
"@types/react-tabs": "^2.3.3",
|
||||
"css-loader": "^6.4.0",
|
||||
"extract-text-webpack-plugin": "^2.1.2",
|
||||
"obsidian": "^0.12.0",
|
||||
"rollup": "^2.32.1",
|
||||
"style-loader": "^3.3.0",
|
||||
"tslib": "^2.2.0",
|
||||
"typescript": "^4.2.4"
|
||||
"@rollup/plugin-commonjs": "^25.0.7",
|
||||
"@rollup/plugin-json": "^6.1.0",
|
||||
"@rollup/plugin-node-resolve": "^15.2.3",
|
||||
"@rollup/plugin-typescript": "^11.1.6",
|
||||
"@types/markdown-it": "^13.0.7",
|
||||
"@types/markdown-it-emoji": "^2.0.4",
|
||||
"@types/node": "^20.11.0",
|
||||
"@types/node-emoji": "^1.8.2",
|
||||
"@types/react": "^18.2.47",
|
||||
"@types/react-dom": "^18.2.18",
|
||||
"@types/react-tabs": "^5.0.4",
|
||||
"@types/twemoji": "^13.1.1",
|
||||
"css-loader": "^6.9.0",
|
||||
"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": {
|
||||
"node": "^16.10.0",
|
||||
"node-fetch": "^3.0.0",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-tabs": "^3.2.2"
|
||||
"markdown-it": "^14.0.0",
|
||||
"markdown-it-emoji": "^2.0.2",
|
||||
"moment": "^2.30.1",
|
||||
"node": "^21.2.0",
|
||||
"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,30 +1,32 @@
|
|||
import typescript from '@rollup/plugin-typescript';
|
||||
import {nodeResolve} from '@rollup/plugin-node-resolve';
|
||||
import commonjs from '@rollup/plugin-commonjs';
|
||||
|
||||
const isProd = (process.env.BUILD === 'production');
|
||||
|
||||
const banner =
|
||||
`/*
|
||||
THIS IS A GENERATED/BUNDLED FILE BY ROLLUP
|
||||
if you want to view the source visit the plugins github repository
|
||||
*/
|
||||
`;
|
||||
|
||||
export default {
|
||||
input: 'main.ts',
|
||||
output: {
|
||||
dir: '.',
|
||||
sourcemap: 'inline',
|
||||
sourcemapExcludeSources: isProd,
|
||||
format: 'cjs',
|
||||
exports: 'default',
|
||||
banner,
|
||||
},
|
||||
external: ['obsidian'],
|
||||
plugins: [
|
||||
typescript(),
|
||||
nodeResolve({browser: true}),
|
||||
commonjs(),
|
||||
]
|
||||
import typescript from '@rollup/plugin-typescript';
|
||||
import {nodeResolve} from '@rollup/plugin-node-resolve';
|
||||
import commonjs from '@rollup/plugin-commonjs';
|
||||
import json from '@rollup/plugin-json';
|
||||
|
||||
const isProd = (process.env.BUILD === 'production');
|
||||
|
||||
const banner =
|
||||
`/*
|
||||
THIS IS A GENERATED/BUNDLED FILE BY ROLLUP
|
||||
if you want to view the source visit the plugins github repository
|
||||
*/
|
||||
`;
|
||||
|
||||
export default {
|
||||
input: 'src/main.ts',
|
||||
output: {
|
||||
dir: '.',
|
||||
sourcemap: 'inline',
|
||||
sourcemapExcludeSources: isProd,
|
||||
format: 'cjs',
|
||||
exports: 'default',
|
||||
banner,
|
||||
},
|
||||
external: ['obsidian'],
|
||||
plugins: [
|
||||
typescript(),
|
||||
nodeResolve({browser: true}),
|
||||
commonjs(),
|
||||
json(),
|
||||
]
|
||||
};
|
||||
42
settings.ts
42
settings.ts
|
|
@ -1,42 +0,0 @@
|
|||
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("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();
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
71
src/main.ts
Normal file
71
src/main.ts
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
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]
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
80
src/settings.ts
Normal file
80
src/settings.ts
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
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
Normal file
37
src/view.tsx
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
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
Normal file
227
src/view/App.tsx
Normal file
|
|
@ -0,0 +1,227 @@
|
|||
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
|
||||
0
src/view/Components/Statsview/index.css
Normal file
0
src/view/Components/Statsview/index.css
Normal file
15
src/view/Components/Statsview/index.tsx
Normal file
15
src/view/Components/Statsview/index.tsx
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
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, ",");
|
||||
}
|
||||
22
src/view/Components/Taskview/Dailiesview/DailyItem.tsx
Normal file
22
src/view/Components/Taskview/Dailiesview/DailyItem.tsx
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
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
|
||||
22
src/view/Components/Taskview/Dailiesview/DailySubTasks.tsx
Normal file
22
src/view/Components/Taskview/Dailiesview/DailySubTasks.tsx
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
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
|
||||
107
src/view/Components/Taskview/Dailiesview/index.tsx
Normal file
107
src/view/Components/Taskview/Dailiesview/index.tsx
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
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);
|
||||
}
|
||||
|
||||
}
|
||||
25
src/view/Components/Taskview/Habitsview/HabitItem.tsx
Normal file
25
src/view/Components/Taskview/Habitsview/HabitItem.tsx
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
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
|
||||
25
src/view/Components/Taskview/Habitsview/index.tsx
Normal file
25
src/view/Components/Taskview/Habitsview/index.tsx
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
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);
|
||||
}
|
||||
}
|
||||
|
||||
21
src/view/Components/Taskview/Rewardview/RewardItem.tsx
Normal file
21
src/view/Components/Taskview/Rewardview/RewardItem.tsx
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
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
|
||||
25
src/view/Components/Taskview/Rewardview/index.tsx
Normal file
25
src/view/Components/Taskview/Rewardview/index.tsx
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
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);
|
||||
}
|
||||
}
|
||||
|
||||
23
src/view/Components/Taskview/Todoview/TodoItem.tsx
Normal file
23
src/view/Components/Taskview/Todoview/TodoItem.tsx
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
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
|
||||
21
src/view/Components/Taskview/Todoview/TodoSubTasks.tsx
Normal file
21
src/view/Components/Taskview/Todoview/TodoSubTasks.tsx
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
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
|
||||
50
src/view/Components/Taskview/Todoview/index.tsx
Normal file
50
src/view/Components/Taskview/Todoview/index.tsx
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
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);
|
||||
}
|
||||
}
|
||||
42
src/view/Components/Taskview/index.tsx
Normal file
42
src/view/Components/Taskview/index.tsx
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
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);
|
||||
}
|
||||
|
||||
21
src/view/Components/Taskview/markdownRender.ts
Normal file
21
src/view/Components/Taskview/markdownRender.ts
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
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);
|
||||
}
|
||||
70
src/view/habiticaAPI.ts
Normal file
70
src/view/habiticaAPI.ts
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
// 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)
|
||||
}
|
||||
404
styles.css
404
styles.css
|
|
@ -1,81 +1,323 @@
|
|||
.todo-item {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 0px 0px 0;
|
||||
width: 80%;
|
||||
border-bottom: 1px solid #cecece;
|
||||
font-family: Roboto, sans-serif;
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
input[type=checkbox] {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
input[type=checkbox]:focus {
|
||||
outline: 0;
|
||||
}
|
||||
.plugin-root {
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
/* react-tabs internal file :wink: */
|
||||
|
||||
.react-tabs {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.react-tabs__tab-list {
|
||||
border-bottom: 1px solid #aaa;
|
||||
margin: 0 0 10px;
|
||||
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;
|
||||
}
|
||||
|
||||
.react-tabs__tab-panel--selected {
|
||||
display: block;
|
||||
}
|
||||
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@1,300&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Open Sans:ital,wght@0,400;1,100&family=Roboto&display=swap');
|
||||
|
||||
.add-task-input {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#profile-name {
|
||||
font-size: x-large;
|
||||
font-weight: bold;
|
||||
padding-bottom: 3%;
|
||||
}
|
||||
.stats {
|
||||
width: 95%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-weight: bold;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.stats-view {
|
||||
border-bottom: 1px;
|
||||
}
|
||||
.modify-todo {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.delete-todo {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.todo-item {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 30fr 1fr 1fr;
|
||||
justify-content: left;
|
||||
align-items: flex-start;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #cecece;
|
||||
font-family: Roboto, sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-family: Open Sans, sans-serif;
|
||||
font-weight: 100;
|
||||
}
|
||||
.description > ul {
|
||||
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] {
|
||||
margin-right: 10px;
|
||||
margin-top: 5px;
|
||||
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 {
|
||||
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,13 +3,14 @@
|
|||
"baseUrl": ".",
|
||||
"inlineSourceMap": true,
|
||||
"inlineSources": true,
|
||||
"module": "esnext",
|
||||
"module": "ESNext",
|
||||
"target": "es6",
|
||||
"jsx": "react",
|
||||
"target": "es2017",
|
||||
"allowJs": true,
|
||||
"noImplicitAny": true,
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"esModuleInterop": true,
|
||||
"lib": [
|
||||
"dom",
|
||||
"es5",
|
||||
|
|
@ -19,5 +20,5 @@
|
|||
},
|
||||
"include": [
|
||||
"**/*.ts"
|
||||
, "view/TodoItem.tsx" ]
|
||||
}
|
||||
]
|
||||
}
|
||||
35
view.tsx
35
view.tsx
|
|
@ -1,35 +0,0 @@
|
|||
import { ItemView,WorkspaceLeaf } from "obsidian";
|
||||
import * as React from "react";
|
||||
import * as ReactDOM from "react-dom";
|
||||
import ReactView from "./ReactView";
|
||||
import ExamplePlugin from "main";
|
||||
|
||||
|
||||
export const VIEW_TYPE_EXAMPLE = "example-view"
|
||||
|
||||
export class ExampleView extends ItemView {
|
||||
plugin: ExamplePlugin;
|
||||
constructor(leaf: WorkspaceLeaf, plugin: ExamplePlugin) {
|
||||
super(leaf)
|
||||
this.plugin = plugin
|
||||
}
|
||||
|
||||
getViewType() {
|
||||
return VIEW_TYPE_EXAMPLE
|
||||
}
|
||||
|
||||
getDisplayText() {
|
||||
return "Example View"
|
||||
}
|
||||
|
||||
async onOpen() {
|
||||
ReactDOM.render(
|
||||
<ReactView userID = {this.plugin.settings.userID} tokenAPI = {this.plugin.settings.apiToken} plugin={this.plugin}/>,
|
||||
this.containerEl.children[1]
|
||||
)
|
||||
}
|
||||
|
||||
async onClose(){
|
||||
ReactDOM.unmountComponentAtNode(this.containerEl.children[1]);
|
||||
}
|
||||
}
|
||||
116
view/App.tsx
116
view/App.tsx
|
|
@ -1,116 +0,0 @@
|
|||
import * as React from "react";
|
||||
import { getStats, scoreTask } from "./habiticaAPI"
|
||||
import Statsview from "./Components/Statsview"
|
||||
import Taskview from "./Components/Taskview"
|
||||
|
||||
let username = ""
|
||||
let credentials = ""
|
||||
|
||||
class App extends React.Component<any,any> {
|
||||
constructor(props: any) {
|
||||
super(props)
|
||||
username = this.props.username
|
||||
credentials = this.props.apiToken
|
||||
this.state = {
|
||||
isLoaded: false,
|
||||
user_data: {
|
||||
profile: {
|
||||
name: "",
|
||||
},
|
||||
stats: {
|
||||
hp: 0,
|
||||
lvl: 0,
|
||||
}
|
||||
},
|
||||
todos: []
|
||||
}
|
||||
this.handleChange = this.handleChange.bind(this)
|
||||
}
|
||||
sendNotice(message: string){
|
||||
this.props.plugin.displayNotice(message)
|
||||
}
|
||||
reloadData() {
|
||||
getStats(username, credentials)
|
||||
.then(res => res.json())
|
||||
.then(
|
||||
result => {
|
||||
console.log(result)
|
||||
console.log("data reloaded")
|
||||
this.setState({
|
||||
isLoaded: true,
|
||||
user_data: result,
|
||||
todos: result.tasks.todos
|
||||
})
|
||||
},
|
||||
(error) => {
|
||||
this.setState({
|
||||
isLoaded: true,
|
||||
error
|
||||
})
|
||||
}
|
||||
)
|
||||
}
|
||||
componentDidMount() {
|
||||
this.reloadData()
|
||||
}
|
||||
handleChange(event: any){
|
||||
this.state.todos.forEach((element: any) => {
|
||||
if(element.id == event.target.id){
|
||||
if(!element.completed){
|
||||
scoreTask(username, credentials, event.target.id, "up")
|
||||
.then(res => res.json())
|
||||
.then(
|
||||
result => {
|
||||
if(result.success) {
|
||||
this.sendNotice("Checked!")
|
||||
console.log(result)
|
||||
this.reloadData()
|
||||
} else {
|
||||
this.sendNotice("Resyncing, please try again")
|
||||
this.reloadData()
|
||||
}
|
||||
},
|
||||
(error) => {
|
||||
this.sendNotice("API Error: Please Check crendentials and try again")
|
||||
console.log(error)
|
||||
}
|
||||
)
|
||||
} else {
|
||||
scoreTask(username, credentials, event.target.id, "down")
|
||||
.then(res => res.json())
|
||||
.then(
|
||||
result => {
|
||||
if(result.success){
|
||||
this.sendNotice("Un-checked!")
|
||||
console.log(result)
|
||||
this.reloadData()
|
||||
} else {
|
||||
this.sendNotice("Resyncing, please try again")
|
||||
this.reloadData()
|
||||
}
|
||||
},
|
||||
(error) => {
|
||||
this.sendNotice("API Error: Please Check crendentials and try again")
|
||||
console.log(error)
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
render(){
|
||||
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">
|
||||
<Statsview user_data={this.state.user_data} />
|
||||
<Taskview todos={this.state.todos} onChange={this.handleChange} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
export default App
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import * as React from 'react';
|
||||
|
||||
export default function Index(props: any) {
|
||||
return(
|
||||
<div id="stats">
|
||||
<div id="profile-name">{props.user_data.profile.name}</div>
|
||||
<div id="hp">HP: {props.user_data.stats.hp}</div>
|
||||
<div id="lvl">LVL: {props.user_data.stats.lvl}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import * as React from "react";
|
||||
|
||||
function TodoItem(props: any) {
|
||||
return (
|
||||
<div className="todo-item" id={props.id}>
|
||||
<input type="checkbox" className="checkbox" id={props.id} onChange={props.onChange} checked={props.completed}/>
|
||||
<p>{props.todo_text}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TodoItem
|
||||
|
|
@ -1,30 +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){
|
||||
const incompleteTodos = props.todos.map((todo: any) => {
|
||||
if(!todo.completed)
|
||||
return <TodoItem key={todo.id} id={todo.id} todo_text={todo.text} onChange={props.onChange} completed={todo.completed}/>
|
||||
})
|
||||
const completedTodos = props.todos.map((todo: any) => {
|
||||
if(todo.completed)
|
||||
return <TodoItem key={todo.id} id={todo.id} todo_text={todo.text} onChange={props.onChange} completed={todo.completed}/>
|
||||
})
|
||||
const display = <div id="classDisplay">
|
||||
<Tabs>
|
||||
<TabList>
|
||||
<Tab>Active Todos</Tab>
|
||||
<Tab>Completed Todos</Tab>
|
||||
</TabList>
|
||||
<TabPanel>
|
||||
<ul>{incompleteTodos}</ul>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<ul>{completedTodos}</ul>
|
||||
</TabPanel>
|
||||
</Tabs>
|
||||
</div>
|
||||
|
||||
return(display);
|
||||
}
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
.react-tabs {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.react-tabs__tab-list {
|
||||
border-bottom: 1px solid #aaa;
|
||||
margin: 0 0 10px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.react-tabs__tab {
|
||||
display: inline-block;
|
||||
border: 1px solid transparent;
|
||||
border-bottom: none;
|
||||
bottom: -1px;
|
||||
position: relative;
|
||||
list-style: none;
|
||||
padding: 6px 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.react-tabs__tab--selected {
|
||||
background: #fff;
|
||||
border-color: #aaa;
|
||||
color: black;
|
||||
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;
|
||||
}
|
||||
|
||||
.react-tabs__tab-panel--selected {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
import * as React from "react"
|
||||
|
|
@ -1,29 +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 = fetch(url, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"x-client": username.concat("-testAPI"),
|
||||
"x-api-user": username,
|
||||
"x-api-key": credentials,
|
||||
},
|
||||
})
|
||||
return (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": username.concat("-testAPI"),
|
||||
"x-api-user": username,
|
||||
"x-api-key": credentials,
|
||||
}
|
||||
})
|
||||
return(response)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue