calendar-notes-plugin 1.0.0

package/calendar-notes-plugin/src/app/components/panel/panel.css

@@ -0,0 +1,28 @@
+.panel {
+  width: 380px;
+  max-height: 520px;
+  background: #ffffff;
+  border-radius: 18px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  overflow: hidden;
+  font-family: 'Segoe UI', sans-serif;
+  position: fixed;          /* VERY IMPORTANT */
+  bottom: 90px;             /* slightly above button */
+  right: 20px;   
+  overflow-x: hidden;
+  height: 520px;
+}
+
+app-calendar {
+  flex-shrink: 0;   /* calendar keeps its natural height */
+}
+
+app-notes {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}

package/calendar-notes-plugin/src/app/components/panel/panel.html

@@ -0,0 +1,16 @@
+<div class="panel">
+
+  <app-calendar
+    [notes]="notes"
+    (dateSelected)="onDateSelected($event)"
+    (monthChanged)="onMonthChanged()">
+  </app-calendar>
+
+
+
+  <app-notes 
+    [selectedDate]="selectedDate"
+    (notesChanged)="onNotesChanged($event)">
+  </app-notes>
+
+</div>

package/calendar-notes-plugin/src/app/components/panel/panel.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Panel } from './panel';
+
+describe('Panel', () => {
+  let component: Panel;
+  let fixture: ComponentFixture<Panel>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Panel]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(Panel);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/calendar-notes-plugin/src/app/components/panel/panel.ts

@@ -0,0 +1,46 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { Calendar } from '../calender/calendar';
+import { Notes } from '../notes/notes';
+import { ReminderService } from '../../services/notification';
+
+@Component({
+  selector: 'app-panel',
+  standalone: true,
+  imports: [CommonModule, Calendar, Notes],
+  templateUrl: './panel.html',
+  styleUrl: './panel.css',
+})
+export class Panel implements OnInit {
+
+  constructor(private reminderService: ReminderService) {}
+
+  selectedDate: string | null = null;
+  notes: { [key: string]: any[] } = {};
+  showAddForm = false;
+
+  ngOnInit(): void {
+    this.reminderService.requestPermission();
+    const today = new Date();
+    this.selectedDate = today.toISOString().split('T')[0];
+
+  }
+
+  onDateSelected(date: string) {
+    this.selectedDate = date;
+  }
+
+  onMonthChanged() {
+    // when month changes we clear date
+    this.selectedDate = null;
+  }
+
+  onNotesChanged(updatedNotes: { [key: string]: any[] }) {
+  this.notes = { ...updatedNotes };
+
+  }
+  toggleAddForm() {
+    this.showAddForm = !this.showAddForm;
+  }
+
+}

package/calendar-notes-plugin/src/app/components/widget/widget.css

@@ -0,0 +1,18 @@
+.panel {
+  position: fixed;
+  bottom: 90px;
+  right: 20px;
+  width: 350px;
+  height: 500px;
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+  overflow: hidden;
+
+  transform: translateX(120%);
+  transition: transform 0.3s ease;
+}
+
+.panel.open {
+  transform: translateX(0);
+}

package/calendar-notes-plugin/src/app/components/widget/widget.html

@@ -0,0 +1,17 @@
+<div 
+  class="panel" 
+  [class.open]="isOpen">
+
+  <app-calendar
+    (dateSelected)="onDateSelected($event)">
+  </app-calendar>
+
+  <app-notes
+    [selectedDate]="selectedDate">
+  </app-notes>
+
+</div>
+
+<button class="floating-btn" (click)="toggle()">
+  📅
+</button>

package/calendar-notes-plugin/src/app/components/widget/widget.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Widget } from './widget';
+
+describe('Widget', () => {
+  let component: Widget;
+  let fixture: ComponentFixture<Widget>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Widget]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(Widget);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/calendar-notes-plugin/src/app/components/widget/widget.ts

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { Calendar } from '../calender/calendar';
+import { Notes } from '../notes/notes';
+
+@Component({
+  selector: 'app-widget',
+  imports: [Calendar,Notes],
+  templateUrl: './widget.html',
+  styleUrl: './widget.css',
+})
+export class Widget {
+      
+  isOpen = false;
+  selectedDate = '';
+
+  toggle() {
+    this.isOpen = !this.isOpen;
+  }
+
+  onDateSelected(date: string) {
+    this.selectedDate = date;
+  }
+}

package/calendar-notes-plugin/src/app/services/api.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { Api } from './api';
+
+describe('Api', () => {
+  let service: Api;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(Api);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/calendar-notes-plugin/src/app/services/api.ts

@@ -0,0 +1,39 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+@Injectable({ providedIn: 'root' })
+export class ApiService {
+
+  private config: any = {};
+
+  constructor(private http: HttpClient) {
+    if (typeof window !== 'undefined') {
+      this.config = (window as any).CalendarNotesPlugin || {};
+    }
+  }
+
+  getNotes(date: string) {
+    return this.http.get(
+      `${this.config.apiBaseUrl}/notes?date=${date}`
+    );
+  }
+
+  saveNote(date: string, content: string) {
+    return this.http.post(
+      `${this.config.apiBaseUrl}/notes`,
+      { date, content }
+    );
+  }
+
+  getDatesWithNotes() {
+  if (!this.config.apiBaseUrl) {
+    console.error('API Base URL not configured');
+    return [];
+  }
+
+  return this.http.get(
+    `${this.config.apiBaseUrl}/notes/dates`
+  );
+}
+
+}

package/calendar-notes-plugin/src/app/services/notification.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { Notification } from './notification';
+
+describe('Notification', () => {
+  let service: Notification;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(Notification);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/calendar-notes-plugin/src/app/services/notification.ts

@@ -0,0 +1,116 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ReminderService {
+
+  reminders: any[] = [];
+  timeTick$ = new Subject<void>();
+
+  constructor() {
+
+    // check reminders every 30 seconds
+    setInterval(() => {
+
+  this.checkReminders();
+
+  // notify components to refresh UI
+  this.timeTick$.next();
+
+}, 1000); // every second
+  }
+
+  // =========================
+  // PERMISSION
+  // =========================
+
+  requestPermission() {
+
+    if ('Notification' in window && Notification.permission !== 'granted') {
+      Notification.requestPermission();
+    }
+
+  }
+
+  // =========================
+  // ADD REMINDER
+  // =========================
+
+  addReminder(note: any) {
+
+  if (!note.reminder_at) return;
+
+  const exists = this.reminders.find(r => r.id === note.id);
+  if (exists) return;
+
+  const reminderTime = new Date(note.reminder_at).getTime();
+  const now = new Date().getTime();
+
+  this.reminders.push({
+    ...note,
+    triggered: reminderTime <= now
+  });
+
+}
+
+  // =========================
+  // REMOVE REMINDER
+  // =========================
+
+  removeReminder(noteId: string) {
+
+    this.reminders =
+      this.reminders.filter(r => r.id !== noteId);
+
+  }
+
+  // =========================
+  // CHECK REMINDERS
+  // =========================
+
+  checkReminders() {
+
+    const now = new Date().getTime();
+
+    for (const reminder of this.reminders) {
+
+      if (!reminder.reminder_at) continue;
+
+      const reminderTime =
+        new Date(reminder.reminder_at).getTime();
+
+      if (reminderTime <= now && !reminder.triggered) {
+
+        this.showNotification(
+          reminder.title,
+          reminder.content
+        );
+
+        reminder.triggered = true;
+
+      }
+
+    }
+
+  }
+
+  // =========================
+  // SHOW NOTIFICATION
+  // =========================
+
+  showNotification(title: string, body: string) {
+
+    if (Notification.permission === 'granted') {
+
+      new Notification(title, {
+        body: body,
+        icon: 'assets/icon.png'
+      });
+
+    }
+
+  }
+
+}

package/calendar-notes-plugin/src/backend/database/policies/delete.sql

@@ -0,0 +1,6 @@
+alter policy "Users can delete their own notes"
+on "public"."notes"
+to public
+using (
+     (auth.uid() = user_id)
+);

package/calendar-notes-plugin/src/backend/database/policies/insert.sql

@@ -0,0 +1,6 @@
+alter policy "Users can insert their own notes"
+on "public"."notes"
+to public
+with check (
+     (auth.uid() = user_id)
+);

package/calendar-notes-plugin/src/backend/database/policies/select.sql

@@ -0,0 +1,6 @@
+alter policy "Users can view their own notes"
+on "public"."notes"
+to public
+using (
+     (auth.uid() = user_id)
+);

package/calendar-notes-plugin/src/backend/database/policies/update.sql

@@ -0,0 +1,6 @@
+alter policy "Users can update their own notes"
+on "public"."notes"
+to public
+using (
+     (auth.uid() = user_id)
+);

package/calendar-notes-plugin/src/backend/database/table.sql

@@ -0,0 +1,13 @@
+create table public.notes(
+    id uuid primary key default uuid_generate_v4(),
+    user_id uuid ,
+    note_date date not null,
+    title text,
+    content text,
+    created_at timestamp with time zone default now(),
+    updated_at timestamp with time zone default now(),
+    reminder_at timestamp with time zone default now(),
+    notified boolean
+
+
+);

package/calendar-notes-plugin/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>NotesPlugin</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+</head>
+<body>
+</body>
+</html>

package/calendar-notes-plugin/src/main.ts

@@ -0,0 +1,34 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { App } from './app/app';
+import { appConfig } from './app/app.config';
+
+// Wrap everything in IIFE so it doesn’t pollute global scope
+(function () {
+
+  // Prevent duplicate injection
+  if (document.getElementById('notes-calendar-widget')) {
+    return;
+  }
+
+  // Create main container
+  const container = document.createElement('div');
+  container.id = 'notes-calendar-widget';
+
+  // Optional: style container (floating panel style)
+  container.style.position = 'fixed';
+  container.style.bottom = '20px';
+  container.style.right = '20px';
+  container.style.zIndex = '999999';
+  container.style.overflow = 'hidden';
+
+  document.body.appendChild(container);
+
+  // Create Angular root element inside container
+  const appRoot = document.createElement('app-root');
+  container.appendChild(appRoot);
+
+  // Bootstrap Angular
+   bootstrapApplication(App, appConfig)
+    .catch(err => console.error(err));
+
+})();

package/calendar-notes-plugin/src/styles.css

@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */

package/calendar-notes-plugin/tsconfig.app.json

@@ -0,0 +1,17 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": [
+      "node"
+    ]
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "src/**/*.spec.ts"
+  ]
+}

package/calendar-notes-plugin/tsconfig.json

@@ -0,0 +1,33 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "preserve"
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  },
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

package/calendar-notes-plugin/tsconfig.spec.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "vitest/globals"
+    ]
+  },
+  "include": [
+    "src/**/*.d.ts",
+    "src/**/*.spec.ts"
+  ]
+}

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "calendar-notes-plugin",
+  "version": "1.0.0",
+  "description": "Embeddable calendar notes plugin",
+  "keywords": [
+    "calendar",
+    "notes",
+    "widget",
+    "calendar-widget",
+    "notes-widget",
+    "angular-plugin",
+    "embeddable-widget"
+  ],
+  "homepage": "https://github.com/Raj-mastud/calendar-notes-plugin#readme",
+  "bugs": {
+    "url": "https://github.com/Raj-mastud/calendar-notes-plugin/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Raj-mastud/calendar-notes-plugin.git"
+  },
+  "license": "MIT",
+  "author": "Raj Mastud",
+  "type": "commonjs",
+  "main": "public/widget.js",
+  "scripts": {
+    "test": "echo \"No tests specified\""
+  }
+}