calendar-notes-plugin 1.0.0

package/calendar-notes-plugin/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "notes-plugin",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test",
+    "serve:ssr:notes_plugin": "node dist/notes_plugin/server/server.mjs"
+  },
+  "prettier": {
+    "printWidth": 100,
+    "singleQuote": true,
+    "overrides": [
+      {
+        "files": "*.html",
+        "options": {
+          "parser": "angular"
+        }
+      }
+    ]
+  },
+  "private": true,
+  "packageManager": "npm@11.6.2",
+  "dependencies": {
+    "@angular/common": "^21.1.0",
+    "@angular/compiler": "^21.1.0",
+    "@angular/core": "^21.1.0",
+    "@angular/forms": "^21.1.0",
+    "@angular/platform-browser": "^21.1.0",
+    "@angular/platform-server": "^21.1.0",
+    "@angular/router": "^21.1.0",
+    "@angular/ssr": "^21.1.0",
+    "@supabase/supabase-js": "^2.95.3",
+    "express": "^5.1.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "uuid": "^13.0.0"
+  },
+  "devDependencies": {
+    "@angular/build": "^21.1.0",
+    "@angular/cli": "^21.1.0",
+    "@angular/compiler-cli": "^21.1.0",
+    "@angular/elements": "^21.1.4",
+    "@types/express": "^5.0.1",
+    "@types/node": "^20.17.19",
+    "jsdom": "^27.1.0",
+    "typescript": "~5.9.2",
+    "vitest": "^4.0.8"
+  }
+}

package/calendar-notes-plugin/public/widget.js

@@ -0,0 +1,75 @@
+(function () {
+
+  if (document.getElementById("calendar-notes-widget")) return;
+
+  const config = window.CalendarNotesConfig || {};
+
+  const iframe = document.createElement("iframe");
+
+  iframe.id = "calendar-notes-widget";
+  iframe.src = "http://localhost:4200/";
+
+  iframe.style.position = "fixed";
+  iframe.style.bottom = "20px";
+  iframe.style.right = "20px";
+  iframe.style.width = "450px";
+  iframe.style.height = "650px";
+  iframe.style.border = "none";
+  iframe.style.zIndex = "999999";
+  iframe.style.background = "transparent";
+
+  document.body.appendChild(iframe);
+
+  window.addEventListener("message", async function (event) {
+
+    const data = event.data;
+
+    if (!data) return;
+
+    // LOAD NOTES
+    if (data.type === "LOAD_NOTES") {
+
+      const notes = await config.loadNotes?.();
+
+      iframe.contentWindow.postMessage({
+        type: "NOTES_LOADED",
+        notes
+      }, "*");
+    }
+
+    // SAVE NOTE
+    if (data.type === "SAVE_NOTE") {
+
+      const saved = await config.saveNote?.(data.payload);
+
+      iframe.contentWindow.postMessage({
+        type: "NOTE_SAVED",
+        note: saved
+      }, "*");
+    }
+
+    // UPDATE NOTE
+    if (data.type === "UPDATE_NOTE") {
+
+      const updated = await config.updateNote?.(data.payload);
+
+      iframe.contentWindow.postMessage({
+        type: "NOTE_UPDATED",
+        note: updated
+      }, "*");
+    }
+
+    // DELETE NOTE
+    if (data.type === "DELETE_NOTE") {
+
+      await config.deleteNote?.(data.id);
+
+      iframe.contentWindow.postMessage({
+        type: "NOTE_DELETED",
+        id: data.id
+      }, "*");
+    }
+
+  });
+
+})();

package/calendar-notes-plugin/src/app/app.config.ts

@@ -0,0 +1,12 @@
+import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideRouter(routes), provideClientHydration(withEventReplay())
+  ]
+};

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

@@ -0,0 +1 @@
+<app-floating-button></app-floating-button>

package/calendar-notes-plugin/src/app/app.routes.server.ts

@@ -0,0 +1,8 @@
+import { RenderMode, ServerRoute } from '@angular/ssr';
+
+export const serverRoutes: ServerRoute[] = [
+  {
+    path: '**',
+    renderMode: RenderMode.Prerender
+  }
+];

package/calendar-notes-plugin/src/app/app.routes.ts

@@ -0,0 +1,3 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [];

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

@@ -0,0 +1,23 @@
+import { TestBed } from '@angular/core/testing';
+import { App } from './app';
+
+describe('App', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [App],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(App);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it('should render title', async () => {
+    const fixture = TestBed.createComponent(App);
+    await fixture.whenStable();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, notes_plugin');
+  });
+});

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

@@ -0,0 +1,17 @@
+import { CommonModule } from '@angular/common';
+import { Component, signal, ViewEncapsulation } from '@angular/core';
+import { FloatingButton } from './components/floating-button/floating-button';
+
+@Component({
+  selector: 'app-root',
+  standalone:true,
+  imports: [CommonModule,FloatingButton],
+  encapsulation: ViewEncapsulation.ShadowDom,
+  templateUrl: './app.html',
+  styleUrl: './app.css',
+   
+})
+export class App {
+  protected readonly title = signal('notes_plugin');
+
+}

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

@@ -0,0 +1,73 @@
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: 600;
+  font-size: 16px;
+  margin-bottom: 5px;
+}
+
+.header button {
+  background: #f1f3f6;
+  border: none;
+  padding: 6px 10px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: 0.2s ease;
+}
+
+.header button:hover {
+  background: #dfe6f3;
+}
+
+.calendar {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 4px;
+  margin-bottom: 0;
+}
+
+.day-name {
+  text-align: center;
+  font-size: 12px;
+  font-weight: 600;
+  color: #888;
+}
+
+.day {
+  text-align: center;
+  padding: 10px 0;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: 0.2s ease;
+  font-size: 14px;
+  padding: 6px 0;
+  position: relative;
+}
+
+.day:hover {
+  background: #f0f4ff;
+}
+
+.day.selected {
+  background: #4f46e5;
+  color: white;
+  font-weight: bold;
+}
+
+.day.today {
+  border: 2px solid #4f46e5;
+}
+
+.day.empty {
+  cursor: default;
+  background: transparent;
+}
+.note-dot {
+  position: absolute;
+  bottom: 4px;
+  width: 6px;
+  height: 6px;
+  background-color: #ff5722;
+  border-radius: 50%;
+}

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

@@ -0,0 +1,26 @@
+<div class="header">
+  <button (click)="prevMonth()">◀</button>
+  <span>{{ currentDate | date: 'MMMM yyyy' }}</span>
+  <button (click)="nextMonth()">▶</button>
+</div>
+
+<div class="calendar">
+
+  <div class="day-name" *ngFor="let d of ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']">
+    {{ d }}
+  </div>
+
+  <div
+    class="day"
+    *ngFor="let day of calendarDays"
+    [class.empty]="!day"
+    [class.selected]="isSelected(day)"
+    [class.today]="isToday(day)"
+    (click)="day && selectDate(day)"
+  >
+    {{ day || '' }}
+     <span *ngIf="hasNotes(day)" class="note-dot"></span>
+  </div>
+
+</div>
+

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

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

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

@@ -0,0 +1,155 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+
+@Component({
+  selector: 'app-calendar',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './calendar.html',
+  styleUrl: './calendar.css',
+})
+export class Calendar implements OnInit, OnChanges {
+
+  @Output() dateSelected = new EventEmitter<string>();
+  @Output() monthChanged = new EventEmitter<void>();
+
+  @Input() notes: { [key: string]: any[] } = {};
+
+  currentDate: Date = new Date();
+  calendarDays: (number | null)[] = [];
+
+  selectedDay: number | null = null;
+
+  today = new Date();
+
+  // INIT
+
+  ngOnInit() {
+    this.generateCalendar();
+  }
+
+  // INPUT CHANGES
+
+  ngOnChanges(changes: SimpleChanges) {
+
+    if (changes['notes']) {
+      // notes updated → refresh markers
+      this.generateCalendar();
+    }
+
+  }
+  // CALENDAR GENERATION
+
+
+  generateCalendar() {
+
+    const year = this.currentDate.getFullYear();
+    const month = this.currentDate.getMonth();
+
+    const firstDay = new Date(year, month, 1).getDay();
+    const totalDays = new Date(year, month + 1, 0).getDate();
+
+    this.calendarDays = [];
+
+    // empty cells before first day
+    for (let i = 0; i < firstDay; i++) {
+      this.calendarDays.push(null);
+    }
+
+    // actual days
+    for (let day = 1; day <= totalDays; day++) {
+      this.calendarDays.push(day);
+    }
+
+  }
+
+  // ----------------SELECT DATE----------------------
+
+  selectDate(day: number | null) {
+
+    if (!day) return;
+
+    this.selectedDay = day;
+
+    const dateString = this.formatDate(day);
+
+    this.dateSelected.emit(dateString);
+
+  }
+
+  // ---------------DATE FORMAT------------------
+
+
+  formatDate(day: number): string {
+
+    const year = this.currentDate.getFullYear();
+    const month = String(this.currentDate.getMonth() + 1).padStart(2, '0');
+    const dayStr = String(day).padStart(2, '0');
+
+    return `${year}-${month}-${dayStr}`;
+
+  }
+
+  // ------------------MONTH NAVIGATION-------------------
+
+  nextMonth() {
+
+    this.currentDate = new Date(
+      this.currentDate.getFullYear(),
+      this.currentDate.getMonth() + 1,
+      1
+    );
+
+    this.selectedDay = null;
+
+    this.generateCalendar();
+
+    this.monthChanged.emit();
+
+  }
+
+  prevMonth() {
+
+    this.currentDate = new Date(
+      this.currentDate.getFullYear(),
+      this.currentDate.getMonth() - 1,
+      1
+    );
+
+    this.selectedDay = null;
+
+    this.generateCalendar();
+
+    this.monthChanged.emit();
+
+  }
+
+  // -----------------UI HELPERS-------------------------
+
+  isSelected(day: number | null): boolean {
+    return day === this.selectedDay;
+  }
+
+  isToday(day: number | null): boolean {
+
+    if (!day) return false;
+
+    return (
+      day === this.today.getDate() &&
+      this.currentDate.getMonth() === this.today.getMonth() &&
+      this.currentDate.getFullYear() === this.today.getFullYear()
+    );
+
+  }
+
+  //------------------------ NOTES INDICATOR--------------------------
+
+ hasNotes(day: number | null): boolean {
+
+  if (!day) return false;
+  const date = this.formatDate(day);
+  return !!this.notes?.[date]?.length;
+
+}
+
+}

package/calendar-notes-plugin/src/app/components/floating-button/floating-button.css

@@ -0,0 +1,17 @@
+.floating-btn {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  width: 60px;
+  height: 60px;
+  background:transparent;
+  border-radius: 10%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
+  z-index: 999999;
+  font-size: 40px;
+  color: white;
+}

package/calendar-notes-plugin/src/app/components/floating-button/floating-button.html

@@ -0,0 +1,3 @@
+<div class="floating-btn" (click)="toggle()">📅</div>
+<app-panel *ngIf="isOpen"></app-panel>
+

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

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

package/calendar-notes-plugin/src/app/components/floating-button/floating-button.ts

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { Panel } from '../panel/panel';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Notes } from '../notes/notes';
+
+@Component({
+  selector: 'app-floating-button',
+  imports: [CommonModule,FormsModule,Panel],
+  templateUrl: './floating-button.html',
+  styleUrl: './floating-button.css',
+})
+export class FloatingButton {
+
+  selectedDate: string = '';
+  isOpen = false;
+
+  toggle() {
+    this.isOpen = !this.isOpen;
+  }
+
+  onDateSelected(date: string) {
+  this.selectedDate = date;
+}
+}