javascript - 在不同的 html 模板中链接两个面板的方法

Question

我正在做一个病人医院应用程序。我想实现一个功能，让接待员和医生可以查看当天的时间表。如果接待员在她的电脑上单击代表该患者签到的面板，该面板的颜色将变为红色。同时，医生的电脑也能看到变化。

我认为这个功能看起来类似于观察者模式，但我不知道如何实现它。

我的日程模型

class Schedule(models.Model):
    checked_in = models.BooleanField(default=False)
    patient = models.OneToOneField('Patient', models.DO_NOTHING, db_column='patient')
    date = models.DateField(db_column='date&time')  # Field renamed to remove unsuitable characters.
    time = models.TimeField()
    doctorid = models.ForeignKey('Staff', on_delete=models.CASCADE, db_column='doctorID', blank=True, null=True)
    id = models.AutoField(db_column='ID', primary_key=True)  # Field name made lowercase.
    notes = models.CharField(max_length=255,blank=True, null=True)
    waiting_time = models.TimeField(db_column='waiting time',blank=True,null=True)  # Field renamed to remove unsuitable characters.

    class Meta:
        db_table = 'Schedule'

代表 html 中当天所有日程的面板

{% if appoints %}
  {% for i in appoints %}
    <div class="panel panel-success">
      <div class="panel-heading">Appointment</div>
      <div class="panel-body">
        Patient: {{i.select_related('patient__user___first_name')}}{{i.select_related('patient__user___last_name')}}<br>
        Doctor: {{i.select_related('doctorid__user___first_name')}}{{select_related('doctorid__user___last_name')}}<br>
        Time: {{i.time}}
      </div>
    </div>
  {% endfor %}
{% endif %}

负责面板的 js 文件。注意:我不确定这个改变颜色的js代码，因为我是通过按钮修改它的。

$('[class="panel-body"]').click(function(){
    if(!$(this).hasClass('red'))
          $(this).addClass('red');
});

1. 我想在接待员点击它后使checked_in=True。我该如何实现？
2. 我应该以哪种方式实现，以便医生和接待员可以一起查看更改(即查看相同的面板)？ 如果可能的话，请向我提供详细信息和解释，因为我是 Django 新手。谢谢!

Answer 1

您可以使用Django-channels为此。

但首先，您需要在 User 模型中添加用户类型。然后您可以确定登录的用户类型，然后根据该类型您可以更改同一面板的内容。

class User(AbstractUser):
    user_type = models.CharField(choices=(("d", "Doctor"), ("p", "Patient"), ("r", "Receptionist")), max_length=1)  # update accordingly

现在您可以确定用户的类型，您可以使用 websockets 通过 django-channels 从服务器更新所需用户的屏幕。

我创建了一个类似的project这是基于订单交付系统的，但本质是相同的——一个用户更新一个实体的状态，并且更新所需用户的屏幕。您可以根据自己的需求引用并在您的项目中实现。

现在，要标记 checked_in=True，您可以创建一个 API 或 View ，为获取计划 ID 并更新标志的 API 或 View 返回 JSON 响应。然后，当单击该按钮时，您可以对端点进行 AJAX 调用，并更新标志。