akfatimeline 1.0.6 → 1.2.0

package/dist/components/Timeline/FilterPanel.js

@@ -0,0 +1,179 @@
+// src/components/Timeline/FilterPanel.js (Demo Component)
+
+import React, { useState } from 'react';
+import './Timeline.css';
+
+const FilterPanel = ({ 
+  events, 
+  resources, 
+  onFilterChange,
+  onClearFilters 
+}) => {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [selectedResources, setSelectedResources] = useState([]);
+  const [selectedStatuses, setSelectedStatuses] = useState([]);
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState('');
+
+  // Tüm unique status'leri bul
+  const allStatuses = [...new Set(events.map(e => e.status).filter(Boolean))];
+
+  const handleSearchChange = (value) => {
+    setSearchTerm(value);
+    applyFilters({
+      searchTerm: value,
+      resourceIds: selectedResources,
+      statuses: selectedStatuses,
+      startDate: startDate ? new Date(startDate) : null,
+      endDate: endDate ? new Date(endDate) : null,
+    });
+  };
+
+  const handleResourceToggle = (resourceId) => {
+    const newResources = selectedResources.includes(resourceId)
+      ? selectedResources.filter(id => id !== resourceId)
+      : [...selectedResources, resourceId];
+    setSelectedResources(newResources);
+    applyFilters({
+      searchTerm,
+      resourceIds: newResources,
+      statuses: selectedStatuses,
+      startDate: startDate ? new Date(startDate) : null,
+      endDate: endDate ? new Date(endDate) : null,
+    });
+  };
+
+  const handleStatusToggle = (status) => {
+    const newStatuses = selectedStatuses.includes(status)
+      ? selectedStatuses.filter(s => s !== status)
+      : [...selectedStatuses, status];
+    setSelectedStatuses(newStatuses);
+    applyFilters({
+      searchTerm,
+      resourceIds: selectedResources,
+      statuses: newStatuses,
+      startDate: startDate ? new Date(startDate) : null,
+      endDate: endDate ? new Date(endDate) : null,
+    });
+  };
+
+  const handleDateChange = (type, value) => {
+    if (type === 'start') {
+      setStartDate(value);
+      applyFilters({
+        searchTerm,
+        resourceIds: selectedResources,
+        statuses: selectedStatuses,
+        startDate: value ? new Date(value) : null,
+        endDate: endDate ? new Date(endDate) : null,
+      });
+    } else {
+      setEndDate(value);
+      applyFilters({
+        searchTerm,
+        resourceIds: selectedResources,
+        statuses: selectedStatuses,
+        startDate: startDate ? new Date(startDate) : null,
+        endDate: value ? new Date(value) : null,
+      });
+    }
+  };
+
+  const applyFilters = (filters) => {
+    if (onFilterChange) {
+      onFilterChange(filters);
+    }
+  };
+
+  const handleClear = () => {
+    setSearchTerm('');
+    setSelectedResources([]);
+    setSelectedStatuses([]);
+    setStartDate('');
+    setEndDate('');
+    if (onClearFilters) {
+      onClearFilters();
+    }
+  };
+
+  // Tüm resource'ları düzleştir
+  const allResources = resources.flatMap(group => group.resources || []);
+
+  return (
+    <div className="filter-panel">
+      <div className="filter-panel-header">
+        <h3>Filtreler</h3>
+        <button onClick={handleClear} className="filter-clear-btn">
+          Temizle
+        </button>
+      </div>
+
+      <div className="filter-section">
+        <label>Arama</label>
+        <input
+          type="text"
+          placeholder="Event başlığına göre ara..."
+          value={searchTerm}
+          onChange={(e) => handleSearchChange(e.target.value)}
+          className="filter-search-input"
+        />
+      </div>
+
+      <div className="filter-section">
+        <label>Tarih Aralığı</label>
+        <div className="filter-date-range">
+          <input
+            type="date"
+            value={startDate}
+            onChange={(e) => handleDateChange('start', e.target.value)}
+            placeholder="Başlangıç"
+            className="filter-date-input"
+          />
+          <span> - </span>
+          <input
+            type="date"
+            value={endDate}
+            onChange={(e) => handleDateChange('end', e.target.value)}
+            placeholder="Bitiş"
+            className="filter-date-input"
+          />
+        </div>
+      </div>
+
+      <div className="filter-section">
+        <label>Resource'lar</label>
+        <div className="filter-checkbox-group">
+          {allResources.map(resource => (
+            <label key={resource.id} className="filter-checkbox">
+              <input
+                type="checkbox"
+                checked={selectedResources.includes(resource.id)}
+                onChange={() => handleResourceToggle(resource.id)}
+              />
+              <span>{resource.name || resource.id}</span>
+            </label>
+          ))}
+        </div>
+      </div>
+
+      <div className="filter-section">
+        <label>Status</label>
+        <div className="filter-checkbox-group">
+          {allStatuses.map(status => (
+            <label key={status} className="filter-checkbox">
+              <input
+                type="checkbox"
+                checked={selectedStatuses.includes(status)}
+                onChange={() => handleStatusToggle(status)}
+              />
+              <span>{status}</span>
+            </label>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FilterPanel;
+

package/dist/{dist/components → components}/Timeline/Indicator.js

@@ -1,26 +1,26 @@
-import React from "react";
-
-const Indicator = ({ todayIndex, totalDays }) => {
-  if (todayIndex < 0 || todayIndex >= totalDays) {
-    return null; // Bugün timeline dışında ise çizgiyi gösterme
-  }
-
-  return (
-    <div
-      style={{
-        position: "absolute",
-        top: 0,
-        left: `calc(${(todayIndex + 0.5) / totalDays} * 100%)`, // Günün ortasına yerleştirmek için +0.5
-        width: "2px",
-        height: "100%",
-        backgroundColor: "transparent",
-        zIndex: 5,
-        borderStyle: "dashed", // Kesikli çizgi için
-        borderWidth: "0 0 0 2px", // Sadece sol tarafa kesikli çizgi
-        borderColor: "red",
-      }}
-    ></div>
-  );
-};
-
-export default Indicator;
+import React from "react";
+
+const Indicator = ({ todayIndex, totalDays }) => {
+  if (todayIndex < 0 || todayIndex >= totalDays) {
+    return null; // Bugün timeline dışında ise çizgiyi gösterme
+  }
+
+  return (
+    <div
+      style={{
+        position: "absolute",
+        top: 0,
+        left: `calc(${(todayIndex + 0.5) / totalDays} * 100%)`, // Günün ortasına yerleştirmek için +0.5
+        width: "2px",
+        height: "100%",
+        backgroundColor: "transparent",
+        zIndex: 5,
+        borderStyle: "dashed", // Kesikli çizgi için
+        borderWidth: "0 0 0 2px", // Sadece sol tarafa kesikli çizgi
+        borderColor: "red",
+      }}
+    ></div>
+  );
+};
+
+export default Indicator;

package/dist/components/Timeline/LoadingSpinner.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import './Timeline.css';
+
+/**
+ * Loading Spinner Component
+ * Yükleme durumlarında gösterilir
+ */
+const LoadingSpinner = ({ 
+  size = 'medium', // 'small', 'medium', 'large'
+  type = 'spinner', // 'spinner', 'dots', 'pulse'
+  className = '',
+  overlay = false // Overlay gösterilsin mi?
+}) => {
+  if (overlay) {
+    return (
+      <div className="loading-overlay">
+        <div className={`loading-spinner loading-spinner-${type} loading-spinner-${size} ${className}`}>
+          {type === 'spinner' && <div className="spinner-circle"></div>}
+          {type === 'dots' && (
+            <div className="dots-container">
+              <span></span>
+              <span></span>
+              <span></span>
+            </div>
+          )}
+          {type === 'pulse' && <div className="pulse-circle"></div>}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`loading-spinner loading-spinner-${type} loading-spinner-${size} ${className}`}>
+      {type === 'spinner' && <div className="spinner-circle"></div>}
+      {type === 'dots' && (
+        <div className="dots-container">
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+      )}
+      {type === 'pulse' && <div className="pulse-circle"></div>}
+    </div>
+  );
+};
+
+export default LoadingSpinner;
+

package/dist/{dist/components → components}/Timeline/MasterHeader.js

@@ -1,68 +1,104 @@
-import React from "react";
-import "./Timeline.css"; // veya MasterHeader.css, eğer ayrı dosyaya koyacaksan
-import "flatpickr/dist/themes/material_green.css"; // Flatpickr Tema
-
-const MasterHeader = ({
-  selectedDate,
-  onDateSelect,
-  onToday,
-  onAdvance,
-  onRetreat,
-  onMonthAdvance,
-  onMonthRetreat,
-  dayRange,
-  setDayRange,
-}) => {
-  const formattedDate = new Date(
-    selectedDate.getTime() + 24 * 60 * 60 * 1000 - selectedDate.getTimezoneOffset() * 60000
-  )
-    .toISOString()
-    .split("T")[0]; // YYYY-MM-DD formatı
-
-  return (
-    <div className="master-header-container">
-      <div className="master-header-buttons">
-        <button className="master-header-btn" onClick={onMonthRetreat}>
-          1 Ay Geri
-        </button>
-
-        <button className="master-header-btn" onClick={onRetreat}>
-          5 Gün Geri
-        </button>
-
-        <input
-  type="date"
-  className="master-header-date-picker"
-  value={formattedDate} // Seçili tarih burada gösteriliyor
-  onChange={(e) => onDateSelect(e.target.value)} // Tarih seçimi
-  onKeyDown={(e) => e.preventDefault()} // Manuel girişleri engelle
-/>
-
-
-        <button className="master-header-btn" onClick={onAdvance}>
-          5 Gün İleri
-        </button>
-
-        <button className="master-header-btn" onClick={onMonthAdvance}>
-          1 Ay İleri
-        </button>
-
-        <button className="master-header-btn" onClick={onToday}>
-          Bugün
-        </button>
-      </div>
-
-      <select
-        className="master-header-select"
-        value={dayRange}
-        onChange={(e) => setDayRange(parseInt(e.target.value, 10))}
-      >
-        <option value={30}>30 Gün</option>
-        <option value={60}>60 Gün</option>
-        <option value={90}>90 Gün</option>
-      </select>
-    </div>
-  );
-};
-
-export default MasterHeader;
+import React from "react";
+import "./Timeline.css";
+
+const MasterHeader = ({
+  selectedDate,
+  onDateSelect,
+  onToday,
+  onAdvance,
+  onRetreat,
+  onMonthAdvance,
+  onMonthRetreat,
+  dayRange,
+  setDayRange,
+  zoomLevel = 1.0,
+  setZoomLevel,
+  zoomOn = true,
+  minZoomLevel = 0.5,
+  maxZoomLevel = 3.0,
+  zoomStep = 0.25,
+}) => {
+  const formattedDate = new Date(
+    selectedDate.getTime() + 24 * 60 * 60 * 1000 - selectedDate.getTimezoneOffset() * 60000
+  )
+    .toISOString()
+    .split("T")[0]; // YYYY-MM-DD formatı
+
+  return (
+    <div className="master-header-container">
+      <div className="master-header-buttons">
+        <button className="master-header-btn" onClick={onMonthRetreat}>
+          1 Ay Geri
+        </button>
+
+        <button className="master-header-btn" onClick={onRetreat}>
+          5 Gün Geri
+        </button>
+
+        <input
+  type="date"
+  className="master-header-date-picker"
+  value={formattedDate} // Seçili tarih burada gösteriliyor
+  onChange={(e) => onDateSelect(e.target.value)} // Tarih seçimi
+  onKeyDown={(e) => e.preventDefault()} // Manuel girişleri engelle
+/>
+
+
+        <button className="master-header-btn" onClick={onAdvance}>
+          5 Gün İleri
+        </button>
+
+        <button className="master-header-btn" onClick={onMonthAdvance}>
+          1 Ay İleri
+        </button>
+
+        <button className="master-header-btn" onClick={onToday}>
+          Bugün
+        </button>
+      </div>
+
+      <select
+        className="master-header-select"
+        value={dayRange}
+        onChange={(e) => setDayRange(parseInt(e.target.value, 10))}
+      >
+        <option value={30}>30 Gün</option>
+        <option value={60}>60 Gün</option>
+        <option value={90}>90 Gün</option>
+      </select>
+
+      {/* Zoom Kontrolleri */}
+      {zoomOn && setZoomLevel && (
+        <div className="master-header-zoom-controls">
+          <button
+            className="master-header-btn"
+            onClick={() => {
+              const newZoom = Math.max(minZoomLevel, zoomLevel - zoomStep);
+              setZoomLevel(newZoom);
+            }}
+            disabled={zoomLevel <= minZoomLevel}
+            title={`Zoom Out (${Math.round((zoomLevel - zoomStep) * 100)}%)`}
+          >
+            −
+          </button>
+          <span className="master-header-zoom-level">
+            {Math.round(zoomLevel * 100)}%
+          </span>
+          <button
+            className="master-header-btn"
+            onClick={() => {
+              const newZoom = Math.min(maxZoomLevel, zoomLevel + zoomStep);
+              setZoomLevel(newZoom);
+            }}
+            disabled={zoomLevel >= maxZoomLevel}
+            title={`Zoom In (${Math.round((zoomLevel + zoomStep) * 100)}%)`}
+          >
+            +
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MasterHeader;

package/{public/dist/dist → dist}/components/Timeline/Resources.js

@@ -1,53 +1,53 @@
-import React from "react";
-
-const Resources = ({
-  groupedResources = [], // Kaynakların listesi
-  collapsedGroups = {}, // Grupların açık/kapalı durumunu tutan nesne
-  toggleGroupCollapse, // Grupları açma/kapama fonksiyonu
-  resourceSettings = {
-    showIdAsName: false, // Varsayılan: `name` varsa onu göster, yoksa `id`
-    isGrouped: true, // Varsayılan: Gruplama açık
-    isCollapsible: true, // Varsayılan: Gruplar açılıp kapanabilir
-  },
-}) => {
-  const { showIdAsName, isGrouped, isCollapsible } = resourceSettings;
-
-  return (
-    <div className="timeline-resources">
-      {isGrouped ? (
-        // Gruplama aktif
-        groupedResources.map((group, groupIndex) => (
-          <div key={groupIndex} className="resource-group">
-            {/* Grup Başlığı */}
-            <div
-              className="resource-group-header"
-              onClick={() => isCollapsible && toggleGroupCollapse(group.groupName)}
-            >
-              {group.groupName}{" "}
-              {isCollapsible && (collapsedGroups[group.groupName] ? "▲" : "▼")}
-            </div>
-
-            {/* Grup İçindeki Kaynaklar */}
-            {!collapsedGroups[group.groupName] &&
-              group.resources.map((resource, resourceIndex) => (
-                <div key={resourceIndex} className="resource-cell">
-                  {showIdAsName ? resource.id : resource.name || resource.id}
-                  {/* Eğer `name` yoksa `id` kullanılır */}
-                </div>
-              ))}
-          </div>
-        ))
-      ) : (
-        // Gruplama yok
-        groupedResources.flatMap((group) => group.resources).map((resource, resourceIndex) => (
-          <div key={resourceIndex} className="resource-cell">
-            {showIdAsName ? resource.id : resource.name || resource.id}
-            {/* Eğer `name` yoksa `id` kullanılır */}
-          </div>
-        ))
-      )}
-    </div>
-  );
-};
-
-export default Resources;
+import React from "react";
+
+const Resources = ({
+  groupedResources = [], // Kaynakların listesi
+  collapsedGroups = {}, // Grupların açık/kapalı durumunu tutan nesne
+  toggleGroupCollapse, // Grupları açma/kapama fonksiyonu
+  resourceSettings = {
+    showIdAsName: false, // Varsayılan: `name` varsa onu göster, yoksa `id`
+    isGrouped: true, // Varsayılan: Gruplama açık
+    isCollapsible: true, // Varsayılan: Gruplar açılıp kapanabilir
+  },
+}) => {
+  const { showIdAsName, isGrouped, isCollapsible } = resourceSettings;
+
+  return (
+    <div className="timeline-resources">
+      {isGrouped ? (
+        // Gruplama aktif
+        groupedResources.map((group, groupIndex) => (
+          <div key={groupIndex} className="resource-group">
+            {/* Grup Başlığı */}
+            <div
+              className="resource-group-header"
+              onClick={() => isCollapsible && toggleGroupCollapse(group.groupName)}
+            >
+              {group.groupName}{" "}
+              {isCollapsible && (collapsedGroups[group.groupName] ? "▲" : "▼")}
+            </div>
+
+            {/* Grup İçindeki Kaynaklar */}
+            {!collapsedGroups[group.groupName] &&
+              group.resources.map((resource, resourceIndex) => (
+                <div key={resourceIndex} className="resource-cell">
+                  {showIdAsName ? resource.id : resource.name || resource.id}
+                  {/* Eğer `name` yoksa `id` kullanılır */}
+                </div>
+              ))}
+          </div>
+        ))
+      ) : (
+        // Gruplama yok
+        groupedResources.flatMap((group) => group.resources).map((resource, resourceIndex) => (
+          <div key={resourceIndex} className="resource-cell">
+            {showIdAsName ? resource.id : resource.name || resource.id}
+            {/* Eğer `name` yoksa `id` kullanılır */}
+          </div>
+        ))
+      )}
+    </div>
+  );
+};
+
+export default Resources;

package/dist/{dist/components → components}/Timeline/ResourcesHeader.js

@@ -1,14 +1,14 @@
-// ResourcesHeader.js
-import React from "react";
-import "./Timeline.css";
-
-const ResourcesHeader = ({ content }) => {
-  return (
-    <div className="resources-header">
-      {/* content => string veya React node */}
-      {content}
-    </div>
-  );
-};
-
-export default ResourcesHeader;
+// ResourcesHeader.js
+import React from "react";
+import "./Timeline.css";
+
+const ResourcesHeader = ({ content }) => {
+  return (
+    <div className="resources-header">
+      {/* content => string veya React node */}
+      {content}
+    </div>
+  );
+};
+
+export default ResourcesHeader;