ico/pingql
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: implement free/pro plan system with monitor and interval limits

Browse Source
This commit is contained in:
nate
2026-03-18 22:40:45 +04:00
parent 11e6c593ad
commit c89b63bd97
11 changed files with 119 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/views/detail.ejs
+1 -1
View File
@@ -127,7 +127,7 @@
<!-- Edit form -->
<div class="bg-gray-900 border border-gray-800 rounded-xl p-6">
<h3 class="text-sm text-gray-400 mb-4">Edit Monitor</h3>
<%~ include('./partials/monitor-form', { _form: { monitor: m, isEdit: true, prefix: 'edit-', bg: 'bg-gray-800', border: 'border-gray-700' } }) %>
<%~ include('./partials/monitor-form', { _form: { monitor: m, isEdit: true, prefix: 'edit-', bg: 'bg-gray-800', border: 'border-gray-700' }, plan: it.plan }) %>
</div>
</div>
</main>
apps/web/src/views/new.ejs
+1 -1
View File
@@ -7,7 +7,7 @@
<h2 class="text-lg font-semibold text-gray-200 mt-2">Create Monitor</h2>
</div>
<%~ include('./partials/monitor-form', { _form: { monitor: {}, isEdit: false, prefix: '', bg: 'bg-gray-900', border: 'border-gray-800' } }) %>
<%~ include('./partials/monitor-form', { _form: { monitor: {}, isEdit: false, prefix: '', bg: 'bg-gray-900', border: 'border-gray-800' }, plan: it.plan }) %>
</main>
<script>
apps/web/src/views/partials/monitor-form.ejs
+4 -1
View File
@@ -4,10 +4,13 @@
const prefix = it._form?.prefix || '';
const bg = it._form?.bg || 'bg-gray-900';
const border = it._form?.border || 'border-gray-800';
const plan = it.plan || 'free';
const minInterval = { free: 30, pro: 2, lifetime: 2 }[plan] || 30;
const btnText = isEdit ? 'Save Changes' : 'Create Monitor';
const formId = prefix + 'form';
const methods = ['GET','POST','PUT','PATCH','DELETE','HEAD','OPTIONS'];
const intervals = [['2','2 seconds'],['5','5 seconds'],['10','10 seconds'],['20','20 seconds'],['30','30 seconds'],['60','1 minute'],['300','5 minutes'],['600','10 minutes'],['1800','30 minutes'],['3600','1 hour']];
const allIntervals = [['2','2 seconds'],['5','5 seconds'],['10','10 seconds'],['20','20 seconds'],['30','30 seconds'],['60','1 minute'],['300','5 minutes'],['600','10 minutes'],['1800','30 minutes'],['3600','1 hour']];
const intervals = allIntervals.filter(([val]) => Number(val) >= minInterval);
const timeouts = [['5000','5 seconds'],['10000','10 seconds'],['20000','20 seconds'],['30000','30 seconds'],['40000','40 seconds'],['50000','50 seconds'],['60000','60 seconds']];
const regions = [['eu-central','🇩🇪 EU Central'],['us-west','🇺🇸 US West']];
const curMethod = monitor.method || 'GET';
apps/web/src/views/settings.ejs
+31
View File
@@ -4,12 +4,43 @@
<%
const hasEmail = !!it.account.email_hash;
const createdDate = new Date(it.account.created_at).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
const plan = it.account.plan || 'free';
const planLabel = { free: 'Free', pro: 'Pro', lifetime: 'Lifetime' }[plan] || plan;
const planColor = { free: 'gray', pro: 'blue', lifetime: 'yellow' }[plan] || 'gray';
const limits = { free: { monitors: 5, interval: '30s' }, pro: { monitors: 500, interval: '2s' }, lifetime: { monitors: 500, interval: '2s' } }[plan] || { monitors: 5, interval: '30s' };
%>
<main class="max-w-3xl mx-auto px-8 py-10 space-y-8">
<h1 class="text-xl font-semibold text-white">Settings</h1>
<!-- Plan -->
<section class="bg-gray-900 rounded-xl border border-gray-800 p-6">
<div class="flex items-center justify-between mb-4">
<h2 class="text-sm font-semibold text-gray-300">Plan</h2>
<span class="text-xs font-medium px-2.5 py-1 rounded-full border border-<%= planColor %>-500/30 text-<%= planColor %>-400"><%= planLabel %></span>
</div>
<div class="grid grid-cols-3 gap-4 text-center">
<div>
<div class="text-lg font-semibold text-gray-200"><%= it.monitorCount %><span class="text-gray-600 text-sm font-normal">/<%= limits.monitors %></span></div>
<div class="text-xs text-gray-500">Monitors</div>
</div>
<div>
<div class="text-lg font-semibold text-gray-200"><%= limits.interval %></div>
<div class="text-xs text-gray-500">Min Interval</div>
</div>
<div>
<div class="text-lg font-semibold text-gray-200">2</div>
<div class="text-xs text-gray-500">Regions</div>
</div>
</div>
<% if (plan === 'free') { %>
<div class="mt-4 pt-4 border-t border-gray-800 text-xs text-gray-500">
Upgrade to Pro for 500 monitors and 2s intervals. <span class="text-gray-600">Coming soon.</span>
</div>
<% } %>
</section>
<!-- Account info -->
<section class="bg-gray-900 rounded-xl border border-gray-800 p-6">
<h2 class="text-sm font-semibold text-gray-300 mb-4">Account</h2>