more typescript and update weather charts in real time
This commit is contained in:
parent
ed545467c5
commit
8c06f1f8fa
8 changed files with 388 additions and 760 deletions
754
assets/js/app.js
754
assets/js/app.js
|
|
@ -75,757 +75,9 @@ let Hooks = {};
|
|||
Hooks.APRSMap = MapAPRSMap;
|
||||
Hooks.ResponsiveSlideoverHook = ResponsiveSlideoverHook;
|
||||
|
||||
Hooks.ChartJSTempChart = {
|
||||
mounted() {
|
||||
console.log('Temperature chart mounted');
|
||||
|
||||
// Initialize global chart instances map if it doesn't exist
|
||||
if (!window.chartInstances) {
|
||||
window.chartInstances = new Map();
|
||||
}
|
||||
|
||||
// Register this chart instance
|
||||
window.chartInstances.set(this.el.id, this);
|
||||
|
||||
this.renderChart();
|
||||
// Listen for theme changes
|
||||
this.themeChangeHandler = () => {
|
||||
console.log('Temperature chart received themeChanged event');
|
||||
if (this.chart) {
|
||||
console.log('Re-rendering temperature chart');
|
||||
this.renderChart();
|
||||
}
|
||||
};
|
||||
window.addEventListener('themeChanged', this.themeChangeHandler);
|
||||
},
|
||||
updated() { this.renderChart(); },
|
||||
destroyed() {
|
||||
// Clean up event listener
|
||||
if (this.themeChangeHandler) {
|
||||
window.removeEventListener('themeChanged', this.themeChangeHandler);
|
||||
}
|
||||
// Remove from global chart instances
|
||||
if (window.chartInstances) {
|
||||
window.chartInstances.delete(this.el.id);
|
||||
}
|
||||
},
|
||||
renderChart() {
|
||||
console.log('Temperature chart renderChart called');
|
||||
if (this.chart) {
|
||||
this.chart.destroy();
|
||||
}
|
||||
|
||||
const data = JSON.parse(this.el.dataset.weatherHistory);
|
||||
const times = data.map(d => new Date(d.timestamp));
|
||||
const temps = data.map(d => d.temperature);
|
||||
const dews = data.map(d => d.dew_point);
|
||||
const colors = getThemeColors();
|
||||
console.log('Temperature chart colors:', colors);
|
||||
|
||||
const canvas = this.el.querySelector('canvas');
|
||||
if (!canvas) {
|
||||
console.error('Canvas element not found for temperature chart');
|
||||
return;
|
||||
}
|
||||
|
||||
this.chart = new Chart(canvas, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: times,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Temperature (°F)',
|
||||
data: temps,
|
||||
borderColor: 'red',
|
||||
backgroundColor: 'rgba(255, 0, 0, 0.1)',
|
||||
tension: 0.1
|
||||
},
|
||||
{
|
||||
label: 'Dew Point (°F)',
|
||||
data: dews,
|
||||
borderColor: 'blue',
|
||||
backgroundColor: 'rgba(0, 0, 255, 0.1)',
|
||||
tension: 0.1
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Temperature & Dew Point (°F)',
|
||||
color: colors.text
|
||||
},
|
||||
legend: {
|
||||
labels: {
|
||||
color: colors.text
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
type: 'time',
|
||||
time: {
|
||||
displayFormats: {
|
||||
hour: 'HH:mm',
|
||||
minute: 'HH:mm'
|
||||
}
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Time',
|
||||
color: colors.text
|
||||
},
|
||||
ticks: {
|
||||
color: colors.text
|
||||
},
|
||||
grid: {
|
||||
color: colors.grid
|
||||
}
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
display: true,
|
||||
text: '°F',
|
||||
color: colors.text
|
||||
},
|
||||
ticks: {
|
||||
color: colors.text
|
||||
},
|
||||
grid: {
|
||||
color: colors.grid
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
Hooks.ChartJSHumidityChart = {
|
||||
mounted() {
|
||||
console.log('Humidity chart mounted');
|
||||
|
||||
// Initialize global chart instances map if it doesn't exist
|
||||
if (!window.chartInstances) {
|
||||
window.chartInstances = new Map();
|
||||
}
|
||||
|
||||
// Register this chart instance
|
||||
window.chartInstances.set(this.el.id, this);
|
||||
|
||||
this.renderChart();
|
||||
// Listen for theme changes
|
||||
this.themeChangeHandler = () => {
|
||||
console.log('Humidity chart received themeChanged event');
|
||||
if (this.chart) {
|
||||
console.log('Re-rendering humidity chart');
|
||||
this.renderChart();
|
||||
}
|
||||
};
|
||||
window.addEventListener('themeChanged', this.themeChangeHandler);
|
||||
},
|
||||
updated() { this.renderChart(); },
|
||||
destroyed() {
|
||||
// Clean up event listener
|
||||
if (this.themeChangeHandler) {
|
||||
window.removeEventListener('themeChanged', this.themeChangeHandler);
|
||||
}
|
||||
// Remove from global chart instances
|
||||
if (window.chartInstances) {
|
||||
window.chartInstances.delete(this.el.id);
|
||||
}
|
||||
},
|
||||
renderChart() {
|
||||
console.log('Humidity chart renderChart called');
|
||||
if (this.chart) {
|
||||
this.chart.destroy();
|
||||
}
|
||||
|
||||
const data = JSON.parse(this.el.dataset.weatherHistory);
|
||||
const times = data.map(d => new Date(d.timestamp));
|
||||
const humidity = data.map(d => d.humidity);
|
||||
const colors = getThemeColors();
|
||||
console.log('Humidity chart colors:', colors);
|
||||
|
||||
const canvas = this.el.querySelector('canvas');
|
||||
if (!canvas) {
|
||||
console.error('Canvas element not found for humidity chart');
|
||||
return;
|
||||
}
|
||||
|
||||
this.chart = new Chart(canvas, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: times,
|
||||
datasets: [{
|
||||
label: 'Humidity (%)',
|
||||
data: humidity,
|
||||
borderColor: 'green',
|
||||
backgroundColor: 'rgba(0, 255, 0, 0.1)',
|
||||
tension: 0.1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Humidity (%)',
|
||||
color: colors.text
|
||||
},
|
||||
legend: {
|
||||
labels: {
|
||||
color: colors.text
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
type: 'time',
|
||||
time: {
|
||||
displayFormats: {
|
||||
hour: 'HH:mm',
|
||||
minute: 'HH:mm'
|
||||
}
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Time',
|
||||
color: colors.text
|
||||
},
|
||||
ticks: {
|
||||
color: colors.text
|
||||
},
|
||||
grid: {
|
||||
color: colors.grid
|
||||
}
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
display: true,
|
||||
text: '%',
|
||||
color: colors.text
|
||||
},
|
||||
ticks: {
|
||||
color: colors.text
|
||||
},
|
||||
grid: {
|
||||
color: colors.grid
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
Hooks.ChartJSPressureChart = {
|
||||
mounted() {
|
||||
console.log('Pressure chart mounted');
|
||||
|
||||
// Initialize global chart instances map if it doesn't exist
|
||||
if (!window.chartInstances) {
|
||||
window.chartInstances = new Map();
|
||||
}
|
||||
|
||||
// Register this chart instance
|
||||
window.chartInstances.set(this.el.id, this);
|
||||
|
||||
this.renderChart();
|
||||
// Listen for theme changes
|
||||
this.themeChangeHandler = () => {
|
||||
console.log('Pressure chart received themeChanged event');
|
||||
if (this.chart) {
|
||||
console.log('Re-rendering pressure chart');
|
||||
this.renderChart();
|
||||
}
|
||||
};
|
||||
window.addEventListener('themeChanged', this.themeChangeHandler);
|
||||
},
|
||||
updated() { this.renderChart(); },
|
||||
destroyed() {
|
||||
// Clean up event listener
|
||||
if (this.themeChangeHandler) {
|
||||
window.removeEventListener('themeChanged', this.themeChangeHandler);
|
||||
}
|
||||
// Remove from global chart instances
|
||||
if (window.chartInstances) {
|
||||
window.chartInstances.delete(this.el.id);
|
||||
}
|
||||
},
|
||||
renderChart() {
|
||||
console.log('Pressure chart renderChart called');
|
||||
if (this.chart) {
|
||||
this.chart.destroy();
|
||||
}
|
||||
|
||||
const data = JSON.parse(this.el.dataset.weatherHistory);
|
||||
const times = data.map(d => new Date(d.timestamp));
|
||||
const pressure = data.map(d => d.pressure);
|
||||
const colors = getThemeColors();
|
||||
console.log('Pressure chart colors:', colors);
|
||||
|
||||
const canvas = this.el.querySelector('canvas');
|
||||
if (!canvas) {
|
||||
console.error('Canvas element not found for pressure chart');
|
||||
return;
|
||||
}
|
||||
|
||||
this.chart = new Chart(canvas, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: times,
|
||||
datasets: [{
|
||||
label: 'Pressure (mb)',
|
||||
data: pressure,
|
||||
borderColor: 'purple',
|
||||
backgroundColor: 'rgba(128, 0, 128, 0.1)',
|
||||
tension: 0.1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Pressure (mb)',
|
||||
color: colors.text
|
||||
},
|
||||
legend: {
|
||||
labels: {
|
||||
color: colors.text
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
type: 'time',
|
||||
time: {
|
||||
displayFormats: {
|
||||
hour: 'HH:mm',
|
||||
minute: 'HH:mm'
|
||||
}
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Time',
|
||||
color: colors.text
|
||||
},
|
||||
ticks: {
|
||||
color: colors.text
|
||||
},
|
||||
grid: {
|
||||
color: colors.grid
|
||||
}
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'mb',
|
||||
color: colors.text
|
||||
},
|
||||
ticks: {
|
||||
color: colors.text
|
||||
},
|
||||
grid: {
|
||||
color: colors.grid
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
Hooks.ChartJSWindChart = {
|
||||
mounted() {
|
||||
console.log('Wind chart mounted');
|
||||
|
||||
// Initialize global chart instances map if it doesn't exist
|
||||
if (!window.chartInstances) {
|
||||
window.chartInstances = new Map();
|
||||
}
|
||||
|
||||
// Register this chart instance
|
||||
window.chartInstances.set(this.el.id, this);
|
||||
|
||||
this.renderChart();
|
||||
// Listen for theme changes
|
||||
this.themeChangeHandler = () => {
|
||||
console.log('Wind chart received themeChanged event');
|
||||
if (this.chart) {
|
||||
console.log('Re-rendering wind chart');
|
||||
this.renderChart();
|
||||
}
|
||||
};
|
||||
window.addEventListener('themeChanged', this.themeChangeHandler);
|
||||
},
|
||||
updated() { this.renderChart(); },
|
||||
destroyed() {
|
||||
// Clean up event listener
|
||||
if (this.themeChangeHandler) {
|
||||
window.removeEventListener('themeChanged', this.themeChangeHandler);
|
||||
}
|
||||
// Remove from global chart instances
|
||||
if (window.chartInstances) {
|
||||
window.chartInstances.delete(this.el.id);
|
||||
}
|
||||
},
|
||||
renderChart() {
|
||||
console.log('Wind chart renderChart called');
|
||||
if (this.chart) {
|
||||
this.chart.destroy();
|
||||
}
|
||||
|
||||
const data = JSON.parse(this.el.dataset.weatherHistory);
|
||||
const times = data.map(d => new Date(d.timestamp));
|
||||
const windSpeed = data.map(d => d.wind_speed);
|
||||
const windGust = data.map(d => d.wind_gust);
|
||||
const colors = getThemeColors();
|
||||
console.log('Wind chart colors:', colors);
|
||||
|
||||
const canvas = this.el.querySelector('canvas');
|
||||
if (!canvas) {
|
||||
console.error('Canvas element not found for wind chart');
|
||||
return;
|
||||
}
|
||||
|
||||
this.chart = new Chart(canvas, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: times,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Wind Speed (mph)',
|
||||
data: windSpeed,
|
||||
borderColor: 'orange',
|
||||
backgroundColor: 'rgba(255, 165, 0, 0.1)',
|
||||
tension: 0.1
|
||||
},
|
||||
{
|
||||
label: 'Wind Gust (mph)',
|
||||
data: windGust,
|
||||
borderColor: 'brown',
|
||||
backgroundColor: 'rgba(165, 42, 42, 0.1)',
|
||||
tension: 0.1
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Wind Speed & Gust (mph)',
|
||||
color: colors.text
|
||||
},
|
||||
legend: {
|
||||
labels: {
|
||||
color: colors.text
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
type: 'time',
|
||||
time: {
|
||||
displayFormats: {
|
||||
hour: 'HH:mm',
|
||||
minute: 'HH:mm'
|
||||
}
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Time',
|
||||
color: colors.text
|
||||
},
|
||||
ticks: {
|
||||
color: colors.text
|
||||
},
|
||||
grid: {
|
||||
color: colors.grid
|
||||
}
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'mph',
|
||||
color: colors.text
|
||||
},
|
||||
ticks: {
|
||||
color: colors.text
|
||||
},
|
||||
grid: {
|
||||
color: colors.grid
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
Hooks.ChartJSRainChart = {
|
||||
mounted() {
|
||||
console.log('Rain chart mounted');
|
||||
|
||||
// Initialize global chart instances map if it doesn't exist
|
||||
if (!window.chartInstances) {
|
||||
window.chartInstances = new Map();
|
||||
}
|
||||
|
||||
// Register this chart instance
|
||||
window.chartInstances.set(this.el.id, this);
|
||||
|
||||
this.renderChart();
|
||||
// Listen for theme changes
|
||||
this.themeChangeHandler = () => {
|
||||
console.log('Rain chart received themeChanged event');
|
||||
if (this.chart) {
|
||||
console.log('Re-rendering rain chart');
|
||||
this.renderChart();
|
||||
}
|
||||
};
|
||||
window.addEventListener('themeChanged', this.themeChangeHandler);
|
||||
},
|
||||
updated() { this.renderChart(); },
|
||||
destroyed() {
|
||||
// Clean up event listener
|
||||
if (this.themeChangeHandler) {
|
||||
window.removeEventListener('themeChanged', this.themeChangeHandler);
|
||||
}
|
||||
// Remove from global chart instances
|
||||
if (window.chartInstances) {
|
||||
window.chartInstances.delete(this.el.id);
|
||||
}
|
||||
},
|
||||
renderChart() {
|
||||
console.log('Rain chart renderChart called');
|
||||
if (this.chart) {
|
||||
this.chart.destroy();
|
||||
}
|
||||
|
||||
const data = JSON.parse(this.el.dataset.weatherHistory);
|
||||
const times = data.map(d => new Date(d.timestamp));
|
||||
const rain1h = data.map(d => d.rain_1h);
|
||||
const rain24h = data.map(d => d.rain_24h);
|
||||
const rainSinceMidnight = data.map(d => d.rain_since_midnight);
|
||||
const colors = getThemeColors();
|
||||
console.log('Rain chart colors:', colors);
|
||||
|
||||
const canvas = this.el.querySelector('canvas');
|
||||
if (!canvas) {
|
||||
console.error('Canvas element not found for rain chart');
|
||||
return;
|
||||
}
|
||||
|
||||
this.chart = new Chart(canvas, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: times,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Rain (1h)',
|
||||
data: rain1h,
|
||||
borderColor: 'blue',
|
||||
backgroundColor: 'rgba(0, 0, 255, 0.1)',
|
||||
tension: 0.1
|
||||
},
|
||||
{
|
||||
label: 'Rain (24h)',
|
||||
data: rain24h,
|
||||
borderColor: 'cyan',
|
||||
backgroundColor: 'rgba(0, 255, 255, 0.1)',
|
||||
tension: 0.1
|
||||
},
|
||||
{
|
||||
label: 'Rain (since midnight)',
|
||||
data: rainSinceMidnight,
|
||||
borderColor: 'navy',
|
||||
backgroundColor: 'rgba(0, 0, 128, 0.1)',
|
||||
tension: 0.1
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Rainfall (inches)',
|
||||
color: colors.text
|
||||
},
|
||||
legend: {
|
||||
labels: {
|
||||
color: colors.text
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
type: 'time',
|
||||
time: {
|
||||
displayFormats: {
|
||||
hour: 'HH:mm',
|
||||
minute: 'HH:mm'
|
||||
}
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Time',
|
||||
color: colors.text
|
||||
},
|
||||
ticks: {
|
||||
color: colors.text
|
||||
},
|
||||
grid: {
|
||||
color: colors.grid
|
||||
}
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'inches',
|
||||
color: colors.text
|
||||
},
|
||||
ticks: {
|
||||
color: colors.text
|
||||
},
|
||||
grid: {
|
||||
color: colors.grid
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
Hooks.ChartJSLuminosityChart = {
|
||||
mounted() {
|
||||
console.log('Luminosity chart mounted');
|
||||
|
||||
// Initialize global chart instances map if it doesn't exist
|
||||
if (!window.chartInstances) {
|
||||
window.chartInstances = new Map();
|
||||
}
|
||||
|
||||
// Register this chart instance
|
||||
window.chartInstances.set(this.el.id, this);
|
||||
|
||||
this.renderChart();
|
||||
// Listen for theme changes
|
||||
this.themeChangeHandler = () => {
|
||||
console.log('Luminosity chart received themeChanged event');
|
||||
if (this.chart) {
|
||||
console.log('Re-rendering luminosity chart');
|
||||
this.renderChart();
|
||||
}
|
||||
};
|
||||
window.addEventListener('themeChanged', this.themeChangeHandler);
|
||||
},
|
||||
updated() { this.renderChart(); },
|
||||
destroyed() {
|
||||
// Clean up event listener
|
||||
if (this.themeChangeHandler) {
|
||||
window.removeEventListener('themeChanged', this.themeChangeHandler);
|
||||
}
|
||||
// Remove from global chart instances
|
||||
if (window.chartInstances) {
|
||||
window.chartInstances.delete(this.el.id);
|
||||
}
|
||||
},
|
||||
renderChart() {
|
||||
console.log('Luminosity chart renderChart called');
|
||||
if (this.chart) {
|
||||
this.chart.destroy();
|
||||
}
|
||||
|
||||
const data = JSON.parse(this.el.dataset.weatherHistory);
|
||||
const times = data.map(d => new Date(d.timestamp));
|
||||
const luminosity = data.map(d => d.luminosity);
|
||||
const colors = getThemeColors();
|
||||
console.log('Luminosity chart colors:', colors);
|
||||
|
||||
const canvas = this.el.querySelector('canvas');
|
||||
if (!canvas) {
|
||||
console.error('Canvas element not found for luminosity chart');
|
||||
return;
|
||||
}
|
||||
|
||||
this.chart = new Chart(canvas, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: times,
|
||||
datasets: [{
|
||||
label: 'Luminosity',
|
||||
data: luminosity,
|
||||
borderColor: 'yellow',
|
||||
backgroundColor: 'rgba(255, 255, 0, 0.1)',
|
||||
tension: 0.1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Luminosity',
|
||||
color: colors.text
|
||||
},
|
||||
legend: {
|
||||
labels: {
|
||||
color: colors.text
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
type: 'time',
|
||||
time: {
|
||||
displayFormats: {
|
||||
hour: 'HH:mm',
|
||||
minute: 'HH:mm'
|
||||
}
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Time',
|
||||
color: colors.text
|
||||
},
|
||||
ticks: {
|
||||
color: colors.text
|
||||
},
|
||||
grid: {
|
||||
color: colors.grid
|
||||
}
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Luminosity',
|
||||
color: colors.text
|
||||
},
|
||||
ticks: {
|
||||
color: colors.text
|
||||
},
|
||||
grid: {
|
||||
color: colors.grid
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
// Register weather chart hooks from TypeScript
|
||||
import { WeatherChartHooks } from "./features/weather_charts";
|
||||
Object.assign(Hooks, WeatherChartHooks);
|
||||
|
||||
// Helper function to get theme-aware colors
|
||||
const getThemeColors = () => {
|
||||
|
|
|
|||
313
assets/js/features/weather_charts.ts
Normal file
313
assets/js/features/weather_charts.ts
Normal file
|
|
@ -0,0 +1,313 @@
|
|||
/// <reference types="chart.js" />
|
||||
/// <reference types="phoenix_live_view" />
|
||||
// The above triple-slash directives help TypeScript find types for Chart.js and Phoenix LiveView.
|
||||
// If you use a custom build or alias, ensure types are available in node_modules.
|
||||
|
||||
import Chart from 'chart.js/auto';
|
||||
import type { Hook } from 'phoenix_live_view';
|
||||
|
||||
// Type for weather history data
|
||||
interface WeatherHistoryDatum {
|
||||
timestamp: string;
|
||||
temperature?: number;
|
||||
dew_point?: number;
|
||||
humidity?: number;
|
||||
pressure?: number;
|
||||
wind_direction?: number;
|
||||
wind_speed?: number;
|
||||
wind_gust?: number;
|
||||
rain_1h?: number;
|
||||
rain_24h?: number;
|
||||
rain_since_midnight?: number;
|
||||
luminosity?: number;
|
||||
}
|
||||
|
||||
// Type for the event payload
|
||||
interface UpdateWeatherChartsPayload {
|
||||
weather_history: string;
|
||||
}
|
||||
|
||||
// Helper function to get theme-aware colors
|
||||
const getThemeColors = () => {
|
||||
const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
|
||||
return {
|
||||
text: isDark ? '#e5e7eb' : '#111827',
|
||||
grid: isDark ? '#374151' : '#9ca3af',
|
||||
background: isDark ? 'rgba(0, 0, 0, 0.1)' : 'rgba(255, 255, 255, 0.1)'
|
||||
};
|
||||
};
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
chartInstances?: Map<string, any>;
|
||||
}
|
||||
}
|
||||
|
||||
function registerChartInstance(el: HTMLElement, hook: any) {
|
||||
if (!window.chartInstances) {
|
||||
window.chartInstances = new Map();
|
||||
}
|
||||
window.chartInstances.set(el.id, hook);
|
||||
}
|
||||
|
||||
function unregisterChartInstance(el: HTMLElement) {
|
||||
if (window.chartInstances) {
|
||||
window.chartInstances.delete(el.id);
|
||||
}
|
||||
}
|
||||
|
||||
// All hooks are typed as 'any' for LiveView context compatibility
|
||||
export const WeatherChartHooks: Record<string, Hook> = {
|
||||
ChartJSTempChart: {
|
||||
mounted() {
|
||||
const self = this as any;
|
||||
registerChartInstance(self.el as HTMLElement, self);
|
||||
self.renderChart();
|
||||
self.themeChangeHandler = () => self.renderChart();
|
||||
window.addEventListener('themeChanged', self.themeChangeHandler);
|
||||
self.handleEvent("update_weather_charts", ({ weather_history }: UpdateWeatherChartsPayload) => {
|
||||
self.el.dataset.weatherHistory = weather_history;
|
||||
self.renderChart();
|
||||
});
|
||||
},
|
||||
updated() { (this as any).renderChart(); },
|
||||
destroyed() {
|
||||
const self = this as any;
|
||||
if (self.themeChangeHandler) window.removeEventListener('themeChanged', self.themeChangeHandler);
|
||||
unregisterChartInstance(self.el as HTMLElement);
|
||||
},
|
||||
renderChart() {
|
||||
const self = this as any;
|
||||
if (self.chart) self.chart.destroy();
|
||||
const data: WeatherHistoryDatum[] = JSON.parse(self.el.dataset.weatherHistory!);
|
||||
const times = data.map(d => new Date(d.timestamp));
|
||||
const temps = data.map(d => d.temperature);
|
||||
const dews = data.map(d => d.dew_point);
|
||||
const colors = getThemeColors();
|
||||
const canvas = self.el.querySelector('canvas') as HTMLCanvasElement;
|
||||
if (!canvas) return;
|
||||
self.chart = new Chart(canvas, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: times,
|
||||
datasets: [
|
||||
{ label: 'Temperature (°F)', data: temps, borderColor: 'red', backgroundColor: 'rgba(255, 0, 0, 0.1)', tension: 0.1 },
|
||||
{ label: 'Dew Point (°F)', data: dews, borderColor: 'blue', backgroundColor: 'rgba(0, 0, 255, 0.1)', tension: 0.1 }
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
title: { display: true, text: 'Temperature & Dew Point (°F)', color: colors.text },
|
||||
legend: { labels: { color: colors.text } }
|
||||
},
|
||||
scales: {
|
||||
x: { type: 'time', time: { displayFormats: { hour: 'HH:mm', minute: 'HH:mm' } }, title: { display: true, text: 'Time', color: colors.text }, ticks: { color: colors.text }, grid: { color: colors.grid } },
|
||||
y: { title: { display: true, text: '°F', color: colors.text }, ticks: { color: colors.text }, grid: { color: colors.grid } }
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
ChartJSHumidityChart: {
|
||||
mounted() {
|
||||
const self = this as any;
|
||||
registerChartInstance(self.el as HTMLElement, self);
|
||||
self.renderChart();
|
||||
self.themeChangeHandler = () => self.renderChart();
|
||||
window.addEventListener('themeChanged', self.themeChangeHandler);
|
||||
self.handleEvent("update_weather_charts", ({ weather_history }: UpdateWeatherChartsPayload) => {
|
||||
self.el.dataset.weatherHistory = weather_history;
|
||||
self.renderChart();
|
||||
});
|
||||
},
|
||||
updated() { (this as any).renderChart(); },
|
||||
destroyed() {
|
||||
const self = this as any;
|
||||
if (self.themeChangeHandler) window.removeEventListener('themeChanged', self.themeChangeHandler);
|
||||
unregisterChartInstance(self.el as HTMLElement);
|
||||
},
|
||||
renderChart() {
|
||||
const self = this as any;
|
||||
if (self.chart) self.chart.destroy();
|
||||
const data: WeatherHistoryDatum[] = JSON.parse(self.el.dataset.weatherHistory!);
|
||||
const times = data.map(d => new Date(d.timestamp));
|
||||
const humidity = data.map(d => d.humidity);
|
||||
const colors = getThemeColors();
|
||||
const canvas = self.el.querySelector('canvas') as HTMLCanvasElement;
|
||||
if (!canvas) return;
|
||||
self.chart = new Chart(canvas, {
|
||||
type: 'line',
|
||||
data: { labels: times, datasets: [{ label: 'Humidity (%)', data: humidity, borderColor: 'green', backgroundColor: 'rgba(0, 255, 0, 0.1)', tension: 0.1 }] },
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: { title: { display: true, text: 'Humidity (%)', color: colors.text }, legend: { labels: { color: colors.text } } },
|
||||
scales: { x: { type: 'time', time: { displayFormats: { hour: 'HH:mm', minute: 'HH:mm' } }, title: { display: true, text: 'Time', color: colors.text }, ticks: { color: colors.text }, grid: { color: colors.grid } }, y: { title: { display: true, text: '%', color: colors.text }, ticks: { color: colors.text }, grid: { color: colors.grid } } }
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
ChartJSPressureChart: {
|
||||
mounted() {
|
||||
const self = this as any;
|
||||
registerChartInstance(self.el as HTMLElement, self);
|
||||
self.renderChart();
|
||||
self.themeChangeHandler = () => self.renderChart();
|
||||
window.addEventListener('themeChanged', self.themeChangeHandler);
|
||||
self.handleEvent("update_weather_charts", ({ weather_history }: UpdateWeatherChartsPayload) => {
|
||||
self.el.dataset.weatherHistory = weather_history;
|
||||
self.renderChart();
|
||||
});
|
||||
},
|
||||
updated() { (this as any).renderChart(); },
|
||||
destroyed() {
|
||||
const self = this as any;
|
||||
if (self.themeChangeHandler) window.removeEventListener('themeChanged', self.themeChangeHandler);
|
||||
unregisterChartInstance(self.el as HTMLElement);
|
||||
},
|
||||
renderChart() {
|
||||
const self = this as any;
|
||||
if (self.chart) self.chart.destroy();
|
||||
const data: WeatherHistoryDatum[] = JSON.parse(self.el.dataset.weatherHistory!);
|
||||
const times = data.map(d => new Date(d.timestamp));
|
||||
const pressure = data.map(d => d.pressure);
|
||||
const colors = getThemeColors();
|
||||
const canvas = self.el.querySelector('canvas') as HTMLCanvasElement;
|
||||
if (!canvas) return;
|
||||
self.chart = new Chart(canvas, {
|
||||
type: 'line',
|
||||
data: { labels: times, datasets: [{ label: 'Pressure (mb)', data: pressure, borderColor: 'purple', backgroundColor: 'rgba(128, 0, 128, 0.1)', tension: 0.1 }] },
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: { title: { display: true, text: 'Pressure (mb)', color: colors.text }, legend: { labels: { color: colors.text } } },
|
||||
scales: { x: { type: 'time', time: { displayFormats: { hour: 'HH:mm', minute: 'HH:mm' } }, title: { display: true, text: 'Time', color: colors.text }, ticks: { color: colors.text }, grid: { color: colors.grid } }, y: { title: { display: true, text: 'mb', color: colors.text }, ticks: { color: colors.text }, grid: { color: colors.grid } } }
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
ChartJSWindChart: {
|
||||
mounted() {
|
||||
const self = this as any;
|
||||
registerChartInstance(self.el as HTMLElement, self);
|
||||
self.renderChart();
|
||||
self.themeChangeHandler = () => self.renderChart();
|
||||
window.addEventListener('themeChanged', self.themeChangeHandler);
|
||||
self.handleEvent("update_weather_charts", ({ weather_history }: UpdateWeatherChartsPayload) => {
|
||||
self.el.dataset.weatherHistory = weather_history;
|
||||
self.renderChart();
|
||||
});
|
||||
},
|
||||
updated() { (this as any).renderChart(); },
|
||||
destroyed() {
|
||||
const self = this as any;
|
||||
if (self.themeChangeHandler) window.removeEventListener('themeChanged', self.themeChangeHandler);
|
||||
unregisterChartInstance(self.el as HTMLElement);
|
||||
},
|
||||
renderChart() {
|
||||
const self = this as any;
|
||||
if (self.chart) self.chart.destroy();
|
||||
const data: WeatherHistoryDatum[] = JSON.parse(self.el.dataset.weatherHistory!);
|
||||
const times = data.map(d => new Date(d.timestamp));
|
||||
const windSpeed = data.map(d => d.wind_speed);
|
||||
const windGust = data.map(d => d.wind_gust);
|
||||
const colors = getThemeColors();
|
||||
const canvas = self.el.querySelector('canvas') as HTMLCanvasElement;
|
||||
if (!canvas) return;
|
||||
self.chart = new Chart(canvas, {
|
||||
type: 'line',
|
||||
data: { labels: times, datasets: [{ label: 'Wind Speed (mph)', data: windSpeed, borderColor: 'orange', backgroundColor: 'rgba(255, 165, 0, 0.1)', tension: 0.1 }, { label: 'Wind Gust (mph)', data: windGust, borderColor: 'brown', backgroundColor: 'rgba(165, 42, 42, 0.1)', tension: 0.1 }] },
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: { title: { display: true, text: 'Wind Speed & Gust (mph)', color: colors.text }, legend: { labels: { color: colors.text } } },
|
||||
scales: { x: { type: 'time', time: { displayFormats: { hour: 'HH:mm', minute: 'HH:mm' } }, title: { display: true, text: 'Time', color: colors.text }, ticks: { color: colors.text }, grid: { color: colors.grid } }, y: { title: { display: true, text: 'mph', color: colors.text }, ticks: { color: colors.text }, grid: { color: colors.grid } } }
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
ChartJSRainChart: {
|
||||
mounted() {
|
||||
const self = this as any;
|
||||
registerChartInstance(self.el as HTMLElement, self);
|
||||
self.renderChart();
|
||||
self.themeChangeHandler = () => self.renderChart();
|
||||
window.addEventListener('themeChanged', self.themeChangeHandler);
|
||||
self.handleEvent("update_weather_charts", ({ weather_history }: UpdateWeatherChartsPayload) => {
|
||||
self.el.dataset.weatherHistory = weather_history;
|
||||
self.renderChart();
|
||||
});
|
||||
},
|
||||
updated() { (this as any).renderChart(); },
|
||||
destroyed() {
|
||||
const self = this as any;
|
||||
if (self.themeChangeHandler) window.removeEventListener('themeChanged', self.themeChangeHandler);
|
||||
unregisterChartInstance(self.el as HTMLElement);
|
||||
},
|
||||
renderChart() {
|
||||
const self = this as any;
|
||||
if (self.chart) self.chart.destroy();
|
||||
const data: WeatherHistoryDatum[] = JSON.parse(self.el.dataset.weatherHistory!);
|
||||
const times = data.map(d => new Date(d.timestamp));
|
||||
const rain1h = data.map(d => d.rain_1h);
|
||||
const rain24h = data.map(d => d.rain_24h);
|
||||
const rainSinceMidnight = data.map(d => d.rain_since_midnight);
|
||||
const colors = getThemeColors();
|
||||
const canvas = self.el.querySelector('canvas') as HTMLCanvasElement;
|
||||
if (!canvas) return;
|
||||
self.chart = new Chart(canvas, {
|
||||
type: 'line',
|
||||
data: { labels: times, datasets: [{ label: 'Rain (1h)', data: rain1h, borderColor: 'blue', backgroundColor: 'rgba(0, 0, 255, 0.1)', tension: 0.1 }, { label: 'Rain (24h)', data: rain24h, borderColor: 'cyan', backgroundColor: 'rgba(0, 255, 255, 0.1)', tension: 0.1 }, { label: 'Rain (since midnight)', data: rainSinceMidnight, borderColor: 'navy', backgroundColor: 'rgba(0, 0, 128, 0.1)', tension: 0.1 }] },
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: { title: { display: true, text: 'Rainfall (inches)', color: colors.text }, legend: { labels: { color: colors.text } } },
|
||||
scales: { x: { type: 'time', time: { displayFormats: { hour: 'HH:mm', minute: 'HH:mm' } }, title: { display: true, text: 'Time', color: colors.text }, ticks: { color: colors.text }, grid: { color: colors.grid } }, y: { title: { display: true, text: 'inches', color: colors.text }, ticks: { color: colors.text }, grid: { color: colors.grid } } }
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
ChartJSLuminosityChart: {
|
||||
mounted() {
|
||||
const self = this as any;
|
||||
registerChartInstance(self.el as HTMLElement, self);
|
||||
self.renderChart();
|
||||
self.themeChangeHandler = () => self.renderChart();
|
||||
window.addEventListener('themeChanged', self.themeChangeHandler);
|
||||
self.handleEvent("update_weather_charts", ({ weather_history }: UpdateWeatherChartsPayload) => {
|
||||
self.el.dataset.weatherHistory = weather_history;
|
||||
self.renderChart();
|
||||
});
|
||||
},
|
||||
updated() { (this as any).renderChart(); },
|
||||
destroyed() {
|
||||
const self = this as any;
|
||||
if (self.themeChangeHandler) window.removeEventListener('themeChanged', self.themeChangeHandler);
|
||||
unregisterChartInstance(self.el as HTMLElement);
|
||||
},
|
||||
renderChart() {
|
||||
const self = this as any;
|
||||
if (self.chart) self.chart.destroy();
|
||||
const data: WeatherHistoryDatum[] = JSON.parse(self.el.dataset.weatherHistory!);
|
||||
const times = data.map(d => new Date(d.timestamp));
|
||||
const luminosity = data.map(d => d.luminosity);
|
||||
const colors = getThemeColors();
|
||||
const canvas = self.el.querySelector('canvas') as HTMLCanvasElement;
|
||||
if (!canvas) return;
|
||||
self.chart = new Chart(canvas, {
|
||||
type: 'line',
|
||||
data: { labels: times, datasets: [{ label: 'Luminosity', data: luminosity, borderColor: 'yellow', backgroundColor: 'rgba(255, 255, 0, 0.1)', tension: 0.1 }] },
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: { title: { display: true, text: 'Luminosity', color: colors.text }, legend: { labels: { color: colors.text } } },
|
||||
scales: { x: { type: 'time', time: { displayFormats: { hour: 'HH:mm', minute: 'HH:mm' } }, title: { display: true, text: 'Time', color: colors.text }, ticks: { color: colors.text }, grid: { color: colors.grid } }, y: { title: { display: true, text: 'Luminosity', color: colors.text }, ticks: { color: colors.text }, grid: { color: colors.grid } } }
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default WeatherChartHooks;
|
||||
52
assets/package-lock.json
generated
Normal file
52
assets/package-lock.json
generated
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
{
|
||||
"name": "assets",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"dependencies": {
|
||||
"@types/chart.js": "^4.0.1",
|
||||
"chart.js": "^4.5.0",
|
||||
"phoenix_live_view": "^1.0.17"
|
||||
}
|
||||
},
|
||||
"node_modules/@kurkle/color": {
|
||||
"version": "0.3.4",
|
||||
"resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
|
||||
"integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w=="
|
||||
},
|
||||
"node_modules/@types/chart.js": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/chart.js/-/chart.js-4.0.1.tgz",
|
||||
"integrity": "sha512-OwXJ6Eg14eFpCsTG6sljiGnvVpit5R9rapG7nwDnQlljsdplVIOYVuCSwy07IduCtihrOwvOnbhXKLyp3nvPcw==",
|
||||
"deprecated": "This is a stub types definition. chart.js provides its own type definitions, so you do not need this installed.",
|
||||
"dependencies": {
|
||||
"chart.js": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/chart.js": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.0.tgz",
|
||||
"integrity": "sha512-aYeC/jDgSEx8SHWZvANYMioYMZ2KX02W6f6uVfyteuCGcadDLcYVHdfdygsTQkQ4TKn5lghoojAsPj5pu0SnvQ==",
|
||||
"dependencies": {
|
||||
"@kurkle/color": "^0.3.0"
|
||||
},
|
||||
"engines": {
|
||||
"pnpm": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/morphdom": {
|
||||
"version": "2.7.5",
|
||||
"resolved": "https://registry.npmjs.org/morphdom/-/morphdom-2.7.5.tgz",
|
||||
"integrity": "sha512-z6bfWFMra7kBqDjQGHud1LSXtq5JJC060viEkQFMBX6baIecpkNr2Ywrn2OQfWP3rXiNFQRPoFjD8/TvJcWcDg=="
|
||||
},
|
||||
"node_modules/phoenix_live_view": {
|
||||
"version": "1.0.17",
|
||||
"resolved": "https://registry.npmjs.org/phoenix_live_view/-/phoenix_live_view-1.0.17.tgz",
|
||||
"integrity": "sha512-ydjiQeMkNrGv8OGYgT7BjIho/XM3eSHrk4FCs6qiLg9EfPf5M8w1W5Ax/E1tF9E0w6VFQsWm1fKFdWqzAezgjQ==",
|
||||
"dependencies": {
|
||||
"morphdom": "2.7.5"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
7
assets/package.json
Normal file
7
assets/package.json
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"dependencies": {
|
||||
"@types/chart.js": "^4.0.1",
|
||||
"chart.js": "^4.5.0",
|
||||
"phoenix_live_view": "^1.0.17"
|
||||
}
|
||||
}
|
||||
|
|
@ -20,6 +20,7 @@ defmodule AprsmeWeb.InfoLive.Show do
|
|||
packet = get_latest_packet(normalized_callsign)
|
||||
packet = enrich_packet_with_device_info(packet)
|
||||
neighbors = get_neighbors(packet, normalized_callsign)
|
||||
has_weather_packets = PacketUtils.has_weather_packets?(normalized_callsign)
|
||||
|
||||
socket =
|
||||
socket
|
||||
|
|
@ -27,6 +28,7 @@ defmodule AprsmeWeb.InfoLive.Show do
|
|||
|> assign(:packet, packet)
|
||||
|> assign(:neighbors, neighbors)
|
||||
|> assign(:page_title, "APRS station #{normalized_callsign}")
|
||||
|> assign(:has_weather_packets, has_weather_packets)
|
||||
|
||||
{:ok, socket}
|
||||
end
|
||||
|
|
@ -39,11 +41,13 @@ defmodule AprsmeWeb.InfoLive.Show do
|
|||
packet = get_latest_packet(socket.assigns.callsign)
|
||||
packet = enrich_packet_with_device_info(packet)
|
||||
neighbors = get_neighbors(packet, socket.assigns.callsign)
|
||||
has_weather_packets = PacketUtils.has_weather_packets?(socket.assigns.callsign)
|
||||
|
||||
socket =
|
||||
socket
|
||||
|> assign(:packet, packet)
|
||||
|> assign(:neighbors, neighbors)
|
||||
|> assign(:has_weather_packets, has_weather_packets)
|
||||
|
||||
{:noreply, socket}
|
||||
else
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@
|
|||
<.link navigate={~p"/packets/#{@callsign}"} class="btn btn-outline btn-sm">
|
||||
View packets
|
||||
</.link>
|
||||
<%= if AprsmeWeb.MapLive.PacketUtils.has_weather_packets?(@callsign) do %>
|
||||
<%= if @has_weather_packets do %>
|
||||
<.link navigate={~p"/weather/#{@callsign}"} class="btn btn-primary btn-sm">
|
||||
Weather charts
|
||||
</.link>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@ defmodule AprsmeWeb.WeatherLive.CallsignView do
|
|||
@moduledoc false
|
||||
use AprsmeWeb, :live_view
|
||||
|
||||
import Phoenix.LiveView, only: [push_event: 3, connected?: 1]
|
||||
|
||||
alias Aprsme.Packets
|
||||
alias AprsmeWeb.MapLive.PacketUtils
|
||||
|
||||
|
|
@ -91,6 +93,9 @@ defmodule AprsmeWeb.WeatherLive.CallsignView do
|
|||
|> assign(:weather_history, weather_history)
|
||||
|> assign(:weather_history_json, weather_history_json)
|
||||
|
||||
# Push event to update all charts with new data
|
||||
socket = push_event(socket, "update_weather_charts", %{weather_history: weather_history_json})
|
||||
|
||||
{:noreply, socket}
|
||||
end
|
||||
|
||||
|
|
@ -133,6 +138,9 @@ defmodule AprsmeWeb.WeatherLive.CallsignView do
|
|||
|> assign(:weather_history, weather_history)
|
||||
|> assign(:weather_history_json, weather_history_json)
|
||||
|
||||
# Push event to update all charts with new data
|
||||
socket = push_event(socket, "update_weather_charts", %{weather_history: weather_history_json})
|
||||
|
||||
{:noreply, socket}
|
||||
else
|
||||
{:noreply, socket}
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
defmodule Aprsme.Repo.Migrations.DropUsersAndUsersTokensTables do
|
||||
use Ecto.Migration
|
||||
|
||||
def change do
|
||||
drop table(:users_tokens)
|
||||
drop table(:users)
|
||||
end
|
||||
end
|
||||
Loading…
Add table
Reference in a new issue